const hoge = 'sumisonic'
console.log(hoge)sumisonic
【第一部 目次】
第1章 こんにちは React
1-1. 基本環境の構築
- Node.js がなぜフロントエンド開発に必要なのか
-
Node.js をインストールする
nodenv でインストールできるnodeのバージョンの確認
nodenv install --listnodenv で node のインストール
nodenv install <VERSION>nodenvからnodeやグローバルなnpmパッケージを見えるようにするためにrehashを行う 新しいnodeのバージョンを入れたり、npm install -gなどを行ったときに実行する必要がある
nodenv rehashnodenv でインストールしているnodeのバージョンの確認
nodenv versionsnodenv でグローバルで使うnodeのバージョンを指定する
nodenv global <VERSION>nodenv であるプロジェクトのディレクトリでのみ使うnodeのバージョンを指定する。 その結果 .node-version という名前の不可視ファイルが生成され、その中にそのディレクトリで使うnodeのバージョンが記述される。 gitなどで .node-version を共有することで、プロジェクトのメンバーで使うnodeのバージョンを統一することができる。
nodenv local <VERSION>
- 超絶推奨エディタ Visual Studio Code
1-2. プロジェクトを作成する
- Create React App は何をしてくれているのか
- Create React App で「Hello, World！」
1-3. アプリを管理するためのコマンドやスクリプト
-
Yarn コマンド
package.json の記述に従って、依存関係のあるパッケージを全てインストールする
yarn install指定したパッケージをインストールする
yarn add <PACKAGE_NAME>指定したパッケージをアンインストールする
yarn remove <PACKAGE_NAME>指定したパッケージについての情報を表示する
yarn info <PACKAGE_NAME>バージョン整合を取りつつパッケージをアップグレードする（動作保証はなし）
yarn upgrade <PACKAGE_NAME>yarn install でインストールされた内容は、今日実行するのと1ヶ月後に実行するのとではおそらく異なる。 そこで、どのバージョンがインストールされたのかを、正確に記録し再現するために yarn.lock というファイルが必要になる。 yarn.lock ファイルは基本git管理したほうがよい。
- npm の Scripts
- react-scripts
第2章 エッジでディープな JavaScript の世界
2-1. あらためて JavaScript ってどんな言語？
- それは世界でもっとも誤解されたプログラミング言語
- 年々進化していく JavaScript
2-2. 変数の宣言
2-3. JavaScript のデータ型
- JavaScript におけるプリミティブ型
- プリミティブ値のリテラルとラッパーオブジェクト
- オブジェクト型とそのリテラル
2-4. 関数の定義
- 関数宣言と関数式
- アロー関数式と無名関数
- さまざまな引数の表現
2-5. クラスを表現する
- クラスのようでクラスでない、JavaScript のクラス構文
- プロトタイプベースのオブジェクト指向とは
2-6. 配列やオブジェクトの便利な構文
- 分割代入とスプレッド構文
- オブジェクトのマージとコピー
2-7. 式と演算子で短く書く
- ショートサーキット評価
- Nullish Coalescing と Optional Chaining
2-8. JavaScript の鬼門、this を理解する
- JavaScript の this とは何なのか
- this の中身 4章 つのパターン
- this の挙動の問題点と対処法
2-9. モジュールを読み込む
- JavaScript モジュール三國志
- webpack はフロントエンド標準ビルドツールの夢を見るか？
- ES Modules でインポート／エクスポート
第3章 関数型プログラミングでいこう
3-1. 関数型プログラミングは何がうれしい？
3-2. コレクションの反復処理
- 配列の反復処理
- オブジェクトの反復処理
3-3. JavaScript で本格関数型プログラミング
- あらためて関数型プログラミングとは何か
- 高階関数
- カリー化と関数の部分適用
- 閉じ込められたクロージャの秘密
3-4. JavaScript での非同期処理
- Promise ―JavaScript で非同期処理を扱う基本
- Promise をハンドリングする
第4章 TypeScript で型をご安全に
4-1. TypeScript はイケイケの人気言語？
4-2. TypeScript の基本的な型
- 型アノテーションと型推論
- JavaScript と共通の型
- Enum 型とリテラル型
- タプル型
- Any、Unknown、Never
4-3. 関数とクラスの型
- 関数の型定義
- TypeScript でのクラスの扱い
- クラスの 2章 つの顔
4-4. 型の名前と型合成
- 型エイリアス VS インターフェース
- 共用体型と交差体型
- 型の Null 安全性を保証する
4-5. さらに高度な型表現
- 型表現に使われる演算子
- 条件付き型とテンプレートリテラル型
- 組み込みユーティリティ型
- 関数のオーバーロード
4-6. 型アサーションと型ガード
- as による型アサーション
- 型ガードでスマートに型安全を保証する
4-7. モジュールと型定義
- TypeScript のインポート／エクスポート
- JavaScript モジュールを TypeScript から読み込む
- 型定義ファイルはどのように探索されるか
4-8. TypeScript の環境設定
- TypeScript のコンパイルオプション
- tsconfig.json のカスタマイズ
【第二部 目次】
第5章 JSX で UI を表現する
5-1. なぜ React は JSX を使うのか
- JSX の本質を理解する
- なぜ React は見た目とロジックを混在させるのか
- なぜ React はテンプレートを使わないのか
- なぜ React は View をタグツリーで表現するのか
5-2. JSX の書き方
- JSX の基本的な文法
- JSX とコンポーネントの関係
- React の組み込みコンポーネント
第6章 Linter とフォーマッタでコード美人に
6-1. ESLint
- JavaScript、TypeScript における Linter の歴史
- ESLint の環境を作る
- ESLint の適用ルールをカスタマイズする
6-2. Prettier
-
特別なコードフォーマッタ Prettier
eslint-config-prettier は不要な設定ルールや Prettier と衝突するルールを検出する CLI ツール。
$ npx eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}' No rules that are unnecessary or conflict with Prettier were found.もし衝突してるルールがあるようなら、次のように表示される
The following rules are unnecessary or might conflict with Prettier: - @typescript-eslint/indentこの場合は @typescript-eslint/indent の設定が不要だということなので、.eslintrc.js からそれを削除する
- Prettier の環境を作る
6-3. stylelint
6-4. さらに進んだ設定
第7章 React をめぐるフロントエンドの歴史
7-1. React 登場前夜
- すべては Google マップショックから始まった
- フロントエンド** 第 2章 世代技術の興隆
7-2. Web Components が夢見たもの
7-3. React の誕生
7-4. React を読み解く 6章 つのキーワード
- 公式サイトトップに掲げられている三大コンセプト
- Declarative（宣言的）
- Component-Based、Just The UI
- Virtual DOM（仮想DOM）
- One-Way Dataflow（単方向データフロー）
- Learn Once, Write Anywhere
7-5. 他のフレームワークとの比較
- 第3世代のフレームワーク情勢
- Angular
- Vue.js
- LitElement、そして Web Components
第8章 何はなくともコンポーネント
8-1. コンポーネントのメンタルモデル
8-2. コンポーネントと Props
8-3. クラスコンポーネントで学ぶ State
- コンポーネントをクラスで表現する
- クラスコンポーネントに State を持たせる
8-4. コンポーネントのライフサイクル
8-5. Presentational Component と Container Component
第9章 Hooks、関数コンポーネントの合体強化パーツ
9-1. Hooks に至るまでの物語
- 手軽ながら壊れやすかった Mixins
- コミュニティによって普及した HOC
- HOC の対抗馬 Render Props
- ついに Hooks が登場する
9-2. Hooks で State を扱う
9-3. Hooks で副作用を扱う
- Effect Hook の使い方
- Effect Hook とライフサイクルメソッドの相違点
9-4. Hooks におけるメモ化を理解する
9-5. Custom Hook でロジックを分離・再利用する
【第三部 目次】
第10章 React におけるルーティング
10-1. SPA におけるルーティングとは
10-2. ルーティングライブラリの選定
10-3. React Router（5章 系）の API
- React Router のインストールと導入方法
- React Router のコンポーネント API
- React Router の Hooks API
10-4. React Router をアプリケーションで使う
10-5. React Router バージョン 5章 から 6 への移行
- v5章 から v6 への変更点
- v6章 でアプリケーションを書き直す
第11章 Redux でグローバルな状態を扱う
11-1. Redux の歴史
- Flux アーキテクチャ
- Redux の登場
11-2. Redux の使い方
- Redux の思想
- Redux をアプリケーションに組み込む
11-3. Redux 公式スタイルガイド
11-4. Redux Toolkit を使って楽をしよう
11-5. Redux と useReducer
- useReducer で Redux の処理を書き直す
- useReducer と State Hook の正体
第12章 React は非同期処理とどう戦ってきたか
12-1. 過ぎ去りし Redux ミドルウェアの時代
- コンポーネントの中で非同期処理を行う
- Redux ミドルウェア黄金時代の始まり
- 公式謹製 Redux Thunk
- 筋はいいがクセの強い redux-saga
12-2. Effect Hook で非同期処理
- Redux ミドルウェアは問題を解決できたのか
- 公式が示した Effect Hook という道
12-3. 「Redux 不要論」を検証する
- オリジナル作者 Dan Abramov の離脱
- New Context API の登場
- Redux 周辺を取り巻くトレンドの変化
- この先 Redux とどうつきあっていくべきか
第13章 Suspense でデータ取得の宣言的 UI を実現する
13-1. Suspense とは何か
- Effect Hook で副作用を扱う難しさ
- Suspense for Code Splitting
- Suspense を非同期的なデータ取得に使う
13-2. “Suspense Ready”なデータ取得ライブラリ
- Relay、Apollo、urql
- SWR ― Next.jsで有名な Vercel 社製ライブラリ
- React Query ― 個人開発ながら多機能でプロジェクトが活発
- React Query with Suspense
13-3. Suspense の 優位性と Concurrentモード
- 既存アプローチとの比較から見る Suspense の優位性
- Concurrent モードとは
- Concurrent モード、もう使うべきか、まだ待つべきか
13-4. Suspense と Concurrent モードが革新する UX
- キーワードは「UX ファースト」
- Concurrent モードを有効にする
- Concurrent モード API の使い方
- Concurrent モードで先進的 UI を実現する
- Suspense と Concurrent モードは非同期処理の最終解か