イントロダクション

2020年2月頃より進めてきたプロジェクトがようやく一区切りつきそうなので、使用した技術について振り返りも含めたリンク集となります。

プロジェクト内での役割的には、ほぼ要件定義メンバー兼任のプロジェクトマネージャーで、プロジェクト終盤に実装も手伝ったという形となります。そのため実装メインで関わっていたわけではないので、以下「React」に関する理解が不十分な点があるかもしれませんが、何らか役立つような情報が記載できればと思います。

React自体は、「【React x Django】日本の電力を見える化するWebアプリケーションを作って公開してみた。」の時に、それなりに手を動かしてみたので、ある程度、ベースはあると思うのですが、やはり今回フロントエンド専任のメンバーの実装を見ていて、よく理解できていなかったり、知らない部分もあったので個人的な振り返りもしたいと思います。

リンク集

Hooks

React hooks 公式チュートリアル

開発する上で必要な部分を拾い読みしていたので、真面目にまずは公式チュートリアルから行きたいと思います。

Introducing Hooks
- 内容的には、なぜHooksが出来たのか、どういった課題を解決しようとしたものなのか、Hooks以前の技術はどうなるのか、といったところが説明されています。Hooks以後、新規でReactでフロントエンドを作る場合には、最初はあまり必要なさそうな部分に思えましたが、歴史を知るという意味でも読んでおくと良さそうです。
Hooks at a Glance
- 「at a Glance」ということで、チラ見程度に以下、一通りHooksの技術要素について紹介されています。
- 一番、基本的なuseState、useEffectをベースにCustom Hooksの作り方といったところまで解説されているので、初心者にとっては、頭に入って来やすい流れになっているかと思いました。
Using the State Hook
- useStateについて詳細な紹介がされています。
- サンプルコードについて個別の行単位で解説されている部分などは、非常にわかりやすいです。
- tipsとしてSquare BracketsでuseStateの変数を定義している部分の解説がされていますが、あまり意識せずに使っていたので、「なぜそうしているのか」というところを改めて読むと、なるほど感がありました。
Using the Effect Hook
- useEffectについて詳細な紹介がされています。
- 主にClass ComponentのcomponentDidMountやcomponentDidUpdate、componentWillUnmountと照らし合わせながら、useEffectだと何が改善され、どういった書き方をすれば、どのように動作するのか、といったことが解説されています。
- 個人的には、Cleanupは、使用する機会がなかったので改めて読んでみて気づきがありました。
- そのほかTipsとして
  - useEffectを複数記述して関連性の高いロジックごとにまとめる
  - useEffectがなぜrenderごとに実行されるのか
  - useEffectの第２引数を使った処理のスキップ
- があり、useEffectに対する理解が深まりました。
Rules of Hooks
- 以下の２つのルールについて説明がされています。
  - Only Call Hooks at the Top Level
    - こちらについては、なぜそうしなければいけないのかについて詳細な解説があります。
  - Only Call Hooks from React Functions
- どちらも説明にあるようにeslint-plugin-react-hooksを導入して実装していれば、指摘される内容なのでそんなに意識することもないかと思いました。
Building Your Own Hooks
- Using the State Hook、Using the Effect Hookでの説明に使われたサンプルコードのロジックをベースにCustom Hooksの実装について紹介されています。useStateとuseEffectを含んだロジックをコピペするとこんな感じになるけど、Custom Hooksとして切り出せば、こんなにスッキリ！という解説です。
- 後半では、reducerの解説が多少あります。
Hooks API Reference
- 以下、これまでに紹介されて来たuseStateやuseEffectも含めてのリファレンスが記載されています。
  - Basic Hooks
    - useState
      - ここまですでに紹介されて来たuseStateですが、Functional updatesとLazy initial stateについての解説があります。タイミングは違いますが、どちらもStateを設定する時に何らかの処理をした上でStateを設定する例となっています。
    - useEffect
      - ここまですでに紹介されて来たuseEffectですが、Timing of effectsということでuseEffectが実行されるタイミングがどういった瞬間なのか、といったところをここでは詳細に解説されています。
    - useContext
      - Context自体の説明は、Context Advanced Guideに「Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.(コンテキストは、ツリーの各レベルに明示的にプロップを渡さなくても、コンポーネント間でこのような値を共有する方法を提供します。)」とあります。
      - ここでは、そのContextを扱うHooksとしてuseContextの説明があります。
  - Additional Hooks
    - useReducer
      - 複雑な状態管理を想定したuseReducerの説明がされています。例として数を加減する状態管理をサンプルコードとして解説されています。
    - useCallback
      - 依存するパラメータが更新された時だけ、コールバック関数をレンダリングの際に生成するように記憶しておくためのuseCallbackについて説明がされています。
      - 記載を読む限り、子Componentがコールバック関数に依存している時に有用のようです。
    - useMemo
      - 依存するパラメータが更新された時だけ、変数をレンダリングの際に生成するように記憶しておくためのuseCallbackについて説明がされています。
      - 注意事項として、useMemoに渡された関数は、レンダリング中に実行されることが挙げられています。
    - useRef
      - 特定のnodeに対して参照をつけることができるuseRefの説明がされています。例として buttonをclickしたらuseRefの対象としていたinputにfocusがあたるサンプルコードが示されています。
    - useImperativeHandle
    - useLayoutEffect
    - useDebugValue
      - ここらへんは、公式以外であまり解説している記事もないのでスキップしたいと思います。
