この記事では、Reactの位置づけ（ライブラリかフレームワークか）、何が嬉しいのか、学習の前提、そして本連載のゴールを整理します。コードは最小限にして「理解の地図」を作る回です。
Reactは何を解決するのか
Webアプリが大きくなると、画面（UI）の状態は増えていきます。たとえば「ログイン状態」「カートの中身」「検索条件」「モーダルの開閉」「入力フォームの途中経過」などです。
従来の「DOM（HTML）を直接書き換える」やり方では、状態が増えるほど 更新の抜け漏れ や 分岐の増殖 が起きやすくなります。Reactは次の思想でこの問題を整理します。
- 状態（state）を持つ
- stateから UI（見た目）を宣言的に作る
- stateが変われば UIは自動で更新される
つまり「UIをどう更新するか」ではなく、「いまの状態ならUIはこう」という設計に寄せます。
Reactの特徴：コンポーネント
Reactの中心概念は コンポーネント です。画面を小さな部品に分割し、それらを組み合わせて1画面を構成します。
例：ページの構造（イメージ）
- Header（ヘッダー）
- Sidebar（サイドメニュー）
- ArticleList（記事一覧）
- Pagination（ページ送り）
- Footer（フッター）
部品に分けると次のメリットがあります。
- 変更の影響範囲が小さくなる（保守が楽）
- 同じUIを再利用できる（重複が減る）
- テストしやすい（単体で動きを確認できる）
Reactの特徴：宣言的UI（Declarative UI）
Reactは「宣言的」です。典型的には次のように読み替えます。
- 命令的：「ボタンを押したらこの要素のテキストを変えて、その後こっちを表示して…」
- 宣言的：「countが増えたら、画面にはcountを表示する」
例（雰囲気）：
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>「表示のロジック」が state に紐づくので、UI更新が追跡しやすくなります。
Reactを学ぶ前提：JavaScriptの最低限
この連載はReact初心者向けですが、最低限として次のJavaScriptは触ります。
- let/const
- 関数（function / アロー関数）
- 配列と map / filter
- オブジェクト（{ key: value }）
- import/export
もし不安なら、まずは「配列のmap」「関数」「分割代入（{ } / [ ]）」だけ復習するとスムーズです。
この連載のゴールと進め方
ゴールは次の2つです。
- Reactの基本概念（JSX / コンポーネント / props / state）を理解する
- 小さな実用アプリ（TODO）を自力で作れるようになる
進め方は「毎回、小さな成功体験」を作る設計です。各回の最後に「チェックリスト」と「練習問題」を入れます。
次回は、ReactがなぜUI更新に強いのか（DOMと仮想DOM、再レンダーの考え方）を整理します。
コメント