システム開発部の野阪です。auカブコム証券ではSingle Page Application(SPA)をベースとしたフロントエンド開発をしています。
メジャーなフロントエンドライブラリではReact, Vue.js, Angularがありますが、世界シェアやTypeScriptとの親和性の高さを鑑みてReactを採用しています。ReactはView部分のみを担当するライブラリのため、実際のアプリケーションを開発するにはReduxを始めとした周辺ライブラリを選ぶ必要があります。
そこで今回選定した周辺技術と採用観点について紹介します。
TypeScript
TypeScriptはJavaScriptのスーパーセットです。
TypeScriptで静的な型システムを導入しています。型の不一致によるエラーを事前に検知することで品質と開発効率の向上を図っています。当社ではC#をメインにやっているので静的型付けへの抵抗はあまりないのかなと思っています。
また、ECMAScriptの新機能がJavaScriptより先にTypeScriptにくることもあるため導入メリットは多大にあると思います（最近だとOptional Chaining がそうでした）
Boilerplate
昨今のフロントエンドではピュアJavaScriptをそのまま扱うことは少なく、Babelやwebpackを利用しES20xxで書いたJavaScriptをコンパイルして動かすことがほとんどです。
当社ではフロントエンド領域をあまりやってこなかったのもあり、Babelやwebpackの設定に自信がなかったため create-react-app を eject せずに利用しています。
どうしてもBabelのプラグインを利用したい場合は craco を利用しています。現状は create-react-app と craco で事足りているためこの先もよほどのことがない限りは eject なしで行く予定です。
CSS in JS
CSS in JS とはJavaScriptコードの中でCSS Styleを記述・呼び出す仕組みです。Reactはコンポーネント指向のため、CSSのグローバルスコープな仕組みと相性がよくありません。BEM などの手法も触れてこなかったため始めから CSS in JS を導入しています。
実際に導入したライブラリは styled-component です。JavaScriptのファイルに生のCSSを書けること、VS Codeのプラグイン を入れることでSyntax HighlightやIntelliSenseが効くことが導入の決め手でした。TypeScriptにも対応しているため扱いやすいライブラリだと思います。
UIコンポーネント
Blueprint を利用しています。UIコンポーネントはカスタマイズのし易さ重視で決めました。UIコンポーネントによっては外部からスタイルを変更することが難しいものもあり、いくつか試した中から選びました。
ゆくゆくは社内で共通的に使えるUIコンポーネントを整えたいと思っています。
状態管理
ReduxとReact Contextを併用しています。
最初はReduxのみだったのですが、React Hooksが登場したことによりContextが格段に使いやすくなったため大部分をContextに移動しました。ReduxとContextの使い分けについてはまだこれといったものがなく悩み中です。
非同期処理
最初は redux-saga を利用していましたが、React Hooksと React Query の登場によりすべてReact Queryに書き換えました。
redux-sagaはReducerとSagaの役割分担がはっきりしていて慣れると書きやすいのですが、学習コストが高いのと記述量が多くなってしまうのがいまいちな点でした。React QueryではHooksベースでAPIを呼び出せる（コンポーネントとの距離が近い）上、ウィンドウフォーカス制御・リトライ処理・キャッシュ管理などなどWebアプリを作る上で欲しい物が揃っていたため採用しました。
スキーマ管理
今回は詳しく紹介しませんがシステム全体ではマイクロサービスアーキテクチャを採用しており、バックエンドとの通信にはBFF(Backends for Frontends)アーキテクチャを採用しています。SPAとBFF間の通信はREST APIを利用しています。
BFFはフロントエンドエンジニアが触るためライトに扱いたいですがすぐ壊れてしまうのも困ります。そこでSPAとBFF間の通信には openapi-generator によるコードの自動生成を利用することでインターフェースと実装の乖離を防いでいます。
openapi-generator のテンプレートには typescript-fetch をカスタマイズして利用しています。
ちなみにバックエンドとの通信にはgRPCを利用しており全体としてスキーマファーストをとれる構成になっています。このあたりも今後の記事で触れていきたいと思います。
まとめ
今回はフロントエンド開発で採用している技術の一部を紹介しました。React周辺は（React Hooksが登場してからは特に）トレンドの移り変わりが早く、常にアンテナを高くしておく必要があると感じています。
今回紹介したライブラリも1年後、2年後にはトレンドから外れていて知らずに採用すると開発する段階から技術的負債になってしまう可能性があります。そのため闇雲にライブラリを追加することはせず、将来性をよく考えて採用することをおすすめします。
当社では私の属するアプリ基盤グループにて統制をとるようにしていて、ライブラリの追加／使用に関しては許可を得るようにすると言うルールで運用しています。
