React完全入門

# React完全入門
## UI構築の思想から実践までを学ぶ
## 初学者向けガイド

Transcript

1. React 完全入門 UI 構築の思想から実践までを学ぶ 初学者向けガイド
2. 1. React とは何か？ UI （ユーザーインターフェース）を構築するためのJavaScript ライブラリ ユーザーが画面上で目にする部分を作る技術 Meta 社（旧Facebook ）が開発・公開 世界中で最も人気のあるライブラリの一つ 単なるツールではなく「設計思想」 複雑なUIを効率的かつ堅牢に作るための「考え方」を提供
3. 2. なぜ今、React を学ぶのか？ 圧倒的な採用実績 Netflix, Instagram, Airbnbなど、世界的なサービスが採用 高い市場価値と将来性 Reactエンジニアの需要は世界的に増加 強力なエコシステム 豊富な学習資料、活発なコミュニティ、無数の便利ライブラリ 発展性（Learn Once, Write Anywhere ） React Nativeを使えば、同じ知識でスマホアプリ（iOS/Android）も開発可能
4. 3. React の核：「宣言的UI 」という考え方 Reactが革命的だった最大の理由です。 従来（命令型） **「手順」**を一つひとつ指示する 例：「Aをクリックしたら、BのテキストをCに変えて、Dの色をEにせよ」 複雑になると、管理が破綻しやすい（スパゲッティコード） React （宣言的） **「あるべき姿」**だけを定義する 例：「データが『X』なら、UIは『この見た目』になる」 面倒なDOM 操作（手順）はすべてReact が自動で実行 コードがシンプルになり、予測可能で保守性が劇的に向上！
5. 4. React を支える「三大核心概念」 Reactアプリケーションは、この3つの組み合わせで構築されます。 1. コンポーネント (Component) UIを構成する「部品」 2. Props 部品に渡す「データ」（親 → 子） 3. State 部品が内部で持つ「状態」
6. 4-1. 核心概念①：コンポーネント UI を「再利用可能な部品」として開発する仕組み ヘッダー、サイドバー、ボタン、フォームなど UI を「レゴブロック」のように組み立てる 小さな部品を組み合わせて、大きなページを作る メリット 再利用性: 一度作った「ボタン」をどこでも使える 保守性: 修正は該当の「部品」だけでOK カプセル化: 部品ごとに独立しており、見通しが良い
7. 4-2. 核心概念②：Props (Properties) 親コンポーネントから子コンポーネントへデータを渡す仕組み 関数の「引数」によく似ている コンポーネントを「カスタマイズ」するために使う 例： <Button text="送信" color="blue" /> 絶対ルール：Props は「読み取り専用」 子コンポーネントはPropsを 絶対に変更してはいけない データは常に「親 → 子」への一方通行（単一方向データフロー） → これによりアプリの動作が予測しやすくなる
8. // 親コンポーネント function App() { return ( <div> {/* UserProfileに "name" と "age" というPropsを渡す */} <UserProfile name="山田太郎" age={30} /> <UserProfile name="鈴木花子" age={25} /> </div> ); } // 子コンポーネント (propsオブジェクトを受け取る) function UserProfile(props) { return ( <p> 名前：{props.name}, 年齢：{props.age}歳 </p> ); } 4-2. Props の実例
9. 4-3. 核心概念③：State コンポーネントが内部で独自に保持・管理する「動的なデータ」 コンポーネント専用の「記憶」や「メモリ」 例： フォームの入力値 クリックで開閉するメニューの状態 (true/false) カウンターの現在の数値 最重要：State が更新されると、UI が自動で再描画（再レンダリング）される これがReactのインタラクティブなUIの核
10. 4-4. 【最重要】Props と State の違い この2つの区別が、React理解の鍵です。 特性 Props (Properties) State データの源 泉 親コンポーネント（外部由来） 自分自身（内部由来） 変更可能性 変更不可（読み取り専用） 変更可能（書き換え可能） 主な目的 コンポーネントを外から設定す る コンポーネントの動的な状態を管理 する 比喩 関数の「引数」 コンポーネントの「メモリ」
11. 5. React の言語：JSX JavaScript XML の略。JavaScript の構文拡張。 一言でいうと：JavaScript 内でHTML 風の構文を書ける技術 ブラウザはJSXを直接理解できない 「Babel」等のツールが、ブラウザが読める通常のJS （ React.createElement() ）に変換してくれる // これがJSX const element = <h1>こんにちは、JSX！</h1>; // ↓ Babelによって、このように変換される const element = React.createElement('h1', null, 'こんにちは、JSX！'); JSX を使うことで、UI の構造を直感的に記述できる
12. 6. JSX の基本ルール 1. 単一のルート要素で囲む <div> や <> ... </> (フラグメント) で全体を囲む 2. 属性名は className HTMLの class は、JSXでは className と書く 3. JavaScript の式は {} で囲む 変数や計算結果、関数の呼び出しを埋め込める 4. リスト表示（繰り返し）は .map() を使う 各要素に一意の key 属性が必須
13. const userName = "田中"; const users = [ { id: 1, name: '佐藤' }, { id: 2, name: '伊藤' }, ]; function UserInfo() { return ( // 1. <> で囲む <> {/* 3. {}でJSの変数を埋め込む */} <p>ようこそ、{userName}さん</p> {/* 4. .map() でリスト表示 (keyも忘れずに) */} <ul className="user-list"> {/* 2. className */} {users.map(user => ( <li key={user.id}>{user.name}</li> ))} </ul> </> ); } 6. JSX のルール：コード例
14. 7. React Hooks ( フック) とは？ 関数コンポーネントに機能を追加するための「特別な関数」 従来の関数コンポーネントは、Stateを持てなかった Hooks の登場により、関数コンポーネントで全てが完結するようになった use という接頭辞で始まる (例: useState , useEffect ) ここでは、最も重要な2つのHookを学びます。
15. 7-1. 最重要Hook① ：useState 関数コンポーネントに State を持たせるためのHook import { useState } from 'react'; // 構文： const [現在の値, 値を更新する関数] = useState(初期値); const [count, setCount] = useState(0); count : 現在の状態（初期値は 0 ） setCount : count を更新するための専用関数 重要： setCount( 新しい値) が呼ばれると、コンポーネントが再レンダリングされ る
16. import { useState } from 'react'; function Counter() { // countというStateを定義。初期値は0 const [count, setCount] = useState(0); return ( <div> <p>カウント: {count}</p> {/* ボタンクリックでsetCountを呼び出し、 countの値を (現在のcount + 1) に更新する */} <button onClick={() => setCount(count + 1)}> +1 </button> </div> ); } 7-1. useState の実践例 ( カウンター)
17. 7-2. 最重要Hook② ：useEffect 「副作用 (Side Effects) 」を実行するためのHook 副作用とは？ コンポーネントの描画とは直接関係ない処理のこと 例：API からのデータ取得 ( フェッチ) 例：DOMの手動操作 例：タイマーの設定 ( setTimeout ) useEffect は、これらの処理を 安全なタイミングで実行してくれる
18. 7-2. useEffect のキモ：依存配列 [] useEffect は第2引数に「依存配列」を取り、実行タイミングを制御します。 useEffect(() => { // 実行したい副作用の処理 }, [依存配列]); 1. [] ( 空の配列) を指定 初回レンダリング時（マウント時）に1 回だけ実行 用途：APIからの初期データ取得など 2. [state, props] ( 値を含む配列) を指定 初回に加え、 配列内の値が変更された時だけ実行 用途： userId が変わったら、再度APIでユーザー情報を取得するなど
19. 7-3. 実践例：API からデータを取得 useState と useEffect の最強コンボです。 import { useState, useEffect } from 'react'; function UserProfile() { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); // 初回レンダリング時に1回だけ実行 (依存配列が []) useEffect(() => { const fetchUser = async () => { const res = await fetch('[https://api.example.com/users/1](https://api.example.com/users/1)'); const data = await res.json(); setUser(data); // Stateを更新 setLoading(false); // Stateを更新 }; fetchUser(); }, []); // ← ココが重要！ if (loading) return <p>読み込み中...</p>; return <p>ユーザー名: {user.name}</p>; }
20. 8. React が「なぜ速い」のか？ → 仮想DOM (Virtual DOM) 従来のDOM 操作は高コスト DOMを変更すると、ブラウザが「再計算(リフロー)」や「再描画(リペイン ト)」を行う必要があり、動作が遅くなる原因に。 React の解決策：仮想DOM 実際のDOMをメモリ上に軽量に模倣した「設計図」（ただのJSオブジェク ト） React は、この「仮想DOM 」上で差分だけを計算する
21. 8. React のレンダリングの仕組み 1. State が変更される 2. Reactが、新しいStateに基づいた 新しい仮想DOMをメモリ上に構築 3. 古い仮想DOMと新しい仮想DOMを比較し、 「差分」だけを高速に検出 (Diffing) 4. その「差分」だけを、実際のDOM にまとめて適用（パッチ）
22. 仮想DOM のイメージ 開発者は「あるべき姿」を宣言するだけ Reactが仮想DOMを使い、 実際のDOM への変更を最小限に抑えてくれる → これがReactの高速化と、優れた開発体験（宣言的UI）の秘密
23. 9. 最初の一歩（開発環境） 1. Node.js をインストールする Reactの開発に必要なツール（ npm ）を利用するために必須 公式サイト (nodejs.org) からLTS版をインストール 2. Vite ( ヴィート) でプロジェクトを作成 現代のReact開発で最も標準的な開発ツール（高速！） ターミナルで以下のコマンドを実行するだけ # 1. プロジェクト作成 (対話形式で React を選択) npm create vite@latest # 2. 作成されたフォルダに移動 cd (プロジェクト名) # 3. 必要なライブラリをインストール
24. 10. 次のステップ Reactの基本（三大概念とHooks）をマスターしたら... ルーティング (React Router) URLに応じて表示するページを切り替える技術 (SPA) より高度な状態管理 (Context API, Zustand など) コンポーネント間でStateを簡単に共有する仕組み React Native 同じ知識で、iOS / Android のネイティブアプリ開発に挑戦
25. まとめ Reactは「 宣言的UI」を実現するライブラリ 「 コンポーネント」「Props」「State」が三大核心概念 State が変わると、自動でUIが再描画される JSX でUIの構造を直感的に記述できる useState で状態を、 useEffect で副作用を管理する 「 仮想DOM」が、宣言的な記述と高速な描画を両立させている React の学習、お疲れさまでした！