突撃！ 弊社のpackage.json 〜eurekaを支えるJavaScriptライブラリたち〜
この記事はeureka Advent Calendar 2018 18日目の記事です。
そろそろ2018年も終わりかけですが、皆さんいかがお過ごしでしょうか。Webチームの竹内(a.k.a. BOXP)です。
もう今年も終わりということで、この記事では我々Webチームが今年新たに導入していったJavaScriptのライブラリを紹介がてら振り返りたいと思います。
目次
- 1. normalizr
- 2. reselect
- 3. redux-thunk
- 4. webpack-bundle-analyzer
- 5. jest
- 6. renovate
- 最後に
1. normalizr
normalizr はReduxやFluxのStoreに格納するデータの正規化を行うライブラリです。 抽象的な言い方をしましたが要するに同じIDを持つオブジェクトを簡単に共通化出来るもので、例えば以下のようにオブジェクトを正規化します
Before
After
社内での使用用途
弊社のプロダクトでは複数の画面にまたがって利用され、かつ頻繁に更新されるようなデータ(お相手の情報やいいね！ のステータスなど)が多数あります。 そのため複数の画面で常に最新の状態を共有できるように、基本的には表示したいオブジェクトのIDを画面毎に持ち、表示するタイミングでnormalizrによって正規化されたオブジェクトを呼び出して表示する方針をとっています。
2. reselect
reselect は Redux Data Flow のうちStoreからデータ取得する部分をSelectorとして切り出し、取得処理のキャッシュを行うライブラリです。
社内での使用用途
先に述べたnormalizrの導入により、IDから正規化されたデータを取得する処理(denormalize)が必要となったためSelectorとキャッシュを使って取得させています。 また、Viewに合わせてデータを整形する処理はなるべくこのSelectorに寄せて積極的にキャッシュを利用するようにしています。
3. redux-thunk
redux-thunk はReduxの中で非同期処理を行うためのミドルウェアの一つです。 通常のReduxではStoreへdispatchされたActionをReducerが受け取る事で状態遷移を行いますが、redux-thunkが導入されている場合Actionの代わりにThunkActionと名付けられた関数をdispatchする事ができ、ThunkActionの中で非同期処理を行います。
社内での導入経緯
redux-thunkが導入されているプロダクトでは当初、 redux-saga を利用して非同期処理を実装していました。 しかしプロダクトのパフォーマンスを高めるためのCodeSplitを徹底して行くにあたりMiddlewareもCodeSplitする事となったのですが、redux-sagaはそれぞれの非同期処理(タスク)を一つの大きなタスクにまとめて実行する都合からMiddlewareをロードする度に一つのタスクにマージして再起動させる必要があり、CodeSplitの実現のためにReducerとほぼ同様の仕組みが必要となりました。 これは 先日の大須賀が書いた記事 に書かれている仕組みが二箇所に存在するようなもので、当然どちらでも同様に 課題 を抱える事となり運用が困難でした。
以上の背景から、純粋にMiddlewareをロードするだけで済むredux-thunkへ移行する事となり今に至ります。
4. webpack-bundle-analyzer
webpack-bundle-analyzer はビルド後に出力されるjsバンドルのサイズをグラフィカルに表示してくれるwebpack用プラグインです。 webpackの設定ファイルに組み込む事で、↓のような画面を表示出来るhtmlファイルを出力してくれます。
社内での使用用途
弊社では分割されたJSバンドルのサイズが大きくなりすぎていないか確認するために、CI実行時にこのプラグインとdangerJSを利用する事で、プルリクエストにhtmlファイル確認用のリンクを貼り付けてひと目で確認できるようにしています。
これにより、パッケージの更新やコードを追加した時にレビュー担当者が即時サイズを確認出来るようにしています。
5. jest
jest は言わずと知れたJavaScript用統合テストツールです。 テストランナーやモック用ライブラリ等も含めてテストを書くために必要なものがほぼ全て揃っており、セットアップが非常に簡単です。
社内での導入経緯
弊社のプロダクトでは今までテストランナーのkarmaやテストフレームワークのjasmineを併用して利用する事が多かったのですが、TypeScriptの為の設定や複数の設定ファイルを運用していくコストを考慮して新たに始動したプロジェクトではjestを採用しました。
6. renovate
※ライブラリではありませんが、複数のJavaScriptライブラリを利用して運用していくにあたってとても有用なツールなのでここに載せる事としました。
renovate はpackage.json等に記載されているパッケージのバージョンをチェックし、古いものがあれば自動で更新するプルリクエストを作ってくれるGitHubアプリケーションです。 プルリクエストを作るだけでなく設定次第ではCIが通ったプルリクエストを自動でマージしたり、メジャーリリースとマイナーリリースを見分けてマイナーリリースの時だけ自動マージさせたりも出来ます。
また、JavaScriptの他にCircleCIの設定ファイルやDockerfileもサポートしています。
社内での使用用途
弊社のプロダクトでは↑の画像の通り、テストやUIカタログ( docz )へのデプロイ用のCircleCIの設定ファイル、プロダクトのpackage.json、本番デプロイ用のDockerfileでrenovateが活躍しています。
まだリリース前のプロダクトなので、設定ファイルは以下の通りマイナーアップデートのみmasterへの自動マージを許可する設定で置いています。(リリース後は検証用環境への自動マージとする予定です。)
最後に
6つほど社内で利用されているライブラリ(一つ違いますが)を紹介致しました。 2018年も残り少ないところですが、大掃除のついでに今年作って来たプロダクトのpackage.jsonを眺めて振り返ってみるというのもなかなか乙なものなので、みなさんも是非様々なライブラリとの出会いや別れを振り返ってみてください。
明日は同じくWebチームの太田の記事です。お楽しみに！
