読者です 読者をやめる 読者になる 読者になる

dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

Numeral.jsのlocaleを変更して桁区切り文字をカンマからピリオドにする

日本だと桁区切り文字は,(カンマ)、小数点は. (ピリオド)だけど世界的に見ると国によって異なる。 世界各国での数字の区切り方 | コリス JavaScript で数値を扱うときには Numeral.js を使っていたんだけど、Numeral でも(Moment.js などと同じく)loca…

作って学ぶRedux Middleware

はじめに Redux で非同期処理を行うための Middleware である redux-thunk は、わずか 10 数行のこのようなコードです。 https://github.com/gaearon/redux-thunk/blob/v2.2.0/src/index.js function createThunkMiddleware(extraArgument) { return ({ disp…

Salesforce:JavaScript Remoting(@RemoteAction)をPromiseで扱う

はじめに Visualforce で Angular や React などの JavaScript ライブラリを使ったアプリケーションを作ろうと思った場合、 Apex で定義したメソッドの実行には JavaScript Remoting を使うのが一般的かと思います。 似たようなことを実現するための手段とし…

webpack+ES2015でモダンGoogle Apps Script開発

するための scaffold 的なものを作った。 gapps を使って Google Apps Script をローカルで開発するための方法については 以前 Qiita に書いた し、それにより ES2015 や TypeScript で書いて手元でビルド、みたいなことはみんなやるようになったんだけど we…

Meguro.es x Gotanda.js #1 in Drecomに行ってきた

行ってきました。 hyperapp について Jorge Bucaran https://github.com/hyperapp/hyperapp SPA を作るための 1kb の軽量ライブラリ Virtual DOM + Redux/Elm 的な State 管理 + Router Fast React や Vue は framework っぽすぎ "dependencies": {} API ド…

React/Reduxの設計に関する参考記事まとめ

最近悩んでいる React/Redux でそれなりの規模のアプリケーションを作るための良い設計について、 日頃ネットで気になる記事を漁っていたんだけど、積読がたまってきた&Twitter やら Pocket やら Qiita に散らばってしまったのでここらで一旦整理します。 …

Lightning Utility Barを作ってみた

Spring'17 から利用可能になった Utility Bar を作ってみたので、その手順を残しておきます。 とりあえず Hello, World! と表示するところまで。 こちらの記事が参考になりました。 一応、公式の Implementation Guide とやらもあるみたいだけど、 https://r…

FlowtypeのUtility TypesでESLintエラーを出さないようにする

ちょいメモ。 Flowtype の Utilty Types を使っていて type Exact<T> = T & $Shape<T>; などと書いたら ESLint でエラーになった。 error '$Shape' is not defined no-undef eslint-plugin-flowtype は導入済みで、各バージョンは以下の通り。 $ npm list --depth=</t></t>…

ctrlp.vimでファイルを検索するときのウィンドウサイズを変更する

vim

前回に続き、ctrlp.vim についてのメモ。 ctrlp.vim でファイルを検索するとき、そのままだと候補の一覧がウィンドウ下部にmax10件ぐらいしか表示されない。 ここのサイズを変更したい。 設定方法を調べてみたところ、この Issue に書いてあった。 Not enoug…

ctrlp.vimでnode_modulesなどのフォルダを除外する

vim

ちょいメモ。 Vim で Atom や VSCode のような Ctrl + P によるファイル検索ができるようにする ctrlp.vim というプラグイン。 便利なんだけど、node_modules があるプロジェクトで使うと起動が遅かったり node_modules 内のファイルまで検索対象になってし…

JIRAの課題フィルタで一度に表示する課題数(ページサイズ)を変更する

