先生と生徒の会話形式で理解しよう

生徒

「Reactで作ったサイトを、日本語だけじゃなくて英語でも表示できるようにしたいです。ボタン一つで切り替えるにはどうすればいいですか？」

先生

「それは多言語対応、専門用語でアイエイティーンエヌ（i18n）と呼ばれる機能ですね。Reactのコンテキストエーピーアイ（Context API）を使うと、バケツリレーをせずにスマートに実装できますよ。」

生徒

「コンテキスト…？バケツリレー…？難しそうですが、初心者の私でも作れますか？」

先生

「大丈夫です。仕組みを身近な例えで解説しながら、実際のプログラムの書き方を順番に見ていきましょう！」

1. Reactの多言語対応（i18n）とは何か？

多言語対応とは、一つのWebサイトで日本語、英語、中国語など、複数の言語を切り替えて表示する仕組みのことです。プログラミングの世界では「Internationalization（国際化）」の頭文字のIと、最後のn、その間の文字数が18文字であることから「i18n」と略して呼ばれます。

通常、Reactでデータを受け渡すときは、親の部品から子の部品へ、そのまた孫の部品へと順番にデータを渡していく必要があります。これを「バケツリレー」と呼びますが、規模が大きくなると管理が非常に大変になります。そこで登場するのが「Context API（コンテキストAPI）」です。

Context APIは、いわば「放送局」のようなものです。放送局から電波を飛ばせば、どの部屋にいる人でもラジオで情報をキャッチできますよね。これと同じように、アプリのどこからでも「今は日本語設定だよ」「今は英語設定だよ」という情報を直接受け取れるようにするのが、今回の目標です。

2. コンテキストを作成して「言葉の箱」を準備しよう

まずは、言語情報を入れるための専用の箱を作成します。Reactには createContext という機能が用意されています。これを使うことで、アプリ全体で共有したいデータ（今回の場合は現在の言語設定）を定義できます。

以下のコードでは、まず言語の種類を管理するための「箱」を作成する準備をしています。プログラミングが初めての方でも、まずは「おまじない」だと思って書き進めてみてください。


import React, { createContext, useState } from "react";

// 1. 言語のためのコンテキスト（箱）を作成します
export const LanguageContext = createContext();