Hooks FAQ
- 大きな括りとしては、
- の４つに分かれていています。
- Adoption Strategyは、Hooks以前からReactを使っている人たちを想定した「Hooksだとどうなるの？」というQAが主でした。
- Performance Optimizationsのところは、個人的に気になった部分でuseCallback, useMemo, React.memoなどを中心にパフォーマンス向上に関するQAがあります。開発中は適宜参照したい部分かなと思いました。

useStateやuseEffectあたりは、実際に自分でも実装でだいぶ使っていたのでおおよそ把握はしていたのですが、Performanceに関係してくるuseCallback, useMemoあたりは、あまり把握できいなかったのでこれを気に公式を読み込んでみて良かったなと思います。

useEffectフックのしくみ

2018年の記事なので2020年現在だとちょっと古いのですが、useEffectの動きがサンプルコードと実際に動いているGIF画像と共にわかりやすく解説されています。useEffectのunmountのタイミングが具体的なボタンアクションをトリガーにして動作する様子が見れるので、公式チュートリアルを読んだあとに見ると、さらに理解が深まるかと思いました。

そのほか、レンダリングごとにuseEffectが実行させるのを防ぐ、マウント＆アンマウント時のみ実行するといった部分にも解説されています。

React Hooks の useEffect の正しい使い方

こちらもuseEffectに関する記事です。個別のトピックごとにサンプルコードも悪い例と良い例の両方が記載されているので、理解が深まりやすいです。「こういう風に書くとこういった問題が起きて悪い例だが、ここをこう直してあげれば、問題も解消されて良いコードになる」といった流れで、実装時に気をつけるべきポイントが分かりやすいです。

useContext / React Hooks – React入門

useContextについて説明がされているのですが、サンプルコードが分かりやすく、Component内でのuseContextの利用方法がイメージしやすく、理解が深まりやすいです。

雰囲気で使わない React hooks の useCallback/useMemo

主にuseCallbackの内部処理を実際コードを見ながら、その処理コストを分析されている点がとても勉強になりました。また、useCallbackに限らず、useMemoについても触れながらどういった方針で使うべきか、について言及されている点が興味深かったです。

Reactのレンダリングに関する完全ガイド

タイトルどおりReactのレンダリングについて詳細な説明がされています。親Componentがレンダリングするとその子Componentもレンダリングするなど、なんとなくそうだろうなと思っていた部分も明確に言語化されると、処理のイメージがつきやすく、パフォーマンス・チューニングをする際に役立つかなと思いました。

TypeScript

React入門（TypeScript版）

環境構築から始まって、typeを定義して子ComponentにPropsを渡す処理や、Componentの分割、useStateを使った状態管理など、基礎的な内容についてサンプルコードも例示しながら解説されています。

TypeScript で書く React コンポーネントを基礎から理解する

React.FCやPropsで使う型にについて詳細な説明がされています。union型で定義されているReact.ReactNodeの詳細を展開しながら解説されているところは、興味深かったです。記事内でも触れられているreact-typescript-cheatsheetがかなり量があるので、必要なときに適宜参照していきたいかなと思いました。

Full stack open 2020 : Part 9 : TypeScript

Background and introduction
- TypeScriptの仕組み（The language, The compiler, The language Service）や基本的な機能（Type）の概略、なぜTypeScriptを使うべきか、TypeScriptを使ったとしてもカバーされない課題とは何か、といったところが説明されています。
- TypeScriptの書き方を学ぶ前に、そもそもどういった技術で何を目的としたものなのかについて解説されている点は、その後の理解も深まりますし、良いと思いました。
First steps with Typescript
- Visual Studio CodeをIDEとしてTypeScriptの開発環境セットアップから簡単な計算処理の実装を通して、Typescriptの実装方法について説明がされています。
- tsconfigでの設定についても詳細に解説されており、単にTypeScriptでの実装に留まらず、周辺環境についても理解を深めることができます。
Typing the express app
React with types
- ここらへんは、一連のPart1からのチュートリアルが前提になっているので、今回はスキップしました。

