アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツコードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。

AI エージェント

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

オートメーション

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

パフォーマンス

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

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

Intlayer は単なる i18n ソリューションではなく、自己ホスト型ビジュアルエディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。

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

Lynxプロジェクトから、以下のパッケージをインストールします：
bash
コードをコピー
コードをクリップボードにコピー
npm install intlayer react-intlayer lynx-intlayernpx intlayer init
npm install intlayer react-intlayer lynx-intlayernpx intlayer init
パッケージ
- intlayer
  設定、辞書コンテンツ、型生成、CLIコマンドのためのコアi18nツールキット。
- react-intlayer
  Lynxでロケールの取得と切り替えに使用するコンテキストプロバイダーとReactフックを提供するReact統合。
- lynx-intlayer
  IntlayerをLynxバンドラーと統合するためのプラグインを提供するLynx統合。
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設定ドキュメントをご覧ください。

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(),  ],});

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

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();}

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();}

コンテンツを宣言する

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

.content.json
.content.ts
.content.tsx
.content.js
.content.jsx
.content.mjs
.content.mjx
.content.cjs
.content.cjx
など

例：

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のコンテンツドキュメントを参照してください。

コンポーネントで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>  );};

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を呼び出して実際の文字列を取得してください。

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

コンポーネント内からロケールを切り替えるには、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>  );};

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）に型定義を生成します。

json5

コードをコピー

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

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

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

これにより、以下の機能が有効になります：

辞書キーの自動補完。
存在しないキーにアクセスしたり型が不一致の場合に警告する型チェック。

Gitの設定

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

bash

コードをコピー

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

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

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

VS Code拡張機能

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

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

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

翻訳キーの自動補完。
欠落している翻訳のリアルタイムエラー検出。
翻訳内容のインラインプレビュー。
翻訳の作成や更新を簡単に行うクイックアクション。拡張機能の使い方の詳細については、Intlayer VS Code Extension ドキュメントを参照してください。

さらに進む

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

Adonis

JSON

バージョン履歴

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

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

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

パッケージ

Intlayer設定を作成する

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

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

コンテンツを宣言する

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

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

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

Gitの設定

VS Code拡張機能

さらに進む