IntlayerでLynx and React mobile appを翻訳する | 国際化（i18n）

アプリケーションテンプレートをGitHubで見る。

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

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

Lynx を完全にカバー

Intlayer は、コンポーネント レベルのコンテンツ スコープ、TypeScript サポート、および国際化 (i18n) のスケーリングに必要なすべての機能を提供することにより、Lynx および React と完全に連携するように最適化されています。

バンドルサイズ

コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および agent skills により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。

オートメーション

AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォーム も提供します。

パフォーマンス

大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。

非開発によるスケーリング

</AccordionGroup>

1. 1

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

   Lynxプロジェクトから、以下のパッケージをインストールします：

   bash

   コンテンツをコピー

   コードをコピー

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

   npx intlayer init --interactive
   

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

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

   bash

   コンテンツをコピー

   コードをコピー

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

   npm install intlayer react-intlayer lynx-intlayer
   

   パッケージ

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

   • react-intlayer
     Lynxでロケールの取得と切り替えに使用するコンテキストプロバイダーとReactフックを提供するReact統合。

   • lynx-intlayer
     IntlayerをLynxバンドラーと統合するためのプラグインを提供するLynx統合。

   ---

2. 2

   Intlayer設定を作成する

   プロジェクトのルート（または便利な場所）にIntlayer設定ファイルを作成します。以下のようになります：

   intlayer.config.ts

   コンテンツをコピー

   コードをコピー

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

   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

   LynxバンドラーにIntlayerプラグインを追加する

   LynxでIntlayerを使用するには、lynx.config.tsファイルにプラグインを追加する必要があります：

   lynx.config.ts

   コンテンツをコピー

   コードをコピー

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

   import { defineConfig } from "@lynx-js/rspeedy";
   import { pluginIntlayerLynx } from "lynx-intlayer/plugin";
   
   export default defineConfig({
     plugins: [
       // ... 他のプラグイン
       pluginIntlayerLynx(),
     ],
   });
   

4. 4

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

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

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

   src/index.tsx

   コンテンツをコピー

   コードをコピー

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

   import { root } from "@lynx-js/react";
   
   import { App } from "./App.js";
   import { IntlayerProvider } from "react-intlayer";
   import { intlayerPolyfill } from "lynx-intlayer";
   
   intlayerPolyfill();
   
   root.render(
     <IntlayerProvider>
       <App />
     </IntlayerProvider>
   );
   
   if (import.meta.webpackHot) {
     import.meta.webpackHot.accept();
   }
   

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
   • など

   例：

   src/app.content.ts

   コンテンツをコピー

   コードをコピー

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

   import { t, type Dictionary } from "intlayer";
   
   const appContent = {
     key: "app",
     content: {
       title: "React",
       subtitle: t({
         en: "on Lynx",
         fr: "sur Lynx",
         es: "en Lynx",
       }),
       description: t({
         ja: "ロゴをタップして楽しんでください！",
         en: "Tap the logo and have fun!",
         fr: "Appuyez sur le logo et amusez-vous!",
         es: "¡Toca el logo y diviértete!",
       }),
       hint: [
         t({
           ja: "編集",
           en: "Edit",
           fr: "Modifier",
           es: "Editar",
         }),
         " src/App.tsx ",
         t({
           ja: "更新を確認してください！",
           en: "to see updates!",
           fr: "pour voir les mises à jour!",
           es: "para ver actualizaciones!",
         }),
       ],
     },
   } satisfies Dictionary;
   
   export default appContent;
   

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

   ---

6. 6

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

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

   src/App.tsx

   コンテンツをコピー

   コードをコピー

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

   import { useCallback, useState } from "@lynx-js/react";
   import { useIntlayer } from "react-intlayer";
   
   import "./App.css";
   import arrow from "./assets/arrow.png";
   import lynxLogo from "./assets/lynx-logo.png";
   import reactLynxLogo from "./assets/react-logo.png";
   import { LocaleSwitcher } from "./components/LocaleSwitcher.jsx";
   
   export const App = () => {
     const [alterLogo, setAlterLogo] = useState(false);
     const { title, subtitle, description, hint } = useIntlayer("app");
     const onTap = useCallback(() => {
       // 背景のみ
       setAlterLogo(!alterLogo);
     }, [alterLogo]);
   
     return (
       <view>
         <view className="Background" />
         <view className="App">
           <view className="Banner">
             <view className="Logo" bindtap={onTap}>
               {alterLogo ? (
                 <image src={reactLynxLogo} className="Logo--react" />
               ) : (
                 <image src={lynxLogo} className="Logo--lynx" />
               )}
             </view>
             <text className="Title">{title}</text>
             <text className="Subtitle">{subtitle}</text>
           </view>
           <view className="Content">
             <image src={arrow} className="Arrow" />
             <text className="Description">{description}</text>
             <text className="Hint">
               {hint[0]}
               <text style={{ fontStyle: "italic" }}>{hint[1]}</text>
               {hint[2]}
             </text>
           </view>
           <LocaleSwitcher />
           <view style={{ flex: 1 }}></view>
         </view>
       </view>
     );
   };
   

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

   ---

7. 7

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

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

   src/components/LocaleSwitcher.tsx

   コンテンツをコピー

   コードをコピー

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

   import { type FC } from "react";
   import { getLocaleName } from "intlayer";
   import { useLocale } from "react-intlayer";
   
   export const LocaleSwitcher: FC = () => {
     const { setLocale, availableLocales, locale } = useLocale();
   
     return (
       <view
         style={{
           display: "flex",
           flexDirection: "row",
           justifyContent: "center",
           alignItems: "center",
           gap: 10,
         }}
       >
         {availableLocales.map((localeEl) => (
           <text
             key={localeEl}
             style={{
               color: localeEl === locale ? "#fff" : "#888",
               fontSize: "12px",
             }}
             bindtap={() => setLocale(localeEl)}
           >
             {getLocaleName(localeEl)}
           </text>
         ))}
       </view>
     );
   };
   

   これにより、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 Extension ドキュメントを参照してください。

さらに進む

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