【第1回】React勉強_20230127～

1章 Next.jsとTypeScriptによるモダン開発

1.1 Next.jsとTypeScript

• Next.jsとは
  • オープンソースのWebアプリケーションフレームワーク
  • Reactをベースに開発されている。フロントエンドだけではなく、一部のサーバー機能(例えば、サーバーサイドレンダリング機能)も持つ
• Next.jsとReactの構成の違い
  • 従来型Reactアプリケーション
    • クライアントサイド：Reactアプリケーション
    • サーバーサイド：APIサーバー+データベース
  • Next.jsアプリケーション
    • クライアントサイド：Reactアプリケーション
      • サーバーサイド：APIルート+SSR/KSSG+APIサーバー＋データベース
        ※Next.js：APIルート、SSR/KSSG、Reactアプリケーション
• TypeScript
  • JavaScriptを拡張するAltJSの1つ。JavaScriptに静的型付け機能などを追加している
  • 現時点でのモダンフロントエンド開発のプログラミング言語のデファクトスタンダード

1.2 フロントエンド開発の変遷

• MVCフレームワークからSPAへ
  • 従来はMVC全てをサーバサイドで行っていた。HTMLもサーバサイドレンダリングで作成する
  • 一方、SPAではAPIでサーバーサイドとフロントエンド間をJson形式のデータをやり取りしている
  • フロントエンドにMVC/MVVMのアーキテクチャが導入されたJavaScriptライブラリが多く出現した。その中の一つがReact
• Reactの特徴
  • 仮想DOM
  • 宣言的UI
  • 単一方向のデータ受け渡し
  • コンポーネント指向・関数コンポーネント
  • Fluxアーキテクチャとの親和性
• Fluxアーキテクチャ
  • 
  • データ取得：Viewに必要な状態はStoreから取得する（Store→View）
  • データ更新：状態の更新はActionをDispatcherに渡し、DispatcherがActionの内容に応じてStoreを更新する
• SSR(Server Side Rendering)
  • 仮想DOMのレンダリングを行う
  • サーバー側でレンダリングするためにNode.jsの環境がサーバに必要
• SSG(Static Site Generation)
  • 事前に静的ファイルを生成し、デプロイする仕組み
  • SSRのデメリットを解決するために利用される
  • 動的コンテンツの生成には不向き
• Next.js特徴
  • Reactフレームワーク
  • SPA/SSR/SSGの切り替えが容易
  • 簡単なページルーティング
  • TypeScriptベース
  • デプロイが容易
  • 学習コストが少ない
  • webpackの設定の隠蔽
  • ディレクトリベースの自動ルーティング
  • コードの分割・統合
• Next.js全体像

分類	機能	備考
UIコンポーネント実装	宣言的UI	Reactの機能範囲
	Virtual DOM	Reactの機能範囲
	UIテスト	Reactの機能範囲
	TypeScriptサポート	Reactの機能範囲
サーバサイド実装	ファイルシステムルーティング
	APIルート
	SSR/SSG
	ISRによるビルド短縮
開発環境サポート	環境変数
	高速リロード
	ESLint
	簡易Webpackビルド
Webアプリのデプロイ	IE11含むブラウザサポート
	画像最適化
	フォント最適化
	国際化対応
	Vercelへの簡易デプロイ

1.3 モダンフロントエンド開発の設計思想

• コンポーネント指向
  • 再利用可能な部品(コンポーネント)を組み合わせてUIを構築する
  • コンポーネントをアプリケーションに依存しない抽象的な部品とする
• コンポーネントの状態管理
  • コンポーネントが持つデータを状態として管理する
  • props
    • コンポーネントの外側から受け取る値。単一方向データフロー構造を持つ
  • state
    • コンポーネント内部で保持するデータ。外部からアクセス不可
    • stateの影響範囲は、保持しているコンポーネントおよび配下のコンポーネント
• コンポーネント間のデータの受け渡し
  • 親→子はpropsでデータを渡し
  • 子→親はpropsにコールバック関数の引数として渡す
  • 上記以外でcontextを用いたデータのやり取りがある。ただし、グローバルでのアクセスとなるため、多用はコードの可読性を下げる
  • propsとcontextを適切に使い分けることが重要
• Atomic Design

要素	説明	例
Atoms	UIの最小単位	ボタン
Molecules	1つ以上のAtomを組み合わせて作成される要素	検索フォーム
Organisms	1つ以上のMoleculesを組み合わせて作成される要素	ヘッダー
Templates	Organismsを組み合わせて1つの画面として成り立つもの
Pages	Templateにデータが組み込まれたもの

• Hydration
  • SSR/SSGで事前生成されたHTMLをReactコンポーネントに復元すること
  • HydrationにはJavaScriptの読み込みが必要で、ReactDOMモジュールのhydrate()というAPIで提供されている

---

学習記録

• 学習日/学習時間
  • 2023/1/27（1h40m）
  • 2023/1/28（1h30m）
  • 2023/1/29（20m）