React Hooks入門：コード例付きチュートリアル

#React

LEGOブロックで家を建てていることを想像してみてください。Reactは、人々がウェブサイトやアプリを構築するのに役立つ特別なLEGOの説明書のようなものです。LEGOブロックが組み合わさってより大きなものを作るように、Reactは開発者がコードの断片を組み合わせて、あなたが毎日使用するウェブサイトやアプリを作成するのに役立ちます。

React Hooksは、これらのLEGOブロックでの構築をより簡単で整理されたものにする特別なツールのようなものです。

従来の方法 vs. 新しい方法

Hooks以前：複雑なアプローチ

これを想像してみてください：パーティーを企画していて、2種類のパーティープランナーがいます：

  • シンプルなプランナー：「テーブルを設置する」などの基本的なタスクのみを処理できる
  • 複雑なプランナー：すべてを処理できる：ゲストリストの管理、出欠確認の追跡、食事の調整、緊急事態への対応

従来のReactの世界では、基本的な表示以外のこと（情報を記憶したり、変更に応答したりする）をしたい場合、「複雑なプランナー」のアプローチを使用する必要があり、これははるかに多くのコードを書き、厳格なルールに従うことを意味していました。

Hooks後：シンプルなアプローチ

Hooksはすべてを変えました。今では、「シンプルなプランナー」でも特別なツールを使用して複雑なタスクを処理できます。それは、すべてのパーティープランナーにアプリ付きのスマートフォンを渡すようなものです。突然、誰もが「複雑なプランナー」になることなく、ゲストリストを管理し、出欠確認を追跡し、食事を調整できるようになります。

Hooksとは正確に何か？

Hooksを強力な機能に「フック」できる特別な関数と考えてください。これらはあなたのスマートフォンのアプリのようなものです。それぞれが特定のスーパーパワーを与えてくれます：

  • 📱 カメラアプリ = 写真を撮る
  • 📱 マップアプリ = ナビゲーション
  • 📱 天気アプリ = 天気チェック

同様に：

  • 🎣 useState hook = 情報を記憶する
  • 🎣 useEffect hook = 変更に反応する
  • 🎣 useContext hook = 情報をグローバルに共有する

最も重要なHooks

useState: メモリーフック

何をするか: アプリが物事を記憶し、変更時に更新するのを助けます。

実世界の例え: 何かを変更すると、どこでも自動的に更新されるスマートなメモ帳のようなものです。

例: ソーシャルメディアの「いいね」ボタンを想像してください。useStateフックは、投稿に「いいね」したかどうか（true/false）を記憶し、クリックしたときにハートアイコンを更新します。

javascript
// クリックしたかどうかを記憶するシンプルな「いいね」ボタン
const LikeButton = () => {
  // これは"isLiked"という名前のメモリスロットを作成し、falseで開始
  // "setIsLiked"はこのメモリを更新する関数
  const [isLiked, setIsLiked] = useState(false);

  // 誰かがボタンをクリックしたとき、いいね/いいねしないを切り替える
  const handleClick = () => {
    setIsLiked(!isLiked); // trueなら false に、falseなら true にする
  };

  return (
    <button onClick={handleClick}>
      {isLiked ? "❤️ いいね済み" : "🤍 いいね"}
    </button>
  );
};

このコードが行うこと: ボタンをクリックするたびに、あなたがそれを気に入ったかどうかを記憶し、赤いハート（いいね済み）または白いハート（いいねしていない）を表示します。

useEffect: リアクションフック

何をするか: アプリが変更に反応し、適切なタイミングでアクションを実行できるようにします。

実世界の例え: 自動アクションの設定のようなもの - 「これが起こったとき、あれをする」。

例: 天気アプリを開いたとき、useEffectは自動的に最新の天気データを取得します。アプリを開くたびに天気情報を更新してくれる個人アシスタントがいるようなものです。

javascript
// 表示されたときに自動的に天気を読み込むコンポーネント
const WeatherDisplay = () => {
  const [weather, setWeather] = useState("読み込み中...");

  // これはコンポーネントが最初に表示されたときに自動的に実行される
  useEffect(() => {
    // 天気データの取得をシミュレート（実際のアプリではAPI呼び出しになる）
    const getWeather = async () => {
      // 天気サービスからデータを取得していると仮定
      const weatherData = "晴れ、24°C";
      setWeather(weatherData);
    };

    getWeather();
  }, []); // 空の [] は「コンポーネント開始時に一度だけ実行」を意味する

  return <div>今日の天気: {weather}</div>;
};

このコードが行うこと: この天気表示が画面に表示されるとすぐに、何もクリックしなくても自動的に天気を取得して表示します。

useContext: 共有フック

何をするか: アプリの異なる部分が手動で渡すことなく同じ情報を共有できるようにします。

実世界の例え: 伝言ゲームの代わりに、会社全体のアナウンスシステムのようなものです。

