この記事は eureka Advent Calendar 2019 14日目の記事です。
13日目はAPI Team Headの高橋によるAPIチーム2019年のあゆみでした。

こんにちは！Pairs JP Web Teamの竹内です :)

Pairsのスマートフォン向けWeb版（以下Pairs SP Web版）のリニューアルを今年の10月にリリース致しました

この記事では、リニューアルについて開発者の一人である竹内が裏話も交えながら綴って行きたいと思います。

※また今回の話は日本版Pairsのみでの話しであり、台湾・韓国版は対象外ですので予めご了承ください。

Pairs SP Web版について

PairsではiOS版・Android版とは別に、インストール不要でブラウザからそのまま利用できるWeb版を提供しております。

Pairs Web版はPC向けのものとスマートフォン（SP）向けのもので別れていますが、今回のリニューアルではこの中のSP向けのアプリが対象となりました。

Pairs Web版はこちらから利用できますので、良ければ記事を読む前に一度お試しください。

この記事は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ファイル確認用のリンクを貼り付けてひと目で確認できるようにしています。

こんにちは！TechBlogリニューアル後初めての記事になります、BOXPこと竹内景太郎です😎

昨夜オプトさんにて開催された「市ヶ谷Geek★Night #18 フロントエンド、マジ卍」と言うイベントで、Reagent & re-frameについて登壇させて頂きました。

概要

登壇内容を簡単にまとめますと

• eurekaでは小規模ながらClojure, ClojureScriptが使われている
• Clojureはそのデータ構造のS式を駆使してこそ真価を発揮する
• Clojureでフロントエンドを開発出来るClojureScriptを使う時はReagent, re-frameを使うと良い

上記のような内容で、同じClojureScript枠として登壇されていたカマイルカさんのスライドに続く実用編と言った立ち位置で登壇させて頂きました。

ちなみにカマイルカさんのスライドはこちらで、Clojure, ClojureScriptの素晴らしい部分を10分間で理解出来るスライドになっています。

是非どちらもご覧ください！

所感

イベント中は多種多様なフレームワークに関するコアな内容が続き、最初から最後まで興奮がやまずにあっという間に終わってしまうようでした。

自分の登壇中の事はガチガチに緊張していたようであまり覚えていないのですが、Twitterのハッシュタグを見返してみるといくつか反響をいただけていたようで、登壇して良かったなとただただ嬉しく思っています。

もし、次回があれば是非もう一度登壇したいと思います！