React でアプリケーションを作りたい！現場で React を使うことになったけど何から勉強すればいいかわからない、という人のために、一から React を学習するための手順を紹介します。
モダンな JavaScript を学び、React の仕組みを学び、実際に手を動かしながら技術を身につけることができるような順番になっているので安心してください。
基礎から学ぶ React/React Hooks から始める
React を始める方は、プログラミング未経験だろうと経験者だろうと、『基礎から学ぶ React/React Hooks』から始めるのが良いです。
2021年10月時点で最もわかりやすい React の本だからです。
他の React 本を読んで意味不明だった方が読めば、目が覚めるような想いをすることでしょう。
目次を見てもわかるように、JavaScript の基礎から解説して、React を試しに動かし、それから React Hooks の使い方まで解説されています。
ちなみに2021年時点で React Hooks を使わない開発はありえないため、目次に「Hooks」がない書籍は全て除外してOKです。
『基礎から学ぶ React/React Hooks』で学べること
- Reactを始めるために必要なJavaScriptの知識
- Reactの基礎知識
- Reactを試してみよう
- Reactの基本をマスターしよう
- React Hooksを基礎から理解する
- TODOアプリ作成にチャレンジしよう
- Chakra UIでアプリにデザインを組み込む
『基礎から学ぶ React/React Hooks』は読むだけでなく、必ず写経するようにしましょう。
写経とは、本を読みながら実際に手を動かしてプログラムを書くことです。
動かすことで身につくのです。
基礎から学ぶ React/React HooksをAmazonで購入する
Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
『Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス 』は網羅性が高い本です。
『基礎から学ぶ React/React Hooks』が終わった後にやりましょう。
React の開発に必要な知識を幅広く紹介してくれています。
オライリーの本の特徴でもありますが、写経には向いていません。
ハンズオン形式でできるようになっていないのです。
オライリーの技術書の書き方は個人的には嫌いですが、『基礎から学ぶ React/React Hooks』を読んで基礎を固めた後で読むのは『Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス』しか選択肢がありません。
ここまで読めば、初級レベルの知識は網羅できたといえます。
あとは検索しながら開発を進められるからです。
関数型の書き方をしつこく説明してくれているのがポイント高いです。
プログラミングがうまくなるために必要なステップです。
目次は以下です。
1章 Reactの世界へようこそ
1.1 本書のねらい
1.2 Reactの過去と未来
1.2.1 第2版の変更点
1.3 環境の構築
1.3.1 GitHubリポジトリ
1.3.2 React Developer Tools
1.3.3 Node.jsのインストール
2章 React学習に必要なJavaScriptの知識
2.1 変数の定義
2.1.1 constキーワード
2.1.2 letキーワード
2.1.3 テンプレート文字列
2.2 関数の作成
2.2.1 関数宣言
2.2.2 関数式
2.2.3 デフォルト引数
2.2.4 アロー関数
2.3 JavaScriptのコンパイル
2.4 オブジェクトと配列
2.4.1 デストラクチャリング
2.4.2 配列のデストラクチャリング
2.4.3 オブジェクトリテラルの改善
2.4.4 スプレッド構文
2.5 JavaScriptと非同期処理
2.5.1 Promiseとfetch
2.5.2 async/await
2.5.3 Promiseの生成
2.6 クラス宣言
2.7 ECMAScriptモジュール
2.7.1 CommonJSモジュール
3章 JavaScriptにおける関数型プログラミング
3.1 関数型とは？
3.2 命令型vs.宣言型
3.3 関数型プログラミングの基本概念
3.3.1 イミュータブルなデータ
3.3.2 純粋関数
3.3.3 データの変換
3.3.4 高階関数
3.3.5 再帰
3.3.6 関数の合成
3.3.7 アプリケーションの構築
4章 Reactの基本
4.1 使用するライブラリ
4.2 React要素
4.2.1 ReactDOMで要素をブラウザに描画する
4.2.2 子要素
4.2.3 配列から子要素を生成する
4.3 Reactコンポーネント
4.3.1 Reactコンポーネントの歴史
5章 ReactとJSX
5.1 JSXを使ってReact要素を記述する
5.1.1 JSXとHTMLの違い
5.1.2 BabelによるJSXの変換
5.2 レシピのコンポーネントをJSXで記述する
5.2.1 Reactフラグメント
5.3 webpackを使ってビルド環境を構築する
5.3.1 プロジェクトの作成
5.3.2 バンドルファイルのロード
5.3.3 ソースマップ
5.3.4 Create React App
6章 ステート管理
6.1 StarRatingコンポーネント
6.1.1 useStateフックを使ってクリックイベントに対応する
6.1.2 再利用性を考慮したリファクタリング
6.2 アプリケーション全体のステート管理
6.2.1 ステート値をコンポーネントツリーの上から下に伝える
6.2.2 ユーザーの操作をコンポーネントツリーの下から上に伝える
6.3 フォーム入力を処理するアプリケーション
6.3.1 refを使ったデータアクセス
6.3.2 制御されたコンポーネント
6.3.3 カスタムフック
6.3.4 入力をステート値に反映させる
6.4 Reactコンテキスト
6.4.1 コンテキスト経由でデータを公開する
6.4.2 useContextフックからデータを取得する
6.4.3 コンテキストとステートの併用
6.4.4 コンテキストとカスタムフックの併用
7章 フック
7.1 useEffect
7.1.1 依存配列
7.1.2 依存配列の同一性チェック
7.2 useLayoutEffect
7.2.1 フックの使い方に関するルール
7.3 useReducer
7.3.1 useReducerを使った複雑なステート管理
7.4 コンポーネントのパフォーマンス改善
7.4.1 いつパフォーマンスチューニングを行うか
8章 データ
8.1 データの受信
8.2 データの送信
8.2.1 fetchを使ったファイルアップロード
8.2.2 リクエストの認証
8.3 データの保存
8.4 非同期リクエストの状態管理
8.4.1 レンダープロップ
8.4.2 仮想リスト
8.4.3 useFetchフック
8.4.4 Fetchコンポーネント
8.5 複数のリクエスト
8.5.1 関数のメモ化
8.5.2 ウォーターフォールリクエスト
8.5.3 並列リクエスト
8.6 GraphQL
8.6.1 GraphQL API
8.6.2 JavaScriptでGraphQLを利用する
9章 サスペンス
9.1 エラーバウンダリ
9.2 コードスプリッティング
9.3 Suspenseコンポーネント
9.3.1 サスペンスの応用
9.3.2 Promiseをthrowする
9.3.3 サスペンスデータソース
9.4 Fiber
10章 テスト
10.1 ESLint
10.1.1 ESLintプラグイン
10.2 Prettier
10.2.1 Prettierを設定する
10.2.2 VSCodeでPrettierを使用する
10.3 型チェック
10.3.1 PropTypes
10.3.2 Flow
10.3.3 TypeScript
10.4 テスト駆動開発（TDD）
10.4.1 TDDへの移行
10.5 Jest
10.5.1 テスト環境の構築
10.6 Reactコンポーネントのテスト
10.6.1 React Testing Library
10.6.2 要素の検索
10.6.3 イベントのテスト
10.6.4 コードカバレッジ
11章 ルーティング
11.1 React Routerの導入
11.2 React Routerプロパティ
11.3 ネストしたルート
11.4 リダイレクト
11.5 ルーティングパラメータ
11.6 ナビゲーション関数
12章 サーバーサイドReact
12.1 アイソモーフィックとユニバーサル
12.1.1 クライアントとサーバーの環境差分
12.2 Reactにおけるサーバーサイドレンダリング
12.3 Next.js
12.4 Gatsby
12.5 Reactの未来
付録A 開発環境の構築
A.1 npm
A.2 ESLint
A.3 Prettier
A.4 Jest
A.5 webpack
A.6 Babel
A.7 まとめ
→Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティスをAmazonで購入する
『Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス』が終わったら、次は以下の2つのウェブ上のチュートリアルをやります。
ここまで来たらネット上のチュートリアルも迷うことなく理解できるようになっているはずです。
基礎を書籍で固めておいて、あとはウェブのチュートリアルをやりましょう。
チュートリアルをやりながら、企画も考えます。
ハンズオン Node.js でサーバーサイドを構築できるようになる
Reactでクライアントサイドのコードが書けるようになれば、ブログなどを作って公開することができます。
ですが、複雑なことをやろうとすると、サーバー側の実装も欲しくなるでしょう。
そこで『ハンズオン Node.js』です。
サーバー側の実装を Node.js で行い、クライアント側は React で作りましょう。
サーバーとクライアントの実装を両方 JavaScript で行うことで、学習コストを激減させることができます。
React を学んだ後にわざわざ Ruby の入門書（チェリー本）を読み、そこから Ruby on Rails を勉強して、サーバーを構築するとなると、Reactの勉強に加えて3ヶ月以上の時間がかかります。
時間のムダとはいいませんが、非効率です。
特に Ruby は将来性が怪しいので、今から時間をかけて学ぶ価値はないと私は思っています。
サーバーもクライアントも JavaScript で書くことで、ダラダラといろんな技術に手を出すフルスタックエンジニアに比べて技術的な習熟は非常に早くなります。
「なんでも中途半端にやる」よりも「JavaScript だけをとにかくマスターする」のが一番です。
余計な技術に手を出さず、色々とやりたくなる欲求を抑え、JavaScriptだけに集中しましょう。
ちなみにここまで来たら、次は TypeScript を勉強するのがいいです。
2021年時点では、日本語でまともに TypeScriptを学べるのは『プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発』だけです。
間違っても「掌田津耶乃」のような、ひどい出来の技術書ばかりを乱発する人の書籍は買わないように気をつけてください。
お金があるかないかで人生の楽しさは全く変わってきます。
お金があっても幸せになれるとは限りませんが、お金がない人生は不幸です。
お金がなかった私が、転職して年収1000万を超えるまでにお世話になったブログを紹介します。
エンジニア転職のリアル
今の時代は、お金を稼げるかどうかは能力の有無よりも触れた情報の質によるものが大きいです。
ぜひ皆さんも良質な情報に触れて、お金持ちになって人生を充実させてください。
