ExpoとReact Nativeアプリを翻訳する | 国際化（i18n）

目次

代替手段ではなく Intlayer を使用する理由

react-native-localize や i18next などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。

1. 1

   依存関係をインストールする

   GitHub の アプリケーションテンプレート を参照してください。

   React Native プロジェクトから、次のパッケージをインストールします：

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npx intlayer@canary init --interactive    # v9# npx intlayer init                       # v8

   --interactive フラグはオプションです。AI エージェントの場合は intlayer-cli init を使用してください。

   このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npm install intlayer react-native-intlayer

   パッケージ

   • intlayer
     設定、辞書コンテンツ、型生成、CLI コマンドのためのコア i18n ツールキット。

   • react-native-intlayer
     ロケールの取得や切り替えに使用するコンテキストプロバイダーと React フック、React Native ポリフィル、および Intlayer を React Native バンドラーと統合するための Metro プラグインを提供する React Native 統合。react-intlayer からすべてを再エクスポートするため、React Native アプリではこの単一パッケージのみが必要です。

   ---

2. 2

   Intlayer設定ファイルの作成

   プロジェクトのルート（または任意の便利な場所）に Intlayer 設定ファイルを作成します。以下のような内容になるかもしれません：

   intlayer.config.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   /**
    * Locales型が利用できない場合は、tsconfig.jsonのmoduleResolutionを"bundler"に設定してみてください
    */
   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // ... 必要な他のロケールを追加してください
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;

   この設定ファイル内で、以下のことができます：

   • サポートするロケールのリストを設定する。
   • デフォルトのロケールを設定する。
   • 後で、より高度なオプション（例：ログ、カスタムコンテンツディレクトリなど）を追加することも可能です。
   • 詳細は Intlayer の設定ドキュメント を参照してください。
3. 3

   Metro プラグインを追加する

   Metro は React Native 用のバンドラーです。react-native init コマンドで作成された React Native プロジェクトのデフォルトバンドラーです。Intlayer を Metro で使用するには、metro.config.js ファイルにプラグインを追加する必要があります。

   metro.config.js

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   const { getDefaultConfig } = require("expo/metro-config");const { configMetroIntlayer } = require("react-native-intlayer/metro");module.exports = (async () => {  const defaultConfig = getDefaultConfig(__dirname);  return await configMetroIntlayer(defaultConfig);})();

   注：configMetroIntlayer は Promise 関数です。同期的に使用したい場合は configMetroIntlayerSync を使用するか、IFFE（即時実行関数式）を避けてください。 注：configMetroIntlayerSync はサーバー起動時に intlayer 辞書をビルドすることができません

4. 4

   Intlayer プロバイダーを追加する

   アプリケーション全体でユーザーの言語を同期させるには、ルートコンポーネントを react-native-intlayer の IntlayerProvider コンポーネントでラップする必要があります。

   常に react-native-intlayer からインポートしてください。その IntlayerProvider には Intlayer が使用する Web API のポリフィルが含まれており、このパッケージは react-intlayer からすべてのフックとユーティリティを再エクスポートします。

   また、Intlayer が正しく動作するように、index.js ファイルに intlayerPolyfill 関数を追加する必要があります。

   app/_layout.tsx

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Stack } from "expo-router";
   import { getLocales } from "expo-localization";
   import { IntlayerProvider } from "react-native-intlayer";
   import { type FC } from "react";
   
   const getDeviceLocale = () => getLocales()[0]?.languageTag;
   
   const RootLayout: FC = () => {
     return (
       <IntlayerProvider defaultLocale={getDeviceLocale()}>
         <Stack>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         </Stack>
       </IntlayerProvider>
     );
   };
   
   export default RootLayout;

