この記事では React の勉強を始めたい方が迷わないように、おすすめの勉強法と技術書を紹介します。
React を理解するためには、 JavaScript の理解は欠かせません。
そのため、モダンな JavaScript を学んでから React を勉強する、という順番で勉強を勧めるのが良いです。
基礎から学ぶ React/React Hooks
『基礎から学ぶ React/React Hooks』は React 初学者の決定版です。
以下の目次を見てもわかるように、JavaScript の基礎から解説して、React を試しに動かし、それから React Hooks の使い方まで解説されています。
2021年時点で Hooks を使わないのはありえないため、目次に「Hooks」がない書籍は全て除外してOKです。
まず【基礎から学ぶ React/React Hooks】から React に入門するのが一番です。
【CHAPTER 1】Reactを始めるために必要なJavaScriptの知識
01 JavaScriptの基礎から始める
02 変数と宣言
03 命名規則
04 データ型
05 演算子
06 関数と宣言
07 引数
08 条件分岐とループ
09 配列
10 オブジェクト
11 モジュール [ES2015]
12 非同期処理
【CHAPTER 2】Reactの基礎知識
13 Reactとは
14 Reactの特徴
15 Reactの用語について
【CHAPTER 3】 Reactを試してみよう
16 今すぐReactを試してみる
17 HTMLファイルでReactを試してみる
18 CodeSandboxでReactを試してみる
19 Create React Appについて
20 Reactの開発を補助するツール
【CHAPTER 4】Reactの基本をマスターしよう
21 条件分岐で要素を出し分けよう
22 繰り返し処理を書いてみよう
23 イベント処理
24 フォームを動かしてみよう
【CHAPTER 5】React Hooksを基礎から理解する
25 React Hooksって何？
26 useState
27 useEffect
28 useCallbackとReact.memo、useMemo
29 useRef
30 useContext
31 カスタムフック
【CHAPTER 6】TODOアプリ作成にチャレンジしよう
32 Create React AppでReact開発環境を準備する
33 TODOアプリの実装準備をしよう
34 TODOアプリを実装しよう
【CHAPTER 7】 Chakra UIでアプリにデザインを組み込む
35 Chakra UIって何？
36 Chakra UIでTODOアプリにデザインを組み込もう
37 Chakra UIのコンポーネントを利用しよう
『基礎から学ぶ React/React Hooks』は読むだけでなく、実際に触って動かしてみるのが良いでしょう。
ここで手を動かしていくことで、React の勘所が掴めてきます。
→基礎から学ぶ React/React HooksをAmazonで購入する
Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
『基礎から学ぶ React/React Hooks』が終わったら、日本語で読める React の書籍の選択肢はもう残りは1つしかありません。
『Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス』を読みましょう。
React Router など、『基礎から学ぶ React/React Hooks』よりも少し踏み込んだ内容を紹介してくれます。
Babel や Webpack、ESLintや Prettier まで触れてくれているのが親切です。
現場では ESLint や Prettier は使わない手はないですし、TypeScriptの触りが紹介されているのもGoodです。
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 のだいたいの動きはわかります。
また、チュートリアルを読みながら、自分が作ってみたいものを実装してみるもの良いでしょう。
Next.js のチュートリアル や Gatsby.jsのチュートリアルをやってみて、実際にブログサイトを作ってデプロイしてみましょう。
プログラミングは最初の基礎は本を読んで学んで、あとは作りたいものを調べながら作っていくのが一番です。
Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL
個人開発などでアプリケーションを作りたくなったら、React でフロントエンドを作るだけでなく、サーバー側での処理も実装しなければいけません。
今なら Firebase などでサーバレスアーキテクチャを採用したい、という人も多いかもしれませんが、Firebase はチュートリアルがクソ過ぎて、個人が使うのに向いてません。
「使わせよう」「理解させよう」という気概を全く感じない、近年稀に見るクソドキュメントの集合体が Firebase です。
こんなわかりづらいものに時間を無駄にしている暇はありません。
Firebase に比べて、AWS はネットに情報がたくさん転がっているので問題を解決しやすいです。
さて、Firebase の悪口はこの辺にして、認証機構などを自分で作りたいときは、『Full-Stack React, TypeScript, and Node: Build cloud-ready web applications using React 17 with Hooks and GraphQL』という本が参考になります。
この本のレベルまで理解しておけば、現場で即戦力になれます。
あとは場数を踏むだけです。
場数とはつまり、個人開発です。ひたすら作りたいものを作りまくりましょう。
ここまでやれば、あとは自分でひたすら作りまくるだけです。
逆に勉強ばかりしても肝心のプロダクトは作れるようにはなりません。
基礎知識を本やチュートリアルで学んでおいて、基礎知識をとっかかりにして、ネットで色々と検索しながらモノを作りまくるのが、プログラミング上達のコツです。
とにかくたくさん作りまくりましょう。
お金持ちになりたいすべての人にとって、有用な情報が載っているブログを見つけたので紹介します。
エンジニア転職のリアル
私はこのブログを全部読んで、人生変わりました。
この記事を読んでくれた方にもぜひおすすめしたいです。
