React v17 対応の唯一の最新本
『React.js&Next.js超入門 第2版』を読んだので読書記録＆感想です。
表紙は色合いも水色で似ていますが無印が2019年、2021年に出たこの第2版はタイトル「超入門」の文字の右横に黄色で第2版と示してあります。古いほうを買わないようご注意ください。(自分は以前Kindleのセール中に間違って買っちゃいました…ｗ)
- React v17 対応の唯一の最新本
- Chapter 1 Reactを準備しよう！
- Chapter 2 JSXをマスターしよう！
- Chapter 3 コンポーネントをマスターしよう！
- Chapter 4 フックで状態管理しよう！
- Chapter 5 Next.jsでReactをパワーアップ！
- Chapter 6 FirebaseでReactをパワーアップ！
- まとめ：初心者目線でReactに入門できる最新の本
Chapter 1 Reactを準備しよう！
1-1 Reactを動かそう！
- 最初は基本の基本、フロントエンドとはなんぞやとかのお話。「フレームワークはシステムそのものを持っている」といった表現がちょっと引っかかったりするのですが(笑)、噛み砕いてあくまで初心者向けに、感嘆符おおめに説明していきます。
- 開発支援ツールは
VSCodeやBrackets,Atomあたりから向いたものを使おうとなっています。 - 新しい本なので2020年11月リリースのReact v17対応、このへんはありがたいですね。
- 最初は本当に簡単に、HTMLにscriptタグで
react.development.js,react-dom.development.jsを読み込んで、ボディ部の<script>タグ内でReactを書いていくという非常に原始的なところから始まります。挫折した方はこのへんからしっかり見直していくのもよいのではないでしょうか。
1-2 プロジェクト開発をしよう
Node.jsやnpm、Create React Appの話など。- コマンドの説明で
npxのことをパッケージ管理ツールの一種でnpmがより便利になったもの…と描写しているのがちょい気になりました。npmの5.2.0以降の新しいバージョンに同梱されているコマンドで、ローカルをインストールで汚さずに各種パッケージを実行できるものですから、npmとまた別のものだみたいな説明はちょっと違いますね。 Developer Toolの使い方も説明してあるのがありがたい。npmからインストールするスタンドアローン版もあるんですね。
1-3 Visual Studio Codeを用意しよう
- 結局
VSCode一択ということで、初心者向けに詳しく導入方法を解説しています。
Chapter 2 JSXをマスターしよう！
2-1 Reactの基本を復習しよう
- HTMLのボディ部の
<script>タグ内のJSコードで、React.createElementメソッドでタグの中に値を当てはめていく…というめっさ基本から、JSXの基本を学んでいきます。
2-2 Bootstrapでデザインしよう
Bootstrap 4.5(今の最新は5.0.1) の一番基本部分を使って、Reactが作っている画面の各要素に色をあてていきます。
2-3 JSXを使おう！
- そろそろNode.jsのビルドシステムを入れて普通のReactになるのかな…と思いきや、相変わらず本体はHTMLファイルの中で、読み込むファイルに
react.development.js,react-dom.development.jsのほかにbabel.min.jsも追加。 - なんとこれで
<script type="text/babel">～</script>で囲ったJSコード中にJavaScript式としてもうJSXが書けるんですね。実際の仕事レベルではまず使わないでしょうが、本当の初心者の方にはこういう基本の基本からやった方が理解しやすいのかもしれません。 - 属性を埋め込んだりCSSスタイルを埋め込んだり、基本のところを一通り。
2-4 JSXの構文的な使い方
- JavaScript式なので使える
&&の比較演算子や二項演算子で表示を切り替える方法、配列やmapなど。 - 無名関数というキーワードは使わずに、その場限りの関数はこう書くと便利だよ、という体でアロー関数も登場します。
2-5 表示の更新とイベント
- おなじみクリックでカウンタが上がるアプリを例に、クリックイベントの記述方法など。
- ここまで120ページぐらい。初心者の方はゆっくりしっかり進めばよいですし、すでにReactを少しでも知っている方はパラ読みで飛ばしても大丈夫でしょう。
Chapter 3 コンポーネントをマスターしよう！
3-1 コンポーネントを作ろう
- ようやくReactらしくなってきてコンポーネントが出てきます。一番最初はシンプルに、戻り値でJSXを返すだけの関数コンポーネントからスタート。まずは関数コンポーネントが基本だと述べています。
- しかし本格的に使うにはクラスコンポーネントだ...ということで、途中からサンプルコードもクラスコンポーネントになります。
3-2 プロジェクトでコンポーネント開発！
- ここで
Create React Appで作ったプロジェクトフォルダに移り本格的に。public/index.htmlやindex.js、App.jsなどの中身も詳しく解説してくれているのがありがたいですね。 - CSSを使って丸や三角を書くようなコンポーネントを使って解説が続きます。
3-3 ステートを使いこなそう
- 肝のひとつであるステート回り。ここではまだサンプルはクラスコンポーネントなので、コンストラクタ関数で
this.state=で定義、コード中でthis.setState()する従来通りのやり方です。
3-4 コンポーネントの様々な機能
- コンポーネントの親子関係、自前で用意したチェック用の関数を使ってバリデーションを行う例など。
- そしてすべてのコンポーネントで便利に使えるよう、共通の値を持たせるには？という節で、
createContextした値を変数で持つ方法が登場。値を変えたいときはJSXで<XxxContext.Provicer value={}>で囲って配下のコンポーネントで使える方法も紹介しています。 - ここまではReact 16.8から導入された
React Hooksのキーワードは影も形もありません。Contextだけ紹介しているので中途半端だな…と思ったら、次の4章がまるごとHooksなんですね。
章末でも大事な要点を振り返り、他は後回しでOK！と気軽に述べながら、今はReactの関数コンポーネントでもステートが使えるようになったので…とようやく今っぽいReactになっていきます。初心者をターゲットにした説明の順序だての都合上、こういう構成をとっていたのですね。
Chapter 4 フックで状態管理しよう！
4-1 フックを使ってみよう
- 本の半分200ページぐらいにきて
React Hooksが登場します。 - 本格的なクラスコンポーネントは難しい→関数コンポーネントに戻ろう→Hooksがあればステートを持てるし、関数ごとにコンポーネントの機能を切り分けられるよ、という説明の仕方をしていますね。
(別にクラスコンポーネントでも処理の切り分けはできるのでちょっと違う感じもありますが…Hooksをうまく使えば分割がきれいにいくよ、ということでしょうか。) - 最初は簡単なメッセージ表示やカウンタアップで
useStateを説明し、関数コンポーネントでは持っておきたい変数は全部ステートで…と進んでいきます。
4-2 関数コンポーネントを使いこなす
- 関数コンポーネント同士も親子関係にして、
propsで値を渡したりuseStateを介して親→子/子→親へも動的な値も渡せるよという説明。 - 別にクラスコンポーネントも親子関係にできるし、クラスコンポーネントなら必ず巨大化して複雑怪奇になってしまうのかというとそれも違うと思いますが、このへんは初心者向けの説明なので端折っているのでしょう。
- フォームについてもsubmitで送信する処理を
event.preventDefault()で打ち消し、画面要素の値をすべてuseStateでJSON形式でまとめて保存するやり方が解説されています。
4-3 副作用フックの利用
- ステート更新時に処理を実行するという触れ込みで副作用フックの
useEffect。 - 第2引数なしの
useEffectを複数使い、そのうちひとつがuseStateでJSXをレンダリングして無限ループの例を見せてから、第二引数にはステートの配列を渡すとよいよ、という説明の仕方をしています。
4-4 独自フックを作ろう
- 中にuseStateで変数とset関数、処理を行う関数、そして戻り値は配列でステートと処理を行う関数の2つを返す
useCounter()という独自フックを作成。呼び出し側からはconst [counter, plus] = useCounter();という形ですっきり呼べるやり方。 - 応用編として呼び出し時に引数で処理を行う関数も一緒に渡す形式で、
useTax()やuseCalc()という独自フックの例。確かにこのへんを実際に動かして試していくと、処理の綺麗な切り出し方が学べると思います。
4-5 ステートフックの永続化
- モダンJSのLocal Storageを使ってデータをJSON形式で保存する独自フック
usePersist()を別に実装、ユーザー情報フォームからこれを呼び出して利用する方法。 - このusePersist関数のサンプルコードの中、
setValueのほかにsetSavedValueという別関数の定義が抜けているような…？
4-6 簡易メモを作る！
- 高度なReact使いの人ならメモと聞いて
React HooksのuseMemoか！？と思わせてここでは本物のメモアプリ。前節のusePersist()フックを活用して、画面からメモを複数個保存、検索と削除までできるReactアプリをコンポーネントをきちんと分割して作っていきます。なかなか本格的です。
４章はReact Hooks自体の概念などの説明はあまりなく、比較的初心者目線からのよく使いそうな順での解説となっています。まあまず使ってみて慣れたら公式参照という流れなのでしょうか。せっかく実装した独自フック usePersist も、中身は理解しなくていいよ！続きの Next.js に行こう！となっていて、えっそれは勿体ないのでは……とちょっと思いました。
Chapter 5 Next.jsでReactをパワーアップ！
5-1 Next.jsを使おう
- React本体に各種ライブラリを統合してパッケージ化したもの…という形でNext.jsの章。
- コマンドで
npx create-next-appして作っていく方法 - プロジェクト構成も説明があるのですが、ディレクトリ構成図があるともっとありがたいですね。
{app_name}/pages/index.jsなどにJSXを返す関数コンポーネントを作っていく。- CSSもJS変数で書いて
style={subTitle}のようにしてJSXに適用するやり方。 - Next.js だと最初から入っているライブラリ
styled-jsxを使って、JSX内に<style jsx> .. </style>の中に直接CSSを書くやり方。 {app_name}/pages/Home.modules.cssのようにCSSを置くやり方もある。- ふつうのReactコンポーネントなのでヘッダやフッタも別出ししたりできる。
5-2 複数ファイルを活用しよう
- 主にSPA用途を考えているReactと違い、Next.jsは
pages/にファイルを複数置くとそのまま複数ページになる。 - ページ間のリンクは
<Link href="./hoge"> {好きな要素} </Link> {app_name}/public/に置いた画像へのパスは./public/{画像名}.jpgでなく./{画像名}.jpg
5-3 外部データを利用しよう
{app_name}/public/data.jsonを置くと、URLで http://localhost:3000/data.json でそのままGETできる。- JavaScriptの
fetch関数を使ってこのJSONを取得、一覧テーブルに表示する例。 npm install swrすると、SWRというライブラリが使える。
const{aaa, bbb} = useSWR('/data.txt', func);のようにするとuseState感覚でサーバーから返ってきたJSONやテキストを使える。第2引数はデータの中身を解析する関数が必要な場合。{app_name}/pages/api/があるので中にhello.jsを作って関数を書くと、http://localhost:3000/api/hello で動くWeb APIが簡単に作れる。{app_name}/pages/api/にhello/[id].jsを作って関数を書くと、http://localhost:3000/api/hello/1 のようにRestfulにID指定で動くWeb APIも作れる。{app_name}/pages/api/にhello/[...params].jsを作って関数を書くと、http://localhost:3000/api/hello/1/hogehoge のようにアクセスした時のパスも配列で取れる。
5-4 プログラマブル電卓を作ろう
- ブラウザ上のテキストボックスとボタンだけで、計算ができる電卓をNext.jsアプリとして作っていく例。
- コンポーネントも複数あって本格的です。でもこれはNext.jsでなくReactオンリーで作っても大体同じなのでは…？と思ったり。
Next.js はよくネット上にも解説記事などありますが、React関係でよく使いそうなもの全部乗せで便利そうだなと思いました。本書は初心者向けなので、あまり深堀りはせずにこんな技術もあるよ、と体感させるぐらいの深度になっていますね。
Chapter 6 FirebaseでReactをパワーアップ！
6-1 Firebaseでデータベース！
- 最終章はフロントエンドはReact、サーバーサイド(バックエンド)はすべてサーバーレスでデータの置き場を全部担当してくれるBaaS…ということで、
Firebaseへ。 - プロジェクト作成の手順なども初心者向けに、スクショ多めに解説しています。
6-2 Firestoreデータベースを使おう
Cloud FirestoreとRealtime Databaseが選べるが今はFirestoreということで、試しにコレクション(≒RDBのテーブル)を作って中にデータを作っていく例。- 簡単なセキュリティルール作成の例も載っています。
6-3 JavaScriptからFirestoreを利用する
npm install firebaseして、JSコード内でFirebaseにアクセスしていく方法。- 別ファイル外出しで以下のような固定コードを書いて、あとはこの変数firebase経由でアクセスしていきます。
import firebase from 'firebase'; const firebaseConfig = {各種設定}; if (firebase.apps.length == 0) { firebase.initializeApp(firebaseConfig); }
- 本書はReact Hooks準拠なので
useEffect()の中で初期表示時だけFirebaseにアクセスしています。これを忘れて関数コンポーネント内に普通に書くと、ステート更新時にリロードが走るたびにFirebaseに繋ぎに行ってすぐ1日の無料枠を使い切ってしまうとのこと。こういうところは怖いですね… - 検索、更新、削除まで一通りサンプルコード含め解説しています。
6-4 Authでユーザー認証しよう
const auth = firebase.auth(); const provider = new firebase.auth.GoogleAuthProvider(); useEffect(() => { auth.signInWithPopup(provider).then((result) => { // ログイン後の処理 }); }, []);
- Firebase側のセキュリティルールで、
request.authが存在する場合のみアクセス可能に書き換える。
6-5 メッセージが送れるアドレスブック
- Firebaseに存在するアドレス帳のカタログを検索して1件つづ表示、メモを書いたりできる画面遷移ありの本格的な
Next.jsアプリを作っていきます。 - ここではJSコード内で画面遷移があるので
next/routerを使っていますね。 - 初期表示時に呼ばれる
index.js先頭でログアウト処理がありますが、Nuxt.jsアプリでは遷移はコンポーネント切り替えなので画面全体がリロードされるわけではないので、毎回ログアウトはされない…と注釈があります。このへんサーバーサイドのフレームワークと感覚を変えないといけないですね。 - このアプリはなかなか本格的で詳しい解説が必要そうなのですが、ページ数が尽きたのか解説が意外と短めに終わっています。
Reactの超入門本なのでだいたい分かった気持ちを持ってもらい、この先が本番。まずは復習して、サンプル改造、オリジナルアプリを作ったりして前進していってほしい…となっています。
Addendum JavaScript超入門！
- JavaScript自体の簡単なサマリ。まあこのへんは深く必要なら他の本なり情報源を当たることになるでしょう。
まとめ：初心者目線でReactに入門できる最新の本
460Pぐらいある本ですが、超入門シリーズなのでターゲットはやはり初心者、初心者目線でReactの基礎部分を触っていく本でした。今までの本では難しくて挫折してしまうような方でもゆっくりじっくり学んでいけると思います。
2019年に出た本の第2版で2021/2月に刊行。2020年10月リリースのReact v17対応なので関数コンポーネント、React Hooksに対応しているのも嬉しいですね。日本で手に入る商業React本の中では現状この本が最新です。
一方仕事で使うレベルの方、すでにReactがある程度わかる方にとっては……解説を初心者向けに端折ったり表現を砕いている部分もあるので、多少物足りないかと思います。他の情報源と合わせてパラ読みしていく感じでしょうか。1冊の本の中にNuxt.jsとFirebaseの章があるのもお得ですが、ざっと体感してみる感じまでに留まっています。まあこのへんはそもそも読者ターゲットが違うのでしょうがないですね。
掌田津耶乃さんの本はご本人なのか編集者の仕事なのか、誤植が多いことで割と有名になってしまっています。本書は日本語の文章ではそんなには間違いは目立たなかったような気がします。第4章で「フィールド」が「フィール江戸」になってるところがあって、舶来の顔本発の技なのにお江戸の心意気が必要たぁ、こいつは粋だぜ…！とちょっとツボに入りました(笑)。サンプルコードはアロー関数 => 左右のスペースがあったりなかったりするのが気になりました。
