Reactは無料で学べますか？

はい。コードマスターのReact講座はすべて無料・広告なしです。概念ノートはログイン不要で読めます。

Reactは初心者でも大丈夫ですか？

はい。各レッスンは「概念解説 → コード例 → インタラクティブデモ → 確認クイズ」の順で、前提知識なしで進められます。

Reactの学習にどれくらいかかりますか？

各レッスンは平均30〜60分です。1日1〜2本のペースで、カテゴリー全体を約1〜2か月で修了できます。

JavaScript

useContext

💡 なぜ学ぶ必要があるのか？

🎯 ログイン情報やテーマ設定などのグローバルなデータを簡単に共有できます。

💼 5段階、10段階にわたるPropsのバケツリレーという複雑さを解消します。

⚡ Reduxのような複雑な状態管理ライブラリを使わずに、中小規模のプロジェクトを素早く構築できます。

🏢 실무에서는

実務では、ユーザー情報・ダークモード設定・言語選択などアプリ全体で必要なデータをuseContextで管理します。新しいエンジニアが入社したとき、最初に学ぶパターンです。

useContextとは？

useContext

Context APIを通じて、コンポーネントツリー全体でデータを共有するHookです。

Props Drillingの問題

code

App → Layout → Sidebar → UserMenu → UserAvatar (5階層の受け渡し)

Contextを使うと、中間のコンポーネントを介さずに直接アクセスできます。

React 19の変更点

▸use(Context) Hookでより簡潔に使用可能
▸Providerなしでコンテキストのデフォルト値を活用可能

💻 useContextの実践

import { createContext, useContext, useState, ReactNode } from "react";

// 1. Context生成
interface ThemeContextType {
  theme: "light" | "dark";
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | null>(null);

// 2. Providerコンポーネント
function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("dark");
  const toggleTheme = () => setTheme(t => t === "light" ? "dark" : "light");

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// 3. カスタムHook (タイプ安全)
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) throw new Error("useTheme must be used within ThemeProvider");
  return context;
}

// 4. 使用
function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme} className="p-2 rounded">
      {theme === "dark" ? "🌙" : "☀️"}
    </button>
  );
}

// 5. AppでProviderを囲む
function App() {
  return (
    <ThemeProvider>
      <Header />
      <Main />
    </ThemeProvider>
  );
}

// React 19: use() Hook
import { use } from "react";
function NewComponent() {
  const { theme } = use(ThemeContext)!; // React 19 新構文
  return <div className={theme}>...</div>;
}

💡 💡 Contextのヒント

▸カスタムHook: useTheme()やuseAuth()などでラップする
▸分離: 頻繁に変わる値と変わらない値でContextを分割する
▸代替手段: 複雑なグローバル状態にはZustandがより便利
▸React 19: use(Context)で条件付き読み取りが可能

この概念は、Reactコンポーネント開発において根幹をなすものです。Reactの宣言的UIパラダイムを理解し、propsとstateの違いを明確に区別しましょう。コンポーネントは、同じ入力(props)に対して常に同じ出力(JSX)を返す純粋関数のように動作する必要があります。

⚛️ Reactパターン — useContext

useContextをReactでどのように使うか、コードを交えてステップごとに学びましょう。

1 📦 1. Contextを作成する

グローバルに共有するデータストア

const ThemeContext = createContext('light');

↓

2 🎁 2. Providerでラップする

値を提供するツリーのスコープを指定する

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

↓

3 📥 3. useContextで購読する

どの深さの子コンポーネントからでも直接アクセス可能

const theme = useContext(ThemeContext);

↓

4 💡 4. いつ使うか

テーマ・ログインユーザー・言語設定など、本当にグローバルな状態にのみ使用する

🌍 useContext — グローバル状態

コードを直接編集すると、0.7秒後に自動で反映されます。React 18 + Babelでブラウザ上で即座に実行できます。

🖥️ 実行結果 — レンダリングされたReactコンポーネント

✏️ React 코드 수정하기 (클릭해서 열기)

const ThemeContext = React.createContext('light');

function Toolbar() {
  return <ThemedButton />;
}

function App() {
  const [theme, setTheme] = React.useState('dark');
  return (
    <div style={{padding:20}}>
      <ThemeContext.Provider value={theme}>
        <h2>useContextデモ</h2>
        <Toolbar />
        <p style={{marginTop:20}}>App → Toolbar → ThemedButton (3段階の深さ)</p>
        <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} style={{marginTop:10}}>
          🔄 テーマ切り替え
        </button>
      </ThemeContext.Provider>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

⚛️ React 18 + Babel Standalone — まず結果を確認し、エディタで自由に編集できます。

確認クイズ

useContextのデメリットは何ですか？