React Native (Expo) - Lingo.dev CLI

Expoとは?

Expoは、React Nativeアプリケーションを作成するためのフレームワークおよびプラットフォームです。同じJavaScriptコードベースから、iOS、Android、Webアプリをビルド、デプロイ、反復するためのツールとサービスを提供します。

Lingo.dev CLIとは?

Lingo.devは、AI駆動の翻訳プラットフォームです。Lingo.dev CLIは、ソースファイルを読み取り、翻訳可能なコンテンツを大規模言語モデルに送信し、翻訳されたファイルをプロジェクトに書き戻します。

このガイドについて

このガイドでは、Expoを使用したReact NativeプロジェクトでLingo.dev CLIをセットアップする方法を説明します。Expoでプロジェクトをスキャフォールドし、翻訳パイプラインを構成し、結果を表示する方法を学習します。

ステップ1. Expoプロジェクトをセットアップする

新しいExpoアプリを作成します:
```
npx create-expo-app@latest my-app
```
プロジェクトディレクトリに移動します:
```
cd my-app
```
ローカライゼーションの依存関係をインストールします:
```
npx expo install expo-localization
npx expo install i18n-js
```

ステップ2. ソースコンテンツを作成する

ローカライズ可能なコンテンツを保存するディレクトリを作成します:
```
mkdir -p app/i18n
```

ローカライズ可能なコンテンツを含むファイルを作成します(例: app/i18n/en.json):

{
  "home": {
    "title": "Welcome",
    "subtitle": "This text is translated by Lingo.dev"
  },
  "cta": "Get started"
}

ステップ3. CLIを構成する

プロジェクトのルートに、i18n.jsonファイルを作成します:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "json": {
      "include": ["app/i18n/[locale].json"]
    }
  }
}

このファイルは以下を定義します:

Lingo.dev CLIが翻訳すべきファイル
翻訳する言語間の設定

この場合、設定はJSONファイルを英語からスペイン語に翻訳します。

注意すべき点は以下の通りです。

[locale]は実行時に置き換えられるプレースホルダーです。これにより、コンテンツが1つの場所（例：app/i18n/en.json）から読み取られ、別の場所（例：app/i18n/es.json）に書き込まれることが保証されます。
Lingo.dev CLIは、JSON、MDXなど、さまざまなファイル形式をサポートしています。

詳細については、i18n.json設定を参照してください。

ステップ4. コンテンツを翻訳する

Lingo.devアカウントにサインアップしてください。
CLI経由でLingo.devにログインします。
```
npx lingo.dev@latest login
```
翻訳パイプラインを実行します。
```
npx lingo.dev@latest run
```
CLIは翻訳されたコンテンツを保存するためのapp/i18n/es.jsonファイルと、翻訳済みの内容を追跡する（不要な再翻訳を防ぐため）i18n.lockファイルを作成します。

ステップ5. 翻訳を使用する

tsconfig.jsonファイルで、JSONインポートを有効にします。

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

特定のロケールの翻訳されたコンテンツを読み込む関数を作成します。

// app/lib/i18n.ts
import { getLocales } from "expo-localization";
import { I18n } from "i18n-js";

import en from "../i18n/en.json";
import es from "../i18n/es.json";

const i18n = new I18n({ en, es });

i18n.defaultLocale = "en";
i18n.enableFallback = true;
i18n.locale = getLocales()[0]?.languageCode ?? "en";

export default i18n;

関数を使用して翻訳されたコンテンツを表示します。

// App.tsx
import { useState } from "react";
import { View, Text, Pressable } from "react-native";
import i18n from "./app/lib/i18n";

export default function App() {
  const [locale, setLocale] = useState(i18n.locale);

  const toggleLocale = () => {
    const next = locale === "en" ? "es" : "en";
    i18n.locale = next;
    setLocale(next);
  };

  return (
    <View>
      <Text>{i18n.t("home.title")}</Text>
      <Text>{i18n.t("home.subtitle")}</Text>

      <Pressable onPress={toggleLocale}>
        <Text>
          {locale === "en" ? "Switch to Español" : "Cambiar a English"}
        </Text>
      </Pressable>
    </View>
  );
}

開発サーバーを起動します。
```
npx expo start
```
http://localhost:8081にアクセスします。
利用可能な言語を切り替えます。