スポンサーリンク
概要
今回はオライリー本の「Reactハンズオンラーニング 第2版 」に関しての感想を書きます。
2021年の8月に出たばかりの新刊で、お盆休みに読破しました。
技術書のセールとおすすめ書籍を紹介しています。合わせてご覧ください。
スポンサーリンク
書籍概要
どんな本？
Facebookが開発したJavaScriptライブラリ「React」の解説書。
2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。
本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。
- Alex Banks、Eve Porcello 著、宮崎 空 訳
- 2021年08月 発行
- 368ページ
- 定価3,740円(税込)
スポンサーリンク
スポンサーリンク
内容のまとめと感想
SPA (Single Page Application) のフレームワークにおいて、１番メジャーであるReactに関してまとめた入門書です。
Javascirptの説明などもあり初学者にも配慮した構成になっています。
ただフレームワークを使うのではなく、極力テンプレートなどを使用せず、一から機能を実装していくので仕組みをしっかりと学ぶことができる本です。
細かいユースケースなどはこの本ではカバーしきれないので、別途学習は必要ですがReactを学ぶのに良い本だと思いました。
良かった点
読みやすい
オライリー翻訳書にありがちな、変な日本語やまわりくどい説明による読みづらさも無くて、読みやすったです。
ページ数も300ページ前半と、厚すぎず、薄すぎないボリュームなのも良いです。
React Hooksを使用
React自体のコードの書き方がReact Hooks前後で大きく変わっており、本書はHookによる書き方で説明されています。
（数年前に少しだけ触った時に覚えたClassによる実装と大きく変わった実装。）
Reac Hook自体が比較的最近できたものなので、恐らく少し古いReactの本だとclassを使用した実装(非推奨？)となっているので、その点は安心して最新の実装方法を本書で学ぶ事ができます。
以前触った時はReduxが苦手で嫌だったのですが、Hookになってステートの管理方法が変わってReduxを使用しなくなったのか、本書では使用されていなかったのも個人的には良かったです。
わかりやすい説明構造
いきなり機能をてんこもりで作るのではなく、徐々に機能を作って説明していくといった方法が理解しやすかったです。
1.かんたんな機能を作る → 2.説明 → 3.この方法の問題点や足りない機能に関しての説明 → 4.機能追加や新しい書き方の説明 → ...
といった流れで説明がされるので、段階的に理解できて、その機能が必要となる背景などもわかりやすいです。
(逆に遠回りと感じる人もいるかもしれませんが。)
1から説明
CRA(Create React App)によるテンプレートを使用せずに、1から説明してくれるので、Reactがどういった構造や仕組みなのかを含めて理解できるので良かったと思います。
(逆に細かい部分はいいからとにかく、動けば良いという人には遠回りと感じるかも。)
関連機能に関しても説明あり
npmやyarn,Eslint,Prettier,JestといったJS開発における各種ツールに関しても1通り説明がされていて、開発する上で必要となるエッセンスもしっかりできて良かったです。
付録では翻訳者による、これらのツールに関するより詳細な説明や導入方法の説明が追加されていて、JS開発に慣れていない初学者向けのフォローがしっかりされていると感じました。
スポンサーリンク
気になった点
より実践的な方法は別途学ぶ必要あり
基本的に個々の機能を説明するための構造となっているので、アプリケーションとして実際に作る際に必要になる機能は別途自分で調べるなりする必要があります。
(例：ログインやログアウトを含めた認証,認可を組み込むには？)
Typescriptではなく、Javascript
本書はJavascriptを使用した説明になっています。
昨今はTypescript(TS)による実装の方がかなり増えてきましたし、Reactでは特にTSが使用されているイメージがあります。
なので、TSによるReactの実装を学びたい人には別途他の方法で学習が必要です。
（一応少しだけ、Typescriptに関しても触れられてはいますが）
個人的には、時間はかかっても良いのなら、一度この本でしっかりと基本的な仕組みを学んでからTSによる実装を学ぶのも良いのではと思います。
Reactを実際に触ってみての感想
実際にこの本で学習しながら、以前Vue.jsで作っていたサイトをReactで作り直してみました。
最初はJSXの記法が馴染まずに、うまくコードが動かない(コンパイルエラーになる)という事で悩まされましたが、慣れてきました。
Vue.jsに比べると敷居は高いと感じるものの、慣れてくるとこれはこれでアリだなぁと思います。
スポンサーリンク
その他オライリー本感想
その他のオライリー本の紹介をしていますので、合わせてご覧ください。
【オライリー本感想】Seleniumデザインパターン&ベストプラクティス はUIの自動テストのガイドとして良くまとまっている良書
読書ノート(個人的なまとめ)
第1章 Reactの世界へようこそ
本書のねらいなどの概要、Node.jsなどの最低限の環境のセットアップに関して書かれている章です。
第2章 React学習に必要なJavascriptの知識
Reactを学習する上で必要となる、Javascriptの文法に関する最低限の構文や知識をまとめてある章です。
主にES2015以降の主要な機能に関して説明がされています。
最近のJSに慣れている人ならばさっと流し読みで十分な内容です。
逆に本当に必要最低限なので、JSが初めてという人は、別途JSの入門書読んだ方が良いかも。
第3章 Javascriptにおける関数型プログラミング
Reactは関数型プログラミングの影響を受けているという事で、JSにおける関数型プログラミングの概念や文法が説明されています。
サンプルコードなども豊富でわかりやすいと思いますが、この時点ではReactとの関連性もあまりわかりませんし、なんとなくこういうものか、という雰囲気を掴むだけでも良いと思います。
- 関数型とは？
- 関数を第一級オブジェクトとして扱えるもの。(関数を変数、引数や戻り値として扱える。高階関数とも言う。)
- JSはこれらを満たすので関数型プログラミングと言える
- 命令型 vs 宣言型
- 関数型は宣言型プログラミングの一部
- 命令型プログラミングは手続き(how)を記載
- 宣言型プログラミングは何をするのか(what)を記載
- 抽象化された「何をするのか」が書かれた関数を繋ぎ合わせて処理を作っていくので、何をしたいのかがわかりやすい
- 関数型プログラミングの基本概念
- イミュータブル
- 全てのデータはイミュータブル(不変)でないといけない。(引数の値を変えたりしてはいけない)
- 参照型であれば、データのコピーを作った上で変更を加える
- 純粋関数
- イミュータブルな引数を使用して、値を返す関数
- 関数の外のスコープとは独立(関数外の値の影響は受けない、与えない。)
- 外部からの影響が無いのでテストがしやすい
- ReactのUIコンポーネントは純粋関数で定義されている
- 関数の合成
- 独立した関数を束ねてアプリとしての機能を作り出すこと
- 連鎖：メソッドを.で繋いで次々に呼び出していく
- 連鎖は呼び出しが多数あると読みにくい。その場合、高階関数を使用して、関数同士を合成するとわかりやすくなる
- イミュータブル
スポンサーリンク
第4章 Reactの基本
長い前置きを経ていよいよReactの説明に入ります。
ReactのAPIを使ってHTMLのDOM要素をどのようにレンダリングするのか？といった事にフォーカスして書かかれています。
これらのAPIを使って、実際にコンポーネントを作るといった事までを行います。
いきなりJSXなどのテンプレート構文から入ってしまいがちな所を、先にしっかりとベースとなる概念を理解する事にフォーカスをあてています。
第5章 ReactとJSX
Reactコンポーネントの実装方法として必要となるJSX(JSとHTMLをミックスした記法)に関しての説明がされている章です。
Vue.jsやAngularだと画面はテンプレートとして基本的にHTMLとJSは分離されているのですが、ReactはJSの中に記載していく方法となるのでちょっと癖がある部分です。
JSXをまとめたりコンパイルするためのツールとして、Babelやwebpackといったツールの説明と実際の操作も説明されています。
CRAでテンプレートから作るとこのあたりの設定が作られて意識しなくてもいい感じで動いでくれるのですが、敢えて使わずに自分で設定を行なって仕組みを説明しているので、勉強になります。
- 4章で使用したcreateElementによるコンポーネント作成は実際には殆ど行わない。JSXによる記載が一般的
- JSXとは
- JSとXML(HTML)を組み合わせた言語拡張(Reactのために作られた)
- 独自定義したコンポーネントをHTMLタグのように使用できる
- タグ内の属性の記載は注意が必要(classはJS予約語なので、classNameと書く。)
- {}で囲む事でJSのコードが記載可能
- ブラウザで直接実行はできない。JSにコンパイルされる必要がある(=> Babelによるコンパイル)
- Babel
- JSをコンパイルするためのツール。
- 元々はJSの新機能をサポートしないブラウザでも動くように、新しいJS構文を古いJS構文に変換するためのツール。
- コンポーネントの作成方法
- function コンポーネント名 () {}といった形で関数として定義する。(これをインポートすればそのままタグとして使える)
- function XXX(props) { props.aaa }もしくはでfuction XXX({aaa,bbb,ccc})といった形で記載する事でタグで記載された情報を取得できる。
- ルートのタグは1つにしないといけない。回避するために<></>といった簡略記法でダミーを記載可能。
- webpack
- モジュールバンドラ。(JSやCSSなど一式を全て単一のファイルに結合する)
- Reactでも個々のJSXコンポーネントを結合して１つのJSにまとめるために使用している（CRAでテンプレートから作ると自動で設定が行われている）
- コード分割；コードを機能ごとに分割して管理できるの、チームでの開発や管理を容易にする
- ミニファイ：余白削除や変数の簡易化などでコードサイズを小さくする
スポンサーリンク
第6章 ステート管理
コンポーネントのプロパティを動的に変更することで、描画後にも表示を変更できるようにする方法を説明している章です。
（主な用途としては、ボタンクリックやテキストボックスの入力などによるユーザとの対話的な操作への対応。）
この辺の考え方がVueやAngularと少し違うので最初は戸惑いましたが、慣れると影響の範囲が極小化される方法となるので腑に落ちました。
カスタムフックや、コンテキストといった新しい概念が出てくる上に、それらを組み合わせたりもするため、初見だとわかりにくいので、実際にコードを書いたりしてみることをオススメします。
- ステートとは？
- 描画後にコンポーネントの表示を再度変更するための値
- useStateフックを使用して値とSetterを定義する
- 親子関係のあるコンポーネントにおけるステート
- 親がステートを持ち、子にプロパティとしてステート値を渡す。
- 子にはプロパティとして関数(イベントハンドラ的なもの)を作っておき、更新が必要なタイミングで親に通知をあげる
- 親は通知に応じてステートを変更する。→子にも通知されて表示が変更される。
- カスタムフック
- useStateなどのフックをラップして共通化や抽象化したもの
- Reactコンテキスト
- ステートは便利だが、親子関係が深くなると冗長になる(親から子へプロパティとイベントで数珠繋ぎになる)
- 親子での伝播をなくして、ステートを1箇所で管理する方法を提供するのがReactコンテキスト
- createContextで作ったコンテキストをProviderとして値を公開。Providerで囲まれたスコープのみアクセス可能になる
- データの変更の仕組みはステートとの併用が必要(コンテキスト内にuseStateでステートを公開し、settterを公開する。)
- setterを公開すると何でもできてしまうので、ラップした関数(addやremoveなど)を作成して公開する方法もある
- カスタムフックを使用してコンテキストを隠蔽することで、コンテキストを意識せずに使用できるようになる
第7章 フック
章で何種類かのフックを説明していますが、本性ではそれ以外の新しいフックに関して説明しています。
useMemoやuseCallbackのあたりの話は、本書だけだと正直わかりづらかったです。
下記の説明を読むとわかりやすくて良いかも。
https://www.to-r.net/media/react-tutorial-hooks-usememo-usecallback/
- useEffectフック
- 描画完了後に呼び出される。ライフサイクルメソッド的に使用可能。(描画完了後に重たい処理や同期ダイアログ(alert)の呼び出しを行いたい時。)
- 描画処理と直接関係ない処理(副作用)を記述する。
- 引数の依存配列に監視したいステートを指定することで、特定の値が変わった時のみ呼び出すといった使用方法が可能。
- 戻り値に関数を返すと、その処理はコンポーネントがアンマウント時に呼び出される。(アンロード処理として使用できる。)
- useMemoフック
- useEffectに渡す連想配列にプリミティブ型以外を指定すると、描画実行時に毎回実行されてしまう。(同一インスタンスかどうかのチェックが判断基準のため)
- 値としては同じなのに毎回処理が実行されてしまい、パフォーマンスが劣化してしまうのを防止するためにメモ化する
- useCallbackフック
- useMemoの関数版。onChangeなどのイベントハンドラなどをこれで指定すると呼び出しを抑制できる。
- useReducerフック
- useStateに似たもの。setterの代わりに現在値を使用した任意の処理を組み込める。(現在値が引数で戻り値に設定したい値。)
- メモ化の使い時
- メモ化を使用しなくても、 基本的にReact側で最適化してそこまでパフォーマンは落ちない
- メモ化の乱用は実装コストに見合わないので、実際に実行してみて遅いと感じた時に使用するのが良い。
スポンサーリンク
第8章 データ
SPAアプリではREST APIなどを使用して表示のためのデータを取得や永続化を行なったりします。
そういった外部のAPIとのReactコンポーネントの連携方法に関して書かれている章です。
REST APIをコールするためのJSの標準APIであるfetchを使用してGitHub APIを呼び出し、その情報を表示するコンポーネントの実装例が紹介されています。
FetchAPIを組み込んだ、取得データ、ロード状態、エラーなどを管理するカスタムフックの実装例が紹介されており、実際にアプリケーションで外部APIとの連携する際に役立ちます。
- レンダープロップ
- 直接、描画要素を受け取るプロパティ(プロパティ内に直接タグを書く)
- 呼び出し元が任意の描画要素を指定できるので、コンポーネントの再利用性が高まる。
- 使用例：リスト要素を表示するコンポーネントで要素がない時の表示をプロパティとして使用する
- 仮想リスト
- 大量の配列要素を持つコンポーネントで、表示に必要な部分のみ描画し使用する機能(パフォーマンスのため)
- reactが提供する、FizedSizeListコンポーネント。
- 使用例：リスト要素を表示するコンポーネントで要素がない時の表示をプロパティとして使用する
- useFetchフック
- FetchAPIの呼び出しと、各ステートを抽象化したカスタムフックの実装例
- ロード状態、エラー、読み出しデータを提供し、使用するコンポーネントはURLと、読み込んだデータの表示、ロード中の表示、エラー時のメッセージのみを評すれば良くなる。
- ロード中のスピナーや文言などを共通化＋レンダープロップによる再利用化をするコンポーネント化も可能
- リクエストのキャンセル
- APIリクエスト中にコンポーネントがアンマウントされるケースでは、応答がきたタイミングでエラーが発生する
- useEffectフックでコンポーネントのマウント状態を保持させることで、応答処理でこの状態を使用して処理をキャンセルさせることが可能
第9章 サスペンス
本章では、まだ実験的なもので将来的に変更がされる可能性がある機能に関しての説明がされています。
タイトルにもあるサスペンス以外にも、エラーバウンダリー、コードスプリッティング等、まだまだ変更の可能性があるもののユーザエクスペリエンスを向上させるための機能がコードと共に紹介されています。
個人的にはエラーバウンダリーは使用も難しくなく、便利だなぁと感じました。
- エラーバウンダリー
- エラーが発生してもアプリ全体に影響が及ばないようにする機構(コンポーネント)
- エラーバウンダリーコンポーネントを親タグとして使用し、配下のコンポーネントでエラーが発生したらエラーバウンダリが代わりにエラー文言を表示する。
- 現時点ではフックは使用できない、クラス機構を使った実装が必要
- コードスプリッティング
- コードの遅延読み込みを実現する機能
- 一度にコンポーネントを読み込まずに、必要なタイミングで読み込むことでUXの向上を図る
- React.lazyでコンポーネントを遅延読み込みできる
- Suspenseコンポーネント
- コードスプリッティングの状態を管理する機能
- コンポーネント読み込み中の描画(スピナー)をレンダープロップとして使用可能
- エラーバウンダリーと組み合わせれば読み込みの失敗時の対応も可能になる
スポンサーリンク
第10章 テスト
タイトルはテストとなっていますが、ユニットテストだけではなくコード解析や整形など品質向上につながるツールに関して説明を行っている章です。
Jest、ESLintやPrettierといったJSで開発していると最近はデファクトなツール群ですが、React用の設定の話も含まれているので参考になりました。
JestによるUnitTestではReactコンポーネントのテスト方法に関してコードと説明があるので、どうやってテストしたらいいのかがイメージが湧きます。
- ESLint
- コードの構文チェックツール
- React Hook用の構文チェックのプラグインもあり
- Prettier
- コードの成形ツール
- ESLintとの併用可能(設定のコンフリクトを解消するためのプラグインが必要)
- ProsTypes
- コンポーネントのプロパティの型の使用方法が正しいかチェックする(要プロパティの型宣言)
- 昔はReactは標準の推奨ツールだったが今は独立してオプション(後述の方法やツールが出てきたため)
- Flow
- ProsTypesと同じく型チェックを行うツール
- ProsTypesより厳密で現在はこちらの方が主流らしい
- Typescript
- JSのスーパーセット。コンパイルしてJSになる。
- Typescript
- JSのスーパーセット。コンパイルしてJSになる。
- Jest
- JSのUnitTestフレームワーク
- Reat Testing Libraryを使用するとアサーション失敗時のエラーメッセージがわかりやすくて原因を見つけやすい
- コンポーネントのテストとしては、コンポーネントを描画して想定されるタグ要素を含むかなどをチェックする
- イベントハンドラの実行によるテストも可能
スポンサーリンク
第11章 ルーティング
SPAにおいて必須となるルーティング機能の説明になります。
パワメータやネストしたURLなど、定番の機能を説明しています。
ここは、必要最低限といった感じで、ナビゲーションガードなどの実際のユースケースで必要な機能などがあまり説明されていないので別途自分で調査が必要です。もう少しここは説明を厚くしても良かったのでは・・・？
第12章 サーバーサイドReact
SPAにはつきもののSSR(サーバーサイドレンダリング)に関して説明している章です。
SSRを実現するためのフレームワークとしてNext.jsやGatsbyといった有名どころに関しても簡単にですが説明があります。