Intlayerの今後のリリースに関する通知を受け取る
    作成:2025-04-18最終更新:2025-06-29

    Intlayer と Vite と Solid で国際化(i18n)を始める

    このパッケージは開発中です。詳細はissueをご覧ください。Solid向けIntlayerに関心がある場合は、issueに「いいね」をして応援してください。

    Intlayerとは何ですか?

    Intlayerは、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化(i18n)ライブラリです。

    Intlayerを使うと、以下が可能です:

    • コンポーネントレベルで宣言的な辞書を使って翻訳を簡単に管理できます。
    • メタデータ、ルート、コンテンツを動的にローカライズできます。
    • 自動生成された型によりTypeScriptのサポートを保証し、オートコンプリートやエラー検出を向上させます。
    • 動的なロケール検出や切り替えなどの高度な機能を活用できます。

    ViteとSolidアプリケーションでIntlayerをセットアップするステップバイステップガイド

    ステップ1: 依存関係のインストール

    npmを使って必要なパッケージをインストールします:

    bash
    npm install intlayer solid-intlayernpm install vite-intlayer --save-dev
    • intlayer

      国際化のための設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのツールを提供するコアパッケージ。

    • solid-intlayer IntlayerをSolidアプリケーションと統合するパッケージです。Solidの国際化のためのコンテキストプロバイダーとフックを提供します。

    • vite-intlayer IntlayerをViteバンドラーと統合するためのViteプラグイン、およびユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアを含みます。

    ステップ 2: プロジェクトの設定

    アプリケーションの言語を設定するための設定ファイルを作成します:

    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;

    この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

    ステップ3: Vite設定にIntlayerを統合する

    intlayerプラグインを設定に追加します。

    vite.config.ts
    import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayerPlugin()],});

    ステップ 3: Vite 設定に Intlayer を統合する

    intlayer プラグインを設定に追加します。

    vite.config.ts
    import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayerPlugin()],});

    intlayerPlugin() は Vite プラグインで、Intlayer を Vite に統合するために使用されます。コンテンツ宣言ファイルのビルドを保証し、開発モードでそれらを監視します。Vite アプリケーション内で Intlayer の環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。

    ステップ 4: コンテンツを宣言する

    翻訳を格納するためのコンテンツ宣言を作成および管理します。

    src/app.content.tsx
    import { t, type Dictionary } from "intlayer";tsx fileName="src/app.content.tsx" contentDeclarationFormat="typescript"import { t, type Dictionary } from "intlayer";const appContent = {  key: "app",  content: {},} satisfies Dictionary;export default appContent;

    コンテンツ宣言は、アプリケーション内のどこにでも定義できます。contentDir ディレクトリ(デフォルトは ./src)に含まれている限り有効です。また、コンテンツ宣言ファイルの拡張子は(デフォルトで .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx})に一致している必要があります。

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

    ステップ5: Intlayerをコードで利用する

    [未完]

    (オプション)ステップ6: コンテンツの言語を変更する

    [未完]

    (オプション)ステップ7: アプリケーションにローカライズされたルーティングを追加する

    [未完]

    (オプション)ステップ8: ロケール変更時にURLを変更する

    [未完]

    (オプション)ステップ9: HTMLの言語属性と言語方向属性を切り替える

    [to complete]

    (オプション)ステップ10:ローカライズされたリンクコンポーネントの作成

    [to complete]

    Git設定

    Intlayerによって生成されたファイルは、Gitリポジトリにコミットしないように無視することを推奨します。

    これを行うには、.gitignoreファイルに以下の指示を追加してください。

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

    VS Code拡張機能

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

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

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

    • 翻訳キーのオートコンプリート
    • 欠落している翻訳のリアルタイムエラー検出
    • 翻訳されたコンテンツのインラインプレビュー
    • 翻訳を簡単に作成・更新するためのクイックアクション

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


    さらに進むために

    さらに進みたい場合は、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。


    ドキュメント履歴

    • 5.5.10 - 2025-06-29: 履歴の初期化
    Intlayerの今後のリリースに関する通知を受け取る