Intlayer と Vite と Svelte で国際化（i18n）を始める

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

Intlayerとは？

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

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

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

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

ステップ1: 依存パッケージのインストール

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

npm install intlayer svelte-intlayernpm install vite-intlayer --save-dev

• intlayer

• intlayer

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

• svelte-intlayer

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

• vite-intlayer

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

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

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

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プラグインを追加します。

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: コンテンツを宣言する

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

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の言語属性と方向属性を切り替える

[未完了]

（オプション）ステップ10: ローカライズされたリンクコンポーネントを作成する

[未完了]

Gitの設定

Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。

これを行うには、以下の指示を .gitignore ファイルに追加できます。

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

VS Code 拡張機能

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

VS Code Marketplace からインストール

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

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

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

さらに進むには

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

ドキュメント履歴

• 5.5.10 - 2025-06-29: 履歴の初期化