Reactを学ぶ初学者の方へ、あなたがメモされた内容を整理し、より詳しく解説を加えた学習まとめを作成します。Markdown形式で記述します。
まとめ
あなたがメモされたReact学習の要点を、日付順からトピック別に整理し直し、初学者の方にも分かりやすいように詳細な解説を追加しました。
1. UIコンポーネントとスタイリング (9/13)
🧩 UIライブラリとスタイリング
Reactの見た目（UI）を整えるために、コンポーネントライブラリやCSSフレームワークが使われます。これらは、ボタンや入力フォーム、レイアウトなどを素早く、統一感のあるデザインで作成するのに役立ちます。
| 項目 |
説明 |
| Material UI (MUI) |
Googleの提唱するデザインシステム「Material Design」に基づいたコンポーネントライブラリ。 |
| Chakra UI |
アクセシビリティに配慮されており、柔軟なカスタマイズがしやすいコンポーネントライブラリ。npmでインストールして利用します。 |
| Bootstrap 5 |
世界的に有名なCSSフレームワーク。Reactでも利用できます。 |
| Tailwind CSS / Broomer |
Utility-First（ユーティリティ優先）のCSSフレームワーク。あらかじめ定義された小さなCSSクラスを組み合わせてデザインします。 |
📐 レイアウトコンポーネント (Chakra UIなど)
多くのUIライブラリには、コンポーネントを配置するための便利なコンポーネントが用意されています。
| 項目 |
説明 |
VStack |
Vertical Stack の略。コンポーネントを縦に並べるためのコンポーネント。 |
HStack |
Horizontal Stack の略。コンポーネントを横に並べるためのコンポーネント。 |
VscCheck |
Font AwesomeやReact Iconsなどのライブラリに含まれるアイコンの一つで、チェックマーク（✓）を表すアイコン。TODOアプリの完了ボタンなどに利用されます。 |
2. 特別なDOM操作とユーティリティ (9/13)
🚪 createPortalとモーダル
| 項目 |
説明 |
createPortal |
Reactのコンポーネントが返す要素を、その親要素ではないDOMノードに描画するための仕組みです。 |
| 利用例 |
**モーダル（ダイアログ）**の作成。モーダルは通常、画面全体を覆うため、DOMツリーの最上層（body直下など）に配置するのが一般的です。createPortalを使うと、コンポーネントのコードは子コンポーネント内にありながら、レンダリング先を親コンポーネントとは別のDOM要素にできます。 |
usetoast() |
トースト通知（画面の隅に短時間表示されるメッセージ）を表示するためのカスタムフック。Chakra UIなどのライブラリで提供されています。 |
3. React Hooks (9/15, 9/21)
📌 useRefとDOM操作 (9/15)
| 項目 |
説明 |
useRef |
コンポーネントの再レンダリングが行われても、値がリセットされずに保持される「箱」のようなものです。 |
| 値へのアクセス |
格納された値は、返されるオブジェクトの**ref.current**プロパティでアクセスし、読み書きできます。 |
| 主な用途 |
1. DOM要素へのアクセス（ref属性として要素に渡す）。2. 再レンダリングの影響を受けずに、変更可能な値をコンポーネント内に保持する。 |
forwardRef |
親コンポーネントから子コンポーネント内のDOM要素やReactコンポーネントの**refを「転送」**するために使われます。カスタムコンポーネントを作成する際など、特定の場面でのみ使用します。 |
useImperativeHandle |
useRefとforwardRefと組み合わせて使用し、親コンポーネントから子コンポーネントのメソッドなどを呼び出す際の操作を限定（公開する操作を定義）します。乱用は避けるべきで、極力避けられないケースでのみ使用します。 |
🔄 useState vs useReducer (9/21)
どちらもコンポーネントの状態（State）を管理するためのフックです。
| 特徴 |
useState |
useReducer |
| 状態の更新方法 |
更新ロジックは利用側（setStateを呼び出す場所）に委ねられます。更新が単純な場合に適しています。 |
更新ロジックは一か所（reducer関数内）に集中して定義されます。更新が複雑で、複数のアクションで状態が変わる場合に適しています。 |
| 構文 |
const [state, setState] = useState(initialState); |
const [rstate, dispatch] = useReducer(reducer, initialState); |
| 処理 |
更新処理を呼び出し時に都度記述します。 |
dispatchでアクションを送り、reducer関数内でswitch文などでアクションに応じて状態を更新します。 |
| メリット |
シンプルで直感的。 |
更新ロジックが一つにまとまり、可読性や普遍性が向上します。 |
🧬 useEffect と 副作用 (9/21)
| 項目 |
説明 |
| 用途 |
Reactのコンポーネントの外部に影響を及ぼす処理（副作用：データの取得、DOMの直接操作、タイマーの設定など）を行うために使います。 |
| 構文 |
useEffect(() => { 副作用処理; return () => { クリーンアップ（終了）処理 }; }, [依存値]); |
| クリーンアップ |
returnで返す関数は、コンポーネントがアンマウントされる時や、次の副作用が実行される前に実行されます（タイマーの解除など）。 |
| 依存配列 (第二引数) |
空の配列 [] を渡すと、コンポーネントが最初に描画された時（マウント時）のみ実行されます。 |
|
変数を渡すと、その変数が変更されるたびに副作用が再実行されます。 |
|
省略すると、レンダリングのたびに実行されます。 |
✍️ useLayoutEffect (9/21)
| 項目 |
説明 |
| 実行タイミング |
基本的な記述方法はuseEffectと同じですが、useEffectよりも早く、画面に描画が反映される前に同期的に実行されます。 |
| 用途 |
DOMの測定や、視覚的なチラつきを防ぐために、DOMが更新された直後にレイアウトに関わる処理を行いたい場合に使います。普段はuseEffectを使い、視覚的な問題がある場合にのみ検討します。 |
🔗 useContext (9/21)
| 項目 |
説明 |
| 用途 |
共通のデータ（ユーザー情報、テーマ設定など）を、コンポーネントツリーの階層を深くまたいで**「バケツリレー」せずに**直接渡す（共有する）ために使います。 |
| 関連 |
アプリ全体で共有する大規模な状態管理には、Reduxなどのライブラリも使われます。 |
🔨 Custom Hook (9/21)
| 項目 |
説明 |
| 命名規則 |
必ず**use**から始める（例: useFetchData）。 |
| 用途 |
複数のコンポーネントで再利用したいロジック（例: データの取得、フォームの入力管理など）をまとめた関数。 |
| 仕組み |
既存のHooks（useState, useEffectなど）を内部で呼び出し、必要な値や関数をオブジェクトや配列でまとめて返し、分割代入で受け取って利用します。 |
4. 関数型プログラミングの概念 (9/20)
💻 プログラミングのパラダイム
| 項目 |
説明 |
| 手続き型プログラミング |
命令をそのままの順序で記述し、実行する。コード量が多くなりがちで、可読性が低下しやすい。 |
| 関数型プログラミング |
手続きをできる限り関数に分離し、それぞれの関数が特定の役割に集中するように記述する。これにより、可読性が向上し、バグの少ないコードが書きやすくなります。 |
| オブジェクト指向型プログラミング |
データ（数値など）と、そのデータを操作する関数（処理）を「オブジェクト」としてまとめて管理する考え方。 |
🌟 関数型プログラミングの核となる考え方
| 項目 |
説明 |
| 純粋関数 |
1. 決められたインプット（引数）に対して、常に一貫した戻り値を返す。2. 関数外のスコープ（外部変数やDOMなど）を参照・変更しない（副作用を起こさない）。 |
| 副作用 |
関数コンポーネント（JSXを返す場所）は、基本的に純粋な処理を行うべきです。関数外に影響を及ぼす処理（ネットワーク通信、タイマー、DOM操作など）は副作用と呼び、Reactでは**useEffect**を利用して管理します。 |
immutable (イミュータブル) |
元の値を変更せず、値を変更したい場合は常に新しい値（コピー）を作成する考え方。関数型プログラミングでは、元の値を保持することで、予期せぬバグを防ぎ、状態の変化を追いやすくします。Reactの状態管理やReduxなどで非常に重要です。 |
5. 大規模ステート管理 - Redux (9/28)
Reduxは、useContextとuseReducerを組み合わせたような仕組みですが、より大規模で複雑なアプリケーションにおいて、**アプリケーション全体で共有されるステート（状態）**を一元管理するためのライブラリです。
📊 Reduxの要点
| 項目 |
説明 |
| ステートの種類 |
グローバルステート（Redux）：アプリ全体で共有される状態。ローカルステート（useState/useReducer）：コンポーネント内で閉じた状態。 |
| Toolkit |
現在は、複雑なReduxの記述を簡単にするRedux Toolkitを使用することが推奨されています。configureStoreとcreateSliceを使います。 |
configureStore |
アプリケーションの**Store（状態が保存される場所）**を設定します。非推奨のcreateStoreの代わりです。 |
createSlice |
Reduxのステート・Reducer・Action Creatorを一度に自動で定義します。記述ミスを防ぎ、記述量を減らします。 |
immer |
Redux Toolkitに内蔵されています。Reducer内でproduceを利用すると、ミュータブルな記述（直接書き換え）でイミュータブルな更新（新しいオブジェクトの作成）を実現できます。 |
Redux Thunk |
非同期処理（データの取得など）をReduxで扱うためのミドルウェアです。Reducerは純粋関数である必要があり副作用を書けないため、非同期処理などの副作用はミドルウェア（Redux Thunk）内で記述します。 |
🧩 Reduxの構成要素 (従来のRedux)
| 項目 |
説明 |
| Store |
アプリ全体の状態（ステート）を保存する場所。 |
| Action |
「どのような変更を行うか」を記述したプレーンなJavaScriptオブジェクト。{ type: 'counter/+', payload: 5 } のような形式です。 |
| Action Creator |
Actionオブジェクトを生成する関数。 |
| Reducer |
現在のステートとActionを受け取り、新しいステートを返す純粋関数。 |
combineReducers |
複数のReducerを一つにまとめるために使います。 |
6. 旧世代のコンポーネント (9/28)
| 項目 |
説明 |
| Class Component |
Hooksが導入される前に使われていた、JavaScriptのクラスとして定義されたコンポーネント。 |
| 課題 |
ステートフルなロジック（状態を持つロジック）の再利用が難しい、thisの扱いが複雑（bindメソッドによるthisの束縛が必要）、保守性・可読性が低いなどの問題がありました。 |
| 現在 |
今は関数コンポーネントとHooksを使うのが主流です。古いコードの更新や保守の際に、Class Componentに出会うことがあります。 |
7. Next.jsとルーティング・レンダリング (9/29, 9/30)
Next.jsはReactのフレームワークであり、ルーティングやレンダリングの方法を拡張しています。
🛣️ App Router (Next.js)
| 項目 |
説明 |
| ファイルベースルーティング |
ディレクトリ構造がそのままURLのパスになります。 |
page.tsx |
ディレクトリ内のメインページ（URLに対応するコンテンツ）を定義します。これがないとページとして機能せず、default exportする必要があります。 |
| 動的ルーティング |
ディレクトリ名を**[id]のように角括弧で囲むことで、URLの一部をパラメータ**として受け取れるようになります。 |
layout.tsx |
複数のページ間で共通して利用する共通レイアウトを定義します。ネスト（入れ子）にしてサブレイアウトを追加することも可能です。fontやtitleなどの共通情報の設定や、データのフェッチなどもここで宣言できます。 |
not-found.tsx |
404エラー（ページが見つからない）の際に表示するカスタム画面を定義できます。 |
( ) でのフォルダ命名 |
フォルダ名を**(tasks)**のように括弧で囲むと、URLのパスにそのフォルダ名を含めないようにできます。 |
loading.tsx |
データの取得中など、コンテンツが表示されるまでの間にローディングUIを表示するためのファイル。 |
💻 クライアントサイドとサーバーサイド
| 項目 |
説明 |
| Client-Side |
ブラウザで実行される処理。useStateやonClickイベントなどのHooksやイベントハンドラが使えます。処理結果はブラウザのコンソールに表示されます。 |
| Server-Side |
サーバーで実行される処理。Hooksやイベントハンドラは使えません。データベース接続や認証など、サーバーで行うべき処理を記述します。処理結果はターミナルに表示されます。 |
ディレクティブ ("use client") |
Next.jsではデフォルトでServer Componentですが、ファイルの先頭に"use client"と記述することで、そのコンポーネントと子コンポーネントをClient Componentとして動作させることができます。 |
form action |
Next.jsでは、form要素のaction属性にサーバー側の関数を指定することで、フォームの内容をサーバーで処理できます。 |
useActionState |
サーバーアクションの結果をクライアント側で受け取り、状態を管理するためのHooks。 |
8. データベースとAPI (10/7, 10/9)
🗄️ データベース連携
| 項目 |
説明 |
| MongoDB |
NoSQLデータベースの一つ。 |
| MySQL |
RDB（リレーショナルデータベース）の一つ。 |
| Cursor |
データベースに接続し、データを操作するために使われる仕組み。 |
🌐 REST APIとHTTP通信
| 項目 |
説明 |
| REST API |
ウェブサービス間でデータをやり取りするための設計原則（アーキテクチャスタイル）に基づいたAPI。 |
| HTTPメソッド |
データの操作の種類を示します。 |
|
GET：データの取得。 |
|
POST：データの新規作成。 |
|
PUT：データの一括更新/置換。 |
|
DELETE：データの削除。 |
| JSON |
JavaScriptのオブジェクトの記述形式に基づいた、データ交換のためのフォーマット。API通信でよく使われます。 |
|
JSON.stringify(対象)：JavaScriptのオブジェクトや配列をJSON形式の文字列に変換。 |
|
JSON.parse(対象)：JSON形式の文字列をJavaScriptのオブジェクトや配列に変換。 |
| クエリパラメーター |
URLの末尾に?key1=value1&key2=value2のように付加される情報で、取得するデータを絞り込むなどの指示をサーバーに渡すために使われます。 |
| APIモック |
開発中に、まだサーバー側が完成していない場合などに、一時的に代用する簡易的なAPI。 |
axios |
HTTP通信（データの更新・取得）を簡単に行うことができる、JavaScriptの外部ライブラリ。API通信によく利用されます。 |
9. その他の重要な概念 (10/10)
| 項目 |
説明 |
| エンドポイント |
ネットワークに接続された端末（クライアントやサーバー）や、データのやり取りが行われる場所（APIのURLなど）。 |
dynamicImport |
JavaScriptの**import()関数を利用して、必要な時（ユーザーがその機能を使う時など）に非同期でモジュールを読み込む**仕組み。バンドルサイズを減らし、初期ロード時間を短縮できます。 |
lazy (React) |
ReactでdynamicImportを使い、**コンポーネントを遅延ロード（必要な時だけ読み込む）**ために使われる関数。Suspenseと組み合わせて、ロード中に代替UIを表示できます。 |
dynamic (Next.js) |
Next.jsにおける、コンポーネントの遅延ロード（Client-SideでのDynamic Import）を行うための機能。 |
