Intlayerを使用してAngular 21（Vite）Webサイトを翻訳する | 国際化（i18n）

目次

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

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

AngularアプリケーションでIntlayerをセットアップするためのステップバイステップガイド

GitHubでアプリケーションテンプレートを参照してください。

1. 1

   依存関係のインストール

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

   bash

   コンテンツをコピー

   コードをコピー

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

   npx intlayer init --interactive
   

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

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

   bash

   コンテンツをコピー

   コードをコピー

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

   npm install intlayer angular-intlayer
   npm install @angular-builders/custom-esbuild --save-dev
   

   • intlayer

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

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

   • @angular-builders/custom-esbuild Angular CLIのesbuild構成をカスタマイズするために必要です。

2. 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、ミドルウェアのリダイレクト、Cookie名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメーターの完全なリストについては、設定ドキュメントを参照してください。

3. 3

   Angular構成へのIntlayerの統合

   IntlayerをAngular CLIと統合するには、カスタムビルダーを使用する必要があります。このガイドでは、Vite/esbuild（Angular 21プロジェクトのデフォルト）を使用していることを前提としています。

   まず、カスタムesbuildビルダーを使用するようにangular.jsonを変更します。buildとserveの構成を更新します：

   angular.json

   コンテンツをコピー

   コードをコピー

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

   {
     "projects": {
       "your-app-name": {
         "architect": {
           "build": {
             "builder": "@angular-builders/custom-esbuild:application", // replace "@angular/build:application"
             "options": {
               "define": {
                 "process.env": "{}",
               },
               "plugins": ["./esbuild.plugins.ts"],
               "browser": "src/main.ts",
               // ...
             },
           },
           "serve": {
             "builder": "@angular-builders/custom-esbuild:dev-server", // replace "@angular/build:dev-server"
             "options": {
               "prebundle": {
                 "exclude": [
                   "intlayer",
                   "angular-intlayer",
                   "@intlayer/config/built",
                   "@intlayer/core"
                 ]
             },
           },
         },
       },
     },
   }
   

   angular.json内のyour-app-nameをプロジェクトの実際のプロジェクト名に置き換えることを忘れないでください。

   次に、プロジェクトのルートにesbuild.plugins.tsファイルを作成します：

   esbuild.plugins.ts

   コンテンツをコピー

   コードをコピー

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

   import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";
   
   export default [intlayerEsbuildPlugin()];
   

   intlayerEsbuildPlugin関数はesbuildにIntlayerを設定します。コンテンツ宣言ファイルを処理するプラグインを注入し、最適なパフォーマンスのためのエイリアスを設定します。

   NX ユーザー: NX の Angular ビルダーは、Node のネイティブ ESM 解決を介してプラグインファイルをロードし、TypeScript プラグインファイルをその場でコンパイルしません。代わりに .mjs ファイルを使用し、それに応じて angular.json の plugins 参照を更新してください：

   esbuild.plugins.mjs

   コンテンツをコピー

   コードをコピー

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

   import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";
   
   export default [intlayerEsbuildPlugin()];
   

   その後、angular.json で "./esbuild.plugins.ts" の代わりに "./esbuild.plugins.mjs" を指定します。

4. 4

   コンテンツの宣言

   翻訳を保存するためにコンテンツ宣言を作成および管理します：

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

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

5. 5

   コードでIntlayerを活用する

   Angularアプリケーション全体でIntlayerの国際化機能を活用するには、アプリケーションの構成でIntlayerを提供する必要があります。

   src/app/app.config.ts

   コンテンツをコピー

   コードをコピー

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

   import { ApplicationConfig } from "@angular/core";
   import { provideRouter } from "@angular/router";
   import { provideIntlayer } from "angular-intlayer";
   import { routes } from "./app.routes";
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideRouter(routes),
       provideIntlayer(), // ここにIntlayerプロバイダを追加します
     ],
   };
   

   次に、任意のコンポーネント内でuseIntlayer機能を使用できます。

   src/app/app.component.ts

   コンテンツをコピー

   コードをコピー

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

   import { Component } from "@angular/core";
   import { RouterOutlet } from "@angular/router";
   import { useIntlayer } from "angular-intlayer";
   
   @Component({
     selector: "app-root",
     standalone: true,
     imports: [RouterOutlet],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
   })
   export class AppComponent {
     content = useIntlayer("app");
   }
   

   そして、テンプレートでは：

   src/app/app.component.html

   コンテンツをコピー

   コードをコピー

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

   <div class="content">
     <h1>{{ content().title }}</h1>
     <p>{{ content().congratulations }}</p>
   </div>
   

   IntlayerのコンテンツはSignalとして返されるため、シグナルを呼び出すことで値にアクセスします：content().title。

6. 6

   コンテンツの言語を変更する

   コンテンツの言語を変更するには、useLocale関数によって提供されるsetLocale関数を使用できます。これにより、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。

   言語を切り替えるためのコンポーネントを作成します：

   src/app/locale-switcher.component.ts

   コンテンツをコピー

   コードをコピー

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

   import { Component } from "@angular/core";
   import { CommonModule } from "@angular/common";
   import { useLocale } from "angular-intlayer";
   
   @Component({
     selector: "app-locale-switcher",
     standalone: true,
     imports: [CommonModule],
     template: `
       <div class="locale-switcher">
         <select
           [value]="locale()"
           (change)="setLocale($any($event.target).value)"
         >
           @for (loc of availableLocales; track loc) {
             <option [value]="loc">{{ loc }}</option>
           }
         </select>
       </div>
     `,
   })
   export class LocaleSwitcherComponent {
     localeCtx = useLocale();
   
     locale = this.localeCtx.locale;
     availableLocales = this.localeCtx.availableLocales;
     setLocale = this.localeCtx.setLocale;
   }
   

   次に、このコンポーネントをapp.component.tsで使用します：

   src/app/app.component.ts

   コンテンツをコピー

   コードをコピー

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

   import { Component } from "@angular/core";
   import { RouterOutlet } from "@angular/router";
   import { useIntlayer } from "angular-intlayer";
   import { LocaleSwitcherComponent } from "./locale-switcher.component";
   
   @Component({
     selector: "app-root",
     standalone: true,
     imports: [RouterOutlet, LocaleSwitcherComponent],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
   })
   export class AppComponent {
     content = useIntlayer("app");
   }
   

TypeScriptの設定

Intlayerは、TypeScriptの利便性を高め、コードベースをより堅牢にするためにモジュール拡張を使用します。

TypeScript構成に自動生成された型が含まれていることを確認してください。

{
  // ... 既存のTypeScript構成
  "include": [
    // ... 既存のTypeScript構成
    ".intlayer/**/*.ts", // 自動生成された型を含める
  ],
}

Gitの設定

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

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

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

VS Code拡張機能

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

VS Code Marketplaceからインストール

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

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

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

さらに進む

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

よくある質問