基礎から学ぶ React/React Hooks(キソカラマナブリアクトリアクトフック)

本書では、

・ 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 でアプリにデザインを組み込む

React の学習でつまずく原因の多くは React そのものではなく JavaScript の理解不足にある。この見立てを設計の軸に据えたのが、 2021 年 8 月にシーアンドアール研究所から発売された asakohattori 氏の『基礎から学ぶ React/React Hooks 』です。副題に「実践入門」とある通り、 React と React Hooks の基本を習得し、簡単なアプリを自作できるようになることをゴールに置き、つまずきやすいポイントを確認しながら進む構成を版元が明示しています。

JavaScript の基礎固めから始める理由

この本の最大の特徴は、 React の本なのに冒頭で JavaScript の基礎 に多めのページを割いている点です。 React のコードはアロー関数、分割代入、スプレッド構文、 map などの配列メソッドといった ES2015 以降の記法を前提として書かれるため、この層があいまいなまま公式チュートリアルに進むと、 React の概念でなく JavaScript の構文で止まってしまいます。公式サイトの内容を少し難しいと感じた人や、一度 React に挑んで挫折した人を対象読者に含めているのは、まさにこの詰まり方を想定しているためです。

React Hooks とは何かという技術背景

技術背景を補うと、 React Hooks は 2019 年 2 月の React 16.8 で導入された仕組みで、 useState や useEffect といった関数を通じて、関数コンポーネントのまま状態管理や副作用の処理を書けるようにするものです。 Hooks の登場以降、 React の標準的な書き方は関数コンポーネント中心へ移り、書名に React と React Hooks が並記されているのは、この Hooks 前提の書き方を最初から学ぶ本であることを示しています。コンポーネント分割と宣言的な UI 記述という React の考え方は、フレームワークの流行が移っても通用する土台です。

TODO アプリと Chakra UI までの実践構成

JavaScript の基礎を固めた後は、 React と Hooks の学習を経て TODO アプリの作成に取り組み、さらに Chakra UI を使った React アプリのスタイリングまで扱います。文法の学習で終わらず、部品を組み合わせて動くアプリに仕上げる経験と、見た目を整える工程までを 1 冊の射程に収めた実践寄りの構成です。

刊行時期の注意と向いている読者

読む際は刊行時期を押さえておく必要があります。 2021 年発売の本書は、 2022 年 3 月にリリースされた React 18 より前の React を前提としており、並行レンダリングや Server Components といった React 18 以降の話題、 Next.js などのメタフレームワークは射程外です。また UI ライブラリはバージョンの進みが速いため、 Chakra UI の章を手元で再現する場合は刊行当時のバージョン系列との差異を確認しながら進むことになります。それでもコンポーネント、 props 、状態、副作用という中核概念は 2026 年時点の React でも変わらない基礎であり、入門段階で学ぶ内容の大半は現行環境へそのまま持ち越せます。

JavaScript は少し書けるがフロントエンドの実装力を伸ばしたい人、 React を仕事にしたい Web デザイナーやフロントエンドエンジニア志望の人、公式ドキュメント で挫折した経験のある人には、基礎の穴 を埋めながら完走できる再入門の 1 冊として機能します。逆に、 React 18 以降の新機能や大規模アプリの状態管理設計を知りたい中級者には物足りず、 JavaScript を全く書いたことがない段階の人には前提が 1 歩早い本です。動くアプリを自分の手で作り切る経験を最初の成功体験にしたい学習者にとって、遠回りに見える JavaScript の基礎固めから伴走してくれる構成は確実な投資になります。