はじめに
React の解説本である『モダンJavaScriptの基本から始める React実践の教科書』を読んでみました。
2019年12月に React で開発した個人サービスをリリースしたのですが、大分時間が経って忘れてしまったので、振り返りも兼ねて読んでみました。
感想をまとめると、React 初心者にとってとてもよい内容になっています。
よかったところ
段階を踏んで解説がされている
React の学習では、JavaScript の記法が ES2015(ES6) から大幅に変わっているために、JavaScript が分からずつまづいてしまいます。
例えば、以下のような内容です。
- 変数宣言(const, let)
- テンプレート文字列
- アロー関数
- 分割代入
- スプレッド構文(...)
- オブジェクトの省略記法
- map, filter
ここがパッと分からないと React を学習しようとしても理解できなくなってしまいます。
JavaScript の基本を学んでから React の基本を学ぶ流れになっていて、無理なく学ぶことができます。
Hooks について詳しく解説されている
useState, useEffect について分かりやすく解説されています。
再レンダリングについての仕組みについても解説されています。
再レンダリングは、State または Props が変更されたコンポーネントと、その配下の全てのコンポーネントが対象になります。
この場合、再レンダリングしたくないコンポーネントまで対象になってしまうため、再レンダリングさせないためにメモ化という方法を行います。
| 用途 | |
|---|---|
| React.memo | コンポーネントをメモ化 |
| React.useCallback | 関数をメモ化 |
| React.useMemo | 変数をメモ化 |
また、ロジックを共有化するための「カスタムフック」についての解説もあります。
export についての解説あり
以前、React を学んだ時は、export についてなんとなくしか理解できていませんでしたが、export と export default では大分用法が異なり、基本は export を利用するとのことです。
export の記法
・export 側
export const SomeComponent = () => {};
・import 側
import { SomeComponent } from "./SomeComponent";
export はファイルに複数記述できます。
import 側ではコンポーネント名に {} をつける必要があり、コンポーネント名を変えることはできません。
export default の記法
・export 側
const SomeComponent = () => {};
export default SomeComponent;
・import 側
import SomeComponent from "./SomeComponent";
export はファイルに１つしか記述できません。
import 側ではコンポーネント名に {} をつける必要はなく、コンポーネント名を SC などに変えることもできます。
CSS の手法が複数解説されている
React で CSS を適用するための手法が複数解説されています。
人気があるのは、 styled component と Emotion のようですね。
TypeScript の解説がある
簡単ではありますが、TypeScript の解説もあります。
架空の物語ではありますが、React のプロジェクトでは TypeScript の採用率は 100% となっていましたね。
足りなかったところ
パッケージマネージャーについて解説が欲しかった
npm と yarn が紹介されていましたが、どちらを使うべきなのか、どのような使い分けをするのかの解説がありませんでした。
どちらを採用してもよいということなのかもしれませんが、判断基準が欲しかったです。
初心者または複数人開発だと npm がよいようですね。
こちらについては、以下の記事がよかったです。
用語の解説が不足している部分がある
useEffect の解説で、「useEffect はコンポーネントの副作用を制御する機能です」となっていて、「副作用」とは何かについての解説がありませんでした。
どうも、「副作用」とはレンダリングに関係のない処理のことを指しているようです。
詳しくは以下の記事を参照してください。
開発プロジェクトですぐに使える設定がない
ESLint や Prettier の設定が載っていないのは残念でした。
多分、すぐに陳腐化するためだとは思うのですが、インデックスだけでも載っているとよかったです。
おわりに
この書籍を読んだ感想をつらつらと書いてきましたが、初心者が React を学ぶにはとてもよい内容だと思います。
React を一般の書籍で段階を踏んで学べるようになったのは素晴らしいですね。
2019年の段階では、『りあクト！』という同人誌でしか基本から書籍で学べませんでしたからね。
なお、『りあクト！』自体は素晴らしい内容でした。
『りあクト！』は技術書典のサイトや、BOOTH で購入可能です。 techbookfest.org