5. 5

   コンテンツを宣言する

   プロジェクト内の任意の場所（一般的には src/ 内）にコンテンツ宣言ファイルを作成します。Intlayer がサポートする任意の拡張子形式を使用できます：

   • .content.json
   • .content.jsonc
   • .content.json5
   • .content.ts
   • .content.tsx
   • .content.js
   • .content.jsx
   • .content.mjs
   • .content.mjx
   • .content.cjs
   • .content.md
   • .content.mdx
   • .content.yaml
   • .content.yml
   • その他

   Expo Router (Web): .content.* ファイルは app/ ディレクトリの外に配置してください。 Expo Router は app/ 内のすべての JavaScript/TypeScript ファイルをルートとして扱います。Web では、ルート検出がファイルシステムを直接スキャンし、Metro の resolver.blockList を考慮しないため、同じ場所に配置された *.content.ts がルートとして登録されてしまいます。app/(tabs)/_layout.content.ts のようなファイルはレイアウトとして解析され（.content 部分がプラットフォームの接尾辞として読み込まれます）、実際の _layout.tsx と競合して次のエラーがスローされます:

   plaintext

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.

   宣言は app/ 以外のディレクトリ（例: content/ や src/content/）に配置してください。Intlayer はプロジェクト内のどこにあっても .content.* ファイルを検出し、辞書はその key によって参照されるため、インポートの変更は不要です。ネイティブではこれは必須ではありませんが（Metro の blockList がすでにそれらを隠しているため）、app/ 以外のディレクトリを使用することで両方のプラットフォームが機能し続けます。

   例（React Native 用の TSX ノードを含む TypeScript）：

   src/app.content.tsx

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { t, type Dictionary } from "intlayer";
   import type { ReactNode } from "react";
   
   /**
    * "app" ドメインのコンテンツ辞書
    */
   import { t, type Dictionary } from "intlayer";
   
   const homeScreenContent = {
     key: "home-screen",
     content: {
       title: t({
         en: "Welcome!",
         fr: "Bienvenue!",
         es: "¡Bienvenido!",
       }),
     },
   } satisfies Dictionary;
   
   export default homeScreenContent;

   コンテンツ宣言の詳細については、Intlayer のコンテンツドキュメント を参照してください。

   ---

6. 6

   コンポーネントで Intlayer を使用する

   子コンポーネントで useIntlayer フックを使用して、ローカライズされたコンテンツを取得します。

   例

   app/(tabs)/index.tsx

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Image, StyleSheet, Platform } from "react-native";
   import { useIntlayer } from "react-native-intlayer";
   import { HelloWave } from "@/components/HelloWave";
   import ParallaxScrollView from "@/components/ParallaxScrollView";
   import { ThemedText } from "@/components/ThemedText";
   import { ThemedView } from "@/components/ThemedView";
   import { type FC } from "react";
   
   const HomeScreen = (): FC => {
     const { title, steps } = useIntlayer("home-screen");
   
     return (
       <ParallaxScrollView
         headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
         headerImage={
           <Image
             source={require("@/assets/images/partial-react-logo.png")}
             style={styles.reactLogo}
           />
         }
       >
         <ThemedView style={styles.titleContainer}>
           <ThemedText type="title">{title}</ThemedText>
           <HelloWave />
         </ThemedView>
       </ParallaxScrollView>
     );
   };
   
   const styles = StyleSheet.create({
     titleContainer: {
       flexDirection: "row",
       alignItems: "center",
       gap: 8,
     },
   });
   
   export default HomeScreen;

   content.someKey を文字列ベースのプロパティ（例：ボタンの title や Text コンポーネントの children）で使用する場合は、実際の文字列を取得するために content.someKey.value を呼び出してください。

   アプリケーションが既に存在する場合は、Intlayer コンパイラ と 抽出コマンド を組み合わせて、1 秒で何千ものコンポーネントを変換できます。

   ---