// 2. データを配るための「提供者（Provider）」を作ります
export function LanguageProvider({ children }) {
  const [lang, setLang] = useState("ja"); // 初期値は日本語（ja）

  // 言語を切り替えるための関数
  const toggleLanguage = () => {
    setLang((prev) => (prev === "ja" ? "en" : "ja"));
  };

  return (
    <LanguageContext.Provider value={{ lang, toggleLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
}

（ここでは、現在の言語が「ja（日本語）」か「en（英語）」かを管理し、それを切り替えるためのスイッチを作りました。この LanguageProvider で囲った中身は、どこでも言語情報を使えるようになります。）

3. 翻訳データをオブジェクト形式で作ってみよう

次に、実際に画面に表示する「翻訳リスト」を作成します。JavaScript（ジャバスクリプト）では、複数のデータをまとめて管理する「オブジェクト」という書き方を使います。これは、辞書のようなものだと考えてください。「こんにちは」という見出しに対して、日本語なら「こんにちは」、英語なら「Hello」という値を紐付けておきます。

このようにデータを整理しておくことで、プログラムが「今は英語モードだから、Helloを表示しよう」と自動的に判断できるようになります。


const translations = {
  ja: {
    title: "こんにちは、React！",
    description: "これはコンテキストを使った多言語対応のデモです。",
    button: "英語に切り替える"
  },
  en: {
    title: "Hello, React!",
    description: "This is a multi-language demo using Context API.",
    button: "Switch to Japanese"
  }
};

（辞書データが完成しました。ja は日本語、en は英語を意味しています。キー（titleなど）を指定することで、対応する言葉を取り出すことができます。）

4. 言語を切り替えるボタン部品を作成する

いよいよ、ユーザーがクリックして言語を変更するためのボタンを作ります。ここで useContext という機能を使います。これを使うと、先ほど作成した「放送局（Context）」から、現在の言語設定と切り替え用関数を直接受信することができます。

難しい設定は抜きにして、ボタンを押したときに先ほどの toggleLanguage 関数が動くように設定しましょう。これにより、アプリ全体の言語が一瞬で切り替わるようになります。


import React, { useContext } from "react";
import { LanguageContext } from "./App"; // 先ほど作った箱を読み込む

function LanguageSwitcher() {
  const { lang, toggleLanguage } = useContext(LanguageContext);

  return (
    <button onClick={toggleLanguage} className="btn btn-primary">
      {lang === "ja" ? "English" : "日本語"}
    </button>
  );
}

export default LanguageSwitcher;

（ボタンをクリックすると、内部の lang という状態が ja から en、あるいは en から ja へと交互に入れ替わります。画面上のボタンの文字自体も、次に切り替わる言語名に変化します。）

5. 翻訳されたテキストを画面に表示するコンポーネント

実際に文章を表示する部分を作ります。ここでも useContext を使って、現在の言語が何であるかを確認します。そして、先ほど作った「辞書データ（translations）」から、該当する言葉を取り出して表示させます。

コンポーネントとは、画面を構成する部品のことです。Reactではこのように部品ごとに役割を分けることで、後から修正しやすくなるメリットがあります。パソコンに詳しくなくても、部品を組み合わせてWebサイトを作るイメージを持つと理解しやすくなります。


import React, { useContext } from "react";
import { LanguageContext } from "./App";

const translations = {
  ja: { title: "ようこそ", text: "Reactの世界へ！" },
  en: { title: "Welcome", text: "Welcome to the world of React!" }
};

function Content() {
  const { lang } = useContext(LanguageContext);
  const t = translations[lang]; // 現在の言語に合わせて辞書を選択

  return (
    <div className="p-4">
      <h2 className="display-4">{t.title}</h2>
      <p className="lead">{t.text}</p>
    </div>
  );
}

export default Content;

（現在の言語 lang が ja なら日本語のタイトルが、en なら英語のタイトルが自動的に選択されて表示されます。）

6. 全てを組み合わせてアプリを完成させよう

最後に、これまで作った部品をすべて一つにまとめます。一番外側を LanguageProvider で囲むことが最も重要なポイントです。この囲みの中にあるすべての部品が、言語情報を受け取れるようになります。

これが「コンテキスト」の力です。どんなに深い階層にある部品でも、この囲みの中にさえいれば、わざわざ親から子へデータを手渡ししなくても済むのです。プログラミング未経験の方でも、この「包み込む」というイメージを大切にしてください。


import React from "react";
import { LanguageProvider } from "./LanguageContext";
import Content from "./Content";
import LanguageSwitcher from "./LanguageSwitcher";

function App() {
  return (
    <LanguageProvider>
      <div className="container text-center mt-5">
        <h1 class="mb-4">多言語サイトのデモ</h1>
        <LanguageSwitcher />
        <hr />
        <Content />
      </div>
    </LanguageProvider>
  );
}

export default App;

（実行すると、画面に「多言語サイトのデモ」というタイトルとボタンが表示されます。ボタンを押すと、その下の文章が日本語から英語、英語から日本語へと一瞬で切り替わります。）

7. なぜContext APIを使うのが良いのか？

多言語対応を実装する方法は他にもありますが、なぜContext APIが推奨されるのでしょうか。その理由は、シンプルさと管理のしやすさにあります。例えば、大規模なショッピングサイトを想像してみてください。ヘッダー、商品リスト、買い物かご、フッターなど、無数の部品があります。これらすべての部品に「今は英語だよ」という情報を手作業で渡していくのは、気の遠くなるような作業です。

Context APIを使えば、中央管理室（Provider）で言語を変更するだけで、建物全体（アプリ全体）の表示言語が一斉に変わります。また、外部の重たいライブラリを導入しなくても、Reactの標準機能だけで実現できる点も、学習を始めたばかりの初心者にとっては大きなメリットとなります。

このように、情報の「共通化」と「自動配信」ができるようになると、Reactでの開発効率は劇的に向上します。まずは小さなボタンの切り替えから練習して、徐々に複雑なアプリに挑戦していきましょう。一歩ずつ進めば、プログラミングは決して怖くありません。