大再構築：React でサイトを作り直す

ミッション

レベル1–2のサイトを React で再構築。後退に聞こえる？ 違う——最高のトレーニング：コンテンツとデザインはもう決まってるから、新しい技術だけに集中できる。終わったら、プロが価値を感じる理由が白黒はっきり。

再構築プラン

1. サイトをコンポーネントに分割。 紙と鉛筆を取る（マジで！）サイトを箱でスケッチ：Header、Gallery、Quiz、Footer… 各箱 = src/ の1ファイル。

2. HTML をコンポーネントに移す。 古い .html から JSX に少しずつコピー。馴染みの違いに注意：class → className、各コンポーネントは1つのラッパー要素。画像を Vite プロジェクトの public/ にコピー——/images/team.jpg みたいなパスはそのまま動く。

3. CSS を移す。 style.css の中身を src/App.css にコピー。ほぼそのまま動く——CSS は CSS。

4. データを配列に出す。 カード、結果、ギャラリー写真——繰り返すものは全部オブジェクトの配列 + .map()、コンポーネントレッスンで学んだ通り。

5. レベル2の呪文を state に書き換え。 変換表：

   レベル2（素の JavaScript）	React
   getElementById + textContent	state + JSX の {value}
   addEventListener("click", ...)	onClick={...}
   classList.toggle + CSS .hidden	真偽値 state + {condition && (...)}
   変数付きカウンター	数値の useState

見てみよう：React 流ダークモード

1つの呪文を一緒に書き換えて、変換を見る：

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

Header.jsx ではボタンが prop で関数を受け取る：

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

最後の新しいこと：prop は関数も渡せる。 App が state を持ち、子に切り替えボタンを貸す。「state は上に住む」——React で最も一般的なパターン。

再構築チェックリスト

• サイトが少なくとも4コンポーネントに別ファイルで分割
• 繰り返し要素（カード、写真…）が配列 + .map() から生成
• 少なくとも2つのインタラクティブ箇所が useState で動く
• ダークモードが動き、記憶される（localStorage）
• コンソールにエラーなし
• コードに getElementById がどこにもない 😉

このレッスンのまとめ

• 再構築：コンポーネント分割 → HTML と CSS 移行 → データを配列 → 呪文を state に。
• prop は関数も渡せる——親が子に自分の state を制御するボタンを貸す。
• 同じ結果、きれいな構造：コピー減、変更楽。目に見える進歩。

© 2026 Ing. Martin Polak / AlgoRhino · コンテンツ利用規約