ちょいメモ。 課題フィルタで一度に 50 件ずつしか結果が表示できないのを変更したい。 (画像は https://ja.confluence.atlassian.com/jiracoreserver070/searching-for-issues-777015942.html より引用) と思って調べてみたところ、 Expanding Issue Filt…

WEB+DB PRESS Vol.97のReactサンプルアプリをReduxで書き直した

WEB+DB PRESS Vol.97作者: 外村和仁,小林徹,古川陽介,佐藤歩,yoku0825,是澤太志,一野瀬翔吾,加藤颯史,のざきひろふみ,うらがみ,水嶋淳貴,久田真寛,久保達彦,伊藤直也,遠藤雅伸,ひげぽん,海野弘成,はまちや2,竹原,倉岡洋義,WEB+DB PRESS編集部出版社/メーカー…

webpackでReact/Reduxを本番環境用にビルド(production build)する

はじめに React に限らず、JavaScript を使ってると本番環境用のビルド(以後、production build)として圧縮や難読化を行う必要があります。 webpack にはそのためのプラグインとして UglifyJsPlugin があるのは知っていましたが、 単純にこのプラグインを…

Inside Frontend #1に参加したメモ

こちらのイベントに行ってきました。 AMA(休憩時間中の質問コーナー)という取り組みが非常に良かったです。 以下、話を聞きながら手元でメモしてた内容。 Web over ServiceWorker by @jxck__ Capability against Native/Low API Installable Performance P…

react-lightning-design-systemをVisualforceで使う

件名の通りですが少しハマりどころがあったのでメモ。 普通に react-lightning-design-system を使おうとすると SVG アイコン使用時に Unsafe attempt to load URL エラーが表示されます。 Unsafe attempt to load URL https://zakiyama-dev-ed.my.salesforc…

webpack2でTree Shaking以外に何ができるようになったのかメモ

メモ。 webpack 2 正式リリース(バージョンは 2.2)だとか Tree Shaking という機能がいいらしい とかは目にしていたけど 結局 v1 -> v2 とメジャーバージョンが上がって Tree Shaking 以外に何が変わったの?というのがよくわからなかったので調べてみた。…

gulpタスクに.envで定義した環境変数を渡すならgulp-envでなくnode-env-fileを使う

はじめに タイトルの通り。 gulp タスクに .env のようなファイルで定義した環境変数を渡したくて、 gulp-env と node-env-file を比較した。 結論としては node-env-file の方が使い勝手が良かった。 それぞれの使い方 node-env-file // gulpfile.js var gu…

[Vim]NeomakeでFlowを実行したときにexit code 64が表示されたときのメモ

vim

Vim の Lint チェックに Neomake を使っていて、実行時に Neomake: flow: completed with exit code 64. と表示されてしまったときのメモ。 Flow のバージョンは 0.37.4。 原因と解決策 https://github.com/neomake/neomake/blob/master/doc/neomake.txt#L31…

react-lightning-design-systemのDatepickerを日本語表記にする

メモ。 react-lightning-design-system の Datepicker の月や曜日の部分を日本語にしたい。 locale のようなプロパティはないが、内部的に Moment.js を使っているので以下のようにして変更できた。 (2017/01/20追記) 普通に moment.locale('ja'); だけで…

SlackのOutgoing WebhookとGoogle Apps ScriptでBotを作ったときにつまずいたところメモ

Bot

Slack の Bot にメンションしたら Outgoing Webhook で GAS のスクリプトを実行するようなものが作りたくて とりあえず連携するところまで作ったんだけど、思ったよりハマったところがあったのでメモ。 基本的な作り方に関しては、こちらの記事の通りに作成…

[Apex]レコードが承認プロセスでロック中かどうか判定する

メモ。 レコードの ID を元に、そのレコードが現在承認プロセスの最中で、かつロックされているかどうか Apex で判定したい。 ここを参考にできた。 apex - Check if a record is in approval process - Salesforce Stack Exchange Approval.isLocked(id) を…

[Salesforce]カスタムオブジェクトのメタデータをCSVに変換する

動機 開発時、特定のカスタムオブジェクトの項目一覧をさっと確認したい。 基本的にメタデータを git 管理しているので、src/objects/MyObj__c.object のようなローカルの XML ファイルをパースして 人が読める形式に加工できれば十分。 Node 界隈のパッケー…

npm run + Tabキーでnpm scriptを補完する

知らなかったのでメモ。 参考:npm run should have autocomplete prompt for available scripts · Issue #8030 · npm/npm # zsh の場合 $ npm completion >> ~/.zshrc ~/.bashrc も可。 $ npm run <TAB> build-storybook storybook test 楽になった。</tab>

Material-UIでrefを使う

メモ。 以下のようなコンポーネントの <input type="text"> 項目を Material-UI の TextField に置き換えようと思ったが ref で参照しているのをそのまま TextField でも使えるのか迷った。 import React, { PropTypes } from 'react'; export default class AddTodoForm extend…

API Blueprintによるドキュメント開発環境【2016年冬】

ここから少しアップデートしたのでメモ。 リポジトリ 特徴 markdown -> html への変換には aglio、ローカルサーバーは --server オプションを使う ローカルで markdown ファイルを html に変換するのに aglio を使うところは以前と同じ。 改めて調べてみると…

React(v15)&ReduxでMaterial-UIを使ってみる

メモです。 基本的な使い方を試してみた。 リポジトリ Redux の basic チュートリアル にそって作った Todo アプリをベースに、Material-UI を適用してみる。 https://github.com/zaki-yama/redux-todo-app/pull/2 (Material-UI 適用前のコードには base と…

eslint-config-airbnbのルール内容を確認する

ESLint はあまり深く考えず eslint-config-airbnb を導入していて、そんなに問題はないんだけども たまにこちらが期待したルールが無効になってたり、逆にそんなに守らなくてもいいと思われるルールが有効になってたりして、ふと 「あれ、xxx っていうルール…

[Vim]SyntasticによるESLintチェックが遅いのでNeomakeに乗り換えた

(2017/01/23追記) この後 Flow を導入しようとしたら色々問題が発生したので、Neomake から ALE に乗り換えた。 (追記ここまで) Vim の Syntax Checker として有名なのは Syntastic ですね。 最近は JavaScript を書くことが多いので、この Syntastic を…

Reactでフォームの項目をどう扱うか問題

メモ。 なんの話か React でフォーム項目を簡潔に書く方法がわからない 管理されたコンポーネントで書こうとすると、項目の数だけ state と対応するイベントハンドラが必要になる 親に渡す必要がある、とかだとさらにしんどい // 基本形 class MyFormCmp ext…

npm installしたパッケージの更新確認とアップデート(npm-check-updates)

タイトルの通り。 npm install --save なり --save-dev なりして package.json に書き込まれたパッケージのバージョン、どうやって定期的にアップデートしていけばいいかわからなかったので。 新しいバージョンがリリースされているかどうかの確認と、実際に…

Dreamforce'16 Developer Keynoteのメモ

今年は行けなかったので Dev Keynote だけざっと見ました。 以下、雑多なメモ。 キーワード Lightning Einstein Salesforce DX Lightning Winter'17 以降の新機能についてデモしながら一通り紹介、といった感じ。 (デモは 13:40 頃から) Lightning Data Se…

package.jsonのパッケージバージョンに記載される ^ (キャレット) とは?どうしてつくのか?

$ npm install --save react などのコマンドでパッケージをインストールすると、package.json にはインストールした(その時点での最新)バージョンが記載されますが そのとき "dependencies": { "react": "^15.3.2" } というように、バージョン番号の前に ^…

Hubotに管理画面のような静的ページを追加する

メモ。 ブラウザから /admin にアクセスしたら管理画面みたいなものが開いて Bot の簡単なカスタマイズができる、みたいなことがやりたくて 特定の URL で静的なページを返すようなことができるのか調べてみました。 結論から言うと robot.router が Express…

Slackのチャンネルのメンバーからランダムで一人選ぶBotを作る

タイトルの通り。 GitHub の PR のレビュアーを、開発チームの特定のメンバー数名から一人指名したい 開発チームの一部のメンバーで持ち回りでやらないといけないタスクがあって、毎回誰がやるか決めるのめんどい といったことがあって、せっかくなので bot …

JavaScript(ES2015&React)で画像を扱う:リサイズとプレビュー表示

はじめに web サイト/アプリケーションで画像のアップロード機能などを実装する場合、 最近のスマホのカメラで撮影した画像はサイズが数 MB にも及ぶので、あらかじめクライアント側で送信可能なサイズまで縮小する必要があります。 今回はそのような画像の…

HubotをES2015で書いてHerokuにデプロイする

今さらながら Slack bot を作りたくて、フレームワークは Hubot を選んだ。 Hubot はそのままでは CoffeeScript で書く必要があるんだけど、ES2015 もやっと覚えたばかりなのに CoffeeScript の勉強はしたくない。 ということで、ES2015 で書くための手順を…

Emoji Prefixに学ぶgitのコミットの分け方

git

こちらの記事を読んで。 この記事では、Emoji Prefix というコミットメッセージに関するルールについて紹介している。 どんなルールかというと、「コミットメッセージの先頭には、コミットの内容に合った Emoji をつけましょう」というものらしい。 Prefix …

reveal.jsで外部Markdownファイルを読み込む

いつも忘れるのでメモ。 index.html 内に直接書くのではなく、別途用意した Markdown ファイルをスライドにしたい。 body に以下のように記述する。 <body> <div class="reveal"> <div class="slides"> <section data-markdown="./index.md" data-separator="^\n\n\n" data-separator-vertical="^\n--\n" data-separator-notes="^Note:"> </section> </div> </div> ... </body> こうすれ…

ES2015時代のJavaScriptテストツールまとめ

最近になって JavaScript を勉強中です。 ES2015 と React にもちょっとずつ慣れてきましたが、テストについては Karma とか mocha とか名前は聞くけど何が何なのかよくわかってなかったので、軽く整理してみます。 JavaScript テストツールの大まかなカテゴ…

AsciiDocによる継続的ドキュメント開発〜1.インストールと基本的な使い方

はじめに ドキュメントを書くための言語としておそらく今一番ポピュラーなのは Markdown だと思いますが、 かっちりした仕様書やユーザーマニュアルなど、より本格的なドキュメント作成にはやや機能不足と感じることがあります。 私も以前、ドキュメントを G…

[git]複数のcommitをまとめてcherry-pickする

ちょいメモ。 別ブランチのコミットを他のブランチにも適用するときに便利な cherry-pick コマンドですが、 複数のコミットをまとめて cherry-pick してしまいたい時がたまにあります。 そんなとき $ git cherry-pick [cherry-pick の始点となるコミット]..[…

Summer '16 開発者向けWebセミナー のメモ

Summer '16 開発者向けWebセミナー | Salesforce Developers 割とちゃんと観た。 UI の新機能(Lightning Experience) ホーム画面のカスタマイズ Lightning App Builder で作ったページが(ようやく)LEX とモバイル両方で使用可能 オブジェクトの日付項目…

HTML5とか勉強会 - React最新情報 に行ってきた

行ってきました。

ESLintでReactとES2015の構文チェック(eslint-config-airbnb)

ES2015の構文チェックと言えば ESLint ですね。 ESLint は "The pluggable linting utility" というだけあって、Rules と呼ばれる膨大なチェック項目の中から 自分がチェックしたい項目を取捨選択し、最終的に .eslintrc という設定ファイルを用意する必要が…

webpack-dev-serverの基本的な使い方とポイント

はじめに JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch (または -w)オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを…

VimでESLintをグローバルインストールせずに、Syntastic+ESLintでES2015の構文チェックをする

(2016/10/24追記) しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。 (追記ここまで) はじめに vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じる…

GCPUG In Tokyo & Osaka #1 に行ってきた

行ってきました。 GCPUG イベント初の、東京 - 大阪を TV 中継で結んだ2拠点同時開催となりました。 会場はサイボウズさん。オフィスがとってもおしゃれ。 GCE で Selenium を動かすというセッションが一番の目当てだったんですが、到着が遅れて最後のセッシ…

webpack.config.jsの読み方、書き方

はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが 公式チュートリアルでも webpack.config.js については少ししか触れられていなかっ…

GitHubでの開発に便利なツール3選

ツールというか CLI。 全部有名なのでほとんどの方がご存知だと思うが、自分がよく使うものを。 1. hub https://github.com/github/hub git コマンドの機能を拡張したもの。 (参考) インストール Mac の場合は Homebrew から。 $ brew install hub $ which…

ES6とwebpackでReact.jsのチュートリアルをやってみた

タイトルの通り、こちらの公式チュートリアルをES6でやってみました。 また、チュートリアルでは React や Babel などを CDN で読み込んでいるためビルドは不要になってますが、 実際に開発するときは browserify なり webpack なりを使用したビルド環境が必…