7. 7

   アプリのロケールを変更する

   オプション

   コンポーネント内からロケールを切り替えるには、useLocale フックの setLocale メソッドを使用できます。

   src/components/LocaleSwitcher.tsx

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { type FC } from "react";
   import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
   import { getLocaleName } from "intlayer";
   import { useLocale } from "react-native-intlayer";
   
   export const LocaleSwitcher: FC = () => {
     const { setLocale, availableLocales } = useLocale();
   
     return (
       <View style={styles.container}>
         {availableLocales.map((locale) => (
           <TouchableOpacity
             key={locale}
             style={styles.button}
             onPress={() => setLocale(locale)}
           >
             <Text style={styles.text}>{getLocaleName(locale)}</Text>
           </TouchableOpacity>
         ))}
       </View>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flexDirection: "row",
       justifyContent: "center",
       alignItems: "center",
       gap: 8,
     },
     button: {
       paddingVertical: 6,
       paddingHorizontal: 12,
       borderRadius: 6,
       backgroundColor: "#ddd",
     },
     text: {
       fontSize: 14,
       fontWeight: "500",
       color: "#333",
     },
   });

   これにより、Intlayer のコンテンツを使用しているすべてのコンポーネントが再レンダリングされ、新しいロケールの翻訳が表示されます。

   詳細は useLocale のドキュメント をご覧ください。

TypeScript の設定（TypeScript を使用している場合）

Intlayer は、補完機能を向上させ、翻訳エラーを検出するために、隠しフォルダ（デフォルトは .intlayer）に型定義を生成します：

// tsconfig.json{  // ... 既存の TS 設定  "include": [    "src", // ソースコード    ".intlayer/types/**/*.ts", // <-- 自動生成された型定義を含める    // ... 既に含めているその他のファイル  ],}

これにより、以下の機能が利用可能になります：

• 辞書キーのオートコンプリート。
• 存在しないキーにアクセスしたり型が不一致の場合に警告する型チェック。

Git 設定

Intlayer によって自動生成されたファイルをコミットしないように、.gitignore に以下を追加してください：

# Intlayer によって生成されたファイルを無視.intlayer

VS Code 拡張機能

Intlayer の開発体験を向上させるために、公式の Intlayer VS Code 拡張機能をインストールできます。

VS Code マーケットプレイスからインストール

この拡張機能は以下を提供します：

• 翻訳キーのオートコンプリート。
• 翻訳が欠落している場合のリアルタイムエラー検出。
• 翻訳内容のインラインプレビュー。
• 翻訳の作成や更新を簡単に行うためのクイックアクション。

拡張機能の使い方の詳細については、Intlayer VS Code 拡張機能のドキュメント を参照してください。

さらに進む

• ビジュアルエディター：翻訳を視覚的に管理するために、Intlayer ビジュアルエディター を使用してください。
• CMS 統合: 辞書コンテンツを外部化し、CMS から取得することも可能です。
• CLI コマンド: 翻訳の抽出や欠落キーの確認などのタスクには、Intlayer CLI を活用してください。

Intlayer を通じて、完全な i18n 機能を備えた React Native アプリの開発をお楽しみください！

Debug

React Native は React Web よりも安定性が低いため、バージョンの整合性に特に注意を払ってください。

Intlayer は主に Web Intl API を対象としており、React Native では適切な polyfill を含める必要があります。

チェックリスト:

• intlayer および react-native-intlayer の最新バージョンを使用してください。
• Intlayer polyfill を有効にしてください。
• getLocaleName または他の Intl-API ベースのユーティリティを使用する場合は、これらの polyfill を早期にインポートしてください（たとえば index.js または App.tsx で）:

import "intl";import "@formatjs/intl-getcanonicallocales/polyfill";import "@formatjs/intl-locale/polyfill";import "@formatjs/intl-pluralrules/polyfill";import "@formatjs/intl-displaynames/polyfill";import "@formatjs/intl-listformat/polyfill";import "@formatjs/intl-numberformat/polyfill";import "@formatjs/intl-relativetimeformat/polyfill";import "@formatjs/intl-datetimeformat/polyfill";

• モジュールの解決に失敗した場合は、Metro 設定（resolver aliases、asset plugins、tsconfig paths）を確認してください。