例: ユーザープロフィール情報（名前、写真）を、各ページが個別に要求することなく、アプリのすべてのページで共有できます。

javascript
// まず、「コンテキスト」を作成 - 共有掲示板のようなもの
const UserContext = createContext();

// 全員にユーザー情報を提供するメインアプリ
const App = () => {
  const [user, setUser] = useState({ name: "田中太郎", theme: "dark" });

  return (
    // これにより、内部のすべてのコンポーネントでユーザー情報が利用可能になる
    <UserContext.Provider value={user}>
      <Header />
      <Dashboard />
      <Footer />
    </UserContext.Provider>
  );
};

// 任意のコンポーネントがユーザー情報にアクセスできるようになる
const Header = () => {
  // このフックは共有コンテキストからユーザー情報を取得
  const user = useContext(UserContext);

  return (
    <header className={user.theme}>
      おかえりなさい、{user.name}さん！
    </header>
  );
};

const Dashboard = () => {
  const user = useContext(UserContext);

  return (
    <main className={user.theme}>
      <h1>{user.name}さんのダッシュボード</h1>
      {/* ダッシュボードの内容 */}
    </main>
  );
};

このコードが行うこと: ユーザーの名前と設定をすべてのコンポーネントに個別に渡す代わりに、必要なときに共有コンテキストにこの情報を「尋ねる」ことができます。

Hooksの組み合わせ: 実際の例

実際の例で、Hooksがどのように連携するかを見てみましょう。 自動保存機能付きのシンプルなカウンター：

javascript
const SmartCounter = () => {
  // カウント数を記憶
  const [count, setCount] = useState(0);

  // 保存中かどうかを記憶
  const [isSaving, setIsSaving] = useState(false);

  // カウントが変更されるたびに自動的に「クラウド」に保存
  useEffect(() => {
    // 最初の読み込み時は保存しない
    if (count === 0) return;

    setIsSaving(true);

    // サーバーへの保存をシミュレート（実際のアプリでは実際のAPIを使用）
    setTimeout(() => {
      console.log(`カウントを保存しました: ${count}`);
      setIsSaving(false);
    }, 1000);
  }, [count]); // 'count'が変更されるたびにこれを実行

  return (
    <div>
      <h2>カウント: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        1つ増やす
      </button>
      <button onClick={() => setCount(count - 1)}>
        1つ減らす
      </button>
      {isSaving && <p>💾 保存中...</p>}
    </div>
  );
};

これが行うこと:

  • 数字と変更するボタンを表示
  • 現在の数字を記憶
  • 数字が変更されるたびに自動的にサーバーに保存
  • 保存中は「保存中...」を表示

なぜHooksを気にするべきか？

ユーザー（あなた）にとって

  • より高速なアプリ: Hooksは開発者がより効率的なコードを書くのに役立ちます
  • より良い体験: アプリがあなたのアクションにより滑らかに応答できます
  • より少ないバグ: シンプルなコードは問題が少なくなります

企業にとって

  • より幸せな開発者: より簡単なコードは開発者が機能をより早く構築できることを意味します
  • より低いコスト: 複雑でないコードは保守費用が安くなります
  • より良い製品: 複雑なコードと戦う時間が減り、機能により多くの時間を費やせます

全体像

React Hooksは、すべての建築業者に重いツールボックスを持ち歩かせる代わりに、スイスアーミーナイフを渡すようなものです。これによりウェブ開発は次のようになりました：

  • よりアクセスしやすい: 新しい開発者が学習しやすい
  • より効率的: 書いて保守するコードが少ない
  • より柔軟: より簡単な方法で問題を解決できる

上記のコード例を見ると、それらがいかにクリーンで読みやすいかがわかります。Hooks以前は、同じ機能を実現するためにはるかに複雑なコード構造が必要でした。

実世界への影響

Hooksが2019年に導入されて以来、何百万ものウェブサイトやアプリの構築方法を変革しました。Facebook、Netflix、その他の数え切れないほどの人気プラットフォームがHooksを使用して、あなたが毎日楽しんでいるスムーズで応答性の高い体験を作成しています。

上記で見たコードパターンは、次のようなものの裏側で動作しています：

  • ソーシャルメディアの「いいね」ボタンやコメントシステム
  • アイテムを記憶するEコマースショッピングカート
  • 自動更新される天気アプリ
  • コンテンツをパーソナライズするユーザーダッシュボード

おすすめ記事

7つの必須ソフトウェアデザインパターン

React Hooks を初心者向けに簡単解説！useState、useEffect、useContext をコード例付きで分かりやすく説明。

#JavaScript#Software Design Patterns
55
85

Storybook + Atomic Design：フロントエンド開発の最強コンビ

React Hooks を初心者向けに簡単解説！useState、useEffect、useContext をコード例付きで分かりやすく説明。

#React#Software Architecture
36
100