ISBN 9784863543591
基礎から学ぶ React/React Hooks
- 著者
- asakohattori
- 出版社
- シーアンドアール研究所
- 刊行
- 2021-08
概要
JavaScriptの基礎から丁寧に積み上げ、React Hooksを実際のアプリ開発で使えるようにする
想定読者
JavaScriptを少し触ったことがあり、Reactで挫折した経験がある、またはこれからフロントエンド開発に踏み出すWebデザイナー・初級エンジニア
こんな人には向いていない
- すでにReact Hooksを日常的に使っており、実務レベルのアーキテクチャや状態管理設計を学びたい人には内容の深みが不足する
- TypeScriptと組み合わせた型安全なReact開発を主目的とする人には別書が必要
- JavaScriptの基本文法(if文・配列・アロー関数)をすでに習得済みの読者には、前半のJS基礎章の比重が大きすぎる可能性がある
読了後にできるようになること
- Reactが学習困難になる根本原因(JavaScriptへの理解不足)を先に解消する視点を持てる
- useState・useEffect・useRef・useContext等の主要Hooksを一冊で体系的に把握できる
- TODOアプリのゼロから実装を通じ、コンポーネント設計・状態管理の基本を体で覚えられる
- Chakra UIを用いたスタイリング手法を実践レベルで習得できる
- json-serverをモックバックエンドとして使うフロントエンド開発の流れを経験できる
本書のキー概念(章解説)
- 第 1 章 Reactを始めるために必要なJavaScriptの知識 — アロー関数・分割代入・スプレッド構文など、React固有の文脈で迷いやすいJS構文に絞って解説している章
- 第 2 章 Reactの基礎知識 — 仮想DOM・JSX・コンポーネントの概念整理。他書でつまずいた人の再入門として機能する
- 第 3 章 Reactを試してみよう — 環境構築から最初の動作確認まで。ハンズオン中断率が高い工程を丁寧にカバーしている
- 第 4 章 Reactの基本をマスターしよう — Props・State・イベントハンドリング。実務の9割はここで決まる基礎
- 第 5 章 React Hooksを基礎から理解する — useState/useEffect/useRef/useContextを一章で体系化。独立した章構成なので後から参照もしやすい
- 第 6 章 TODOアプリ作成にチャレンジしよう！ — 前章知識の総動員。自力で完成させると理解の定着度が一段上がる
- 第 7 章 Chakra UIでアプリにデザインを組み込む — UIライブラリの導入経験として有用。ただしChakra UI自体のバージョン差に注意
ハイライト
- この本は、Reactのチュートリアルに挫折した人向けに書かれています。最初にJavaScriptについて説明してくれているところがあり、大変わかりやすく、Reactに必要なJavaScriptの知識が網羅されています。(公式チュートリアルで詰まった読者が本書で突破口を開いた体験談。本書の対象読者像が端的に表れている)
- Hooksをまとめて紹介している本は今回が初めてでいままでよくわからなかったUseRefを知ることができた(Hooks全般をひとつの本で網羅している点を評価した実読レビュー。useRefの習得に触れている)
- JSの基本から解説してくださるので、とてもわかりやすくておすすめです！(TODOアプリ作成の参考書として活用したデザイナー系読者からの評価)
外部からの言及
- 複数の記事で、React公式チュートリアルや他書で挫折した後に本書を手に取り、JavaScriptの基礎から丁寧に解説されている点を評価する声が見られる。特に対象読者の的確さ(挫折経験者向け)が言及された事例が複数確認できる(qiita)
- HooksをまとめてカバーしているReact入門書として認識されており、useRefなど他書で軽視されがちなHooksまで扱っている点が実読者の学習ログに記録されている。ただし初読時のコンテンツ順序について戸惑いを示唆するコメントも散見される(qiita)
- Webデザイナー系読者やプログラミングスクール受講者のReact入門書リストに繰り返し登場している。フロントエンドへキャリア転換中の読者層に継続的に参照されている(qiita)
編集メモ
Qiita言及確認7件 / 確認できたいいね合計1,980(うち1,780は本書を学習リスト収録した記事) / 出版2021年8月で直近も複数の入門記事が参考文献として挙げている。該当Topicの定番入門書として一定の定着を確認
読む前に押さえておきたいこと
- HTML/CSSでの静的ページ作成経験(flexboxレイアウト程度)
- JavaScriptでDOM操作やイベントハンドラを書いた経験があると、Chapter 2以降の理解が早まる
- npmコマンドの基本操作とnode.jsのインストール経験
学習のコツ
- JavaScript基礎章(Chapter 1)は「知っている」と感じても飛ばさず一読することを推奨する。ReactのJSX記法やHooksが使うアロー関数・分割代入の書き方は、本書の解説を読んでから後続章に進むと理解の滑らかさが大きく変わる
- Chapter 5(React Hooks)は独立した参照章として使える。TODOアプリ作成中に迷ったら第5章に戻り、Hook単位で動作を確認する読み方が定着を促進する
- Chapter 7のChakra UIはバージョン依存が高い。2024年以降に読む場合は公式ドキュメントと並行参照し、APIの変更点を随時確認しながら進めると詰まりにくい
- 本書を一通り終えた後、TypeScriptなしで作ったTODOアプリをTypeScriptに書き直す演習を追加すると、次の学習ステップへの接続がスムーズになる
出版社による内容紹介
本書では、 ・React/React Hooksの基本の習得 ・React/React Hooksを利用した簡単なアプリの作成ができる をゴールとし、つまずきやすいポイントを確認しながらReact/React Hooksが学べる1冊です。 Reactの学習を進める上でつまずく原因はJavaScriptへの理解不足であることがほとんどではないかと考え、本書の冒頭ではJavaScriptの基礎について多めにページを割いています。 JavaScriptの基礎を固めた上でReact/React Hooksを学んだあとは、TODOアプリの作成に挑戦してみましょう。 また、Chakra UIを使って、Reactアプリのスタイリングも解説しています。 ■対象読者 ・JavaScriptは少し書けるがさらにスキルアップしたい人 ・React/React Hooksを書けるWebデザイナー／フロントエンドエンジニアを目指す人 ・React/React Hooksでアプリの開発を行ってみたい人 ・React公式サイトの内容を、少し難しいと感じた人 ・Reactを一度学習してみたが、挫折してしまった人 ・Reactを始めてみたいけど、どうしたらいいかよくわからない人 ■序文より Reactの始め方を間違えて挫折してしまう人は案外多いのではないでしょうか。 数年前まで、勤務先での私のメイン業務はデザイン兼マークアップ（HTML/CSS/jQuery）でした。 そんな中、担当していたWebサイトのフロントエンドが次々とReact化していく流れとなり、Webデザイナーが担当してきたフロントエンド分野においてもReactスキルへの需要が高まりました。 とにかく早くReactを身に付たい、React力を武器にしたいと考え、張り切って勉強を始めたのですが、最初は難しくてワケがわからず泣きたくなるほどでした。React公式サイトを見ながら懸命に勉強しましたが、なかなか理解が進まず何度も心が折れそうになりました。 散々遠回りしましたが、Reactを学習するためのスタート地点に立つためにはJavaScriptの基本をきちんと習得していることが前提であることに気付き、思い切ってif文から勉強をやり直しました。その結果、Reactが少しずつ理解できるようになり、いつの間にかReactが大好きになった現在に至ります。 Reactの学習を進める上でつまずく原因はJavaScriptへの理解不足であることがほとんどではないかと考え、本書の冒頭ではJavaScriptの基礎について多めにページを割きました。そして悪戦苦闘しながらReactを書けるようになるまでに学んだことやつまずいたポイントについて、できるだけ噛み砕いて丁寧に説明することを心がけました。 CHAPTER 1 Reactを始めるために必要なJavaScriptの知識 CHAPTER 2 Reactの基礎知識 CHAPTER 3 Reactを試してみよう CHAPTER 4 Reactの基本をマスターしよう CHAPTER 5 React Hooksを基礎から理解する CHAPTER 6 TODOアプリ作成にチャレンジしよう！ CHAPTER 7 Chakra UIでアプリにデザインを組み込む
この本がどの学習段階で役立つかは、 関連する ロードマップ から確認できます。