TypeScript Deep Dive 日本語版

なぜTypeScriptを使うのか？でTypeScriptの利点がいくつか紹介されていますが、Pure JavaScriptが抱えていた課題がどういった形で解決されるのか、といった点も解説されていて分かりやすいです。

その他、言語仕様の解説記事や環境構築周り、テストなど幅広く記載があります。個人的には、JavaやC#などの型付き言語の経験があり、JavaScriptについてもes6の経験もあるので、だいぶ似たような要素が多いなと目を通しました。

今回のプロジェクトで使っていたパッケージ群などをピックアップ。

lodash

ユーティリティライブラリです。clonedeepやsumあたりを使用しています。

【関連記事】

moment

JavaScriptのdateオブジェクトに対して色々操作するライブラリです。

【関連記事】
moment.jsで日付時刻操作を行うTips

react-app-polyfill

何も対策しないとIE11でReactが動作しないので使用しています。
ただ、これで全てが解決という訳でもなかったのですが。。

【関連記事】
React.jsがIE11で動かない問題を解決する

react-dropzone

ファイルアップロード機能で使用しています。ガイドラインに従って行けば、割と簡単にファイルアップロードのフロントエンド部分が完成するのでおすすめです。

react-hook-form

Hooksの仕組みを内部的に使って、Formに対応するライブラリです。

【関連記事】
React Hook Formがいい感じ！
React Hook Form 入門

react-input-mask

電話番号やクレジットカードなど簡単にハイフン区切り入力ができるようにしてくれるライブラリです。

react-number-format

数字のカンマ区切りとかを実現してくれるライブラリです。

react-router

その名の通りURLルーティング用のライブラリです。
useHistoryを使って、history.pushで画面遷移をさせたり、ルーティンング周りで使用しています。

react-toastify

エラーメッセージを表示させるトーストとして利用しています。

recharts

円グラフや折れ線グラフなどチャートで利用しています。

recoil

Facebook公式による状態管理ライブラリです。

【関連記事】
Recoilの簡単な説明
 Reactの実験的ステート管理ライブラリRecoilの基本的な使い方
 Facebook製の新しいステート管理ライブラリ「Recoil」を最速で理解する

その他

Storybook

Component単位で動作確認やそのままカタログにできるツールです。

【関連記事】
ReactでStorybook チュートリアルをやってみました。
Storybook を腐らせずに運用しよう

React Dev Tools

Facebook公式のデバッグツールです。

【関連記事】
Reactアプリのデバッグ方法
 React Developer ToolsでReactで作ったページをデバッグする

一通り復習してみての感想

ちゃんと時間をとって技術要素をキャッチアップするのは大事だ。

今回のプロジェクトが始まる以前にReactでの実装経験はあったので、プロジェクト終盤にリリースに間に合わせるために実装に参加して、なんとなく雰囲気で実装できていました。ただ、個々の技術要素やワードについて理解しないまま「こうやったらこう動くから、仕様を満たすにはこんな感じで」という実装スタイルだったので、改めて一通りの技術要素を振り返ると気づきが多かったです。

やはりちゃんと時間をとって技術要素をキャッチアップするのは大事だなと感じました。特にReactのパフォーマンス周り（useCallback, useMemo）の記事は、レンダリングの仕組みや技術の目的に対する理解も深まったのでやっておいて良かったなと思います。

個々のライブラリ系も以前にReactで実装した際に結構便利なライブラリをあちこちで作ってるなーとは思っていましたが、今回のプロジェクトで使用されているライブラリも「おーなるほど、これは使える」的なものがあって感心していました。

React周りの技術要素はアップデートが早く歴史もまだ短い。

公式含めそうですが、Hooks以前と以後で変わった部分も多く、特にここ2〜３年はアップデートが早いのかなと各種記事を読んでいて感じました。日本語の記事だとやはり少なめなので、しっかりReactをやっていくのであれば、公式はもちろんのこと英語の技術記事をキャッチアップしていかないと良い実装はできないなと感じました。

最後に

個人的には、React x TypeScriptで２０２０年最新ならこうやって実装する、というのが見えたプロジェクトだったのでかなり収穫でした。今更、HTMLテンプレート x jQueryの時代には戻れないなーとしみじみ思います。

少しでもこの記事が誰かの役に立てば幸いです。