Intlayerを使用してAngular 19 (Webpack)ウェブサイトを翻訳する | 国際化 (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-webpack --save-dev
   

   • intlayer

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

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

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

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

3. 3

   Angular構成へのIntlayerの統合

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

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

   angular.json

   コンテンツをコピー

   コードをコピー

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

   {
     "projects": {
       "your-app-name": {
         "architect": {
           "build": {
             "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",
             "options": {
               "customWebpackConfig": {
                 "path": "./webpack.config.ts",
                 "mergeStrategies": { "module.rules": "prepend" },
               },
               "main": "src/main.ts", // replace "browser": "src/main.ts",
               // ...
             },
           },
           "serve": {
             "builder": "@angular-builders/custom-webpack:dev-server",
           },
         },
       },
     },
   }
   

   angular.json 内の your-app-name を実際のプロジェクト名に置き換えてください。

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

   webpack.config.ts

   コンテンツをコピー

   コードをコピー

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

   import { mergeConfig } from "angular-intlayer/webpack";
   
   export default mergeConfig({});
   

   mergeConfig 関数は、Intlayerを使用してWebpackを構成します。IntlayerPlugin（コンテンツ宣言ファイルを処理するため）を注入し、最適なパフォーマンスのためのエイリアスを設定します。

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はモジュール拡張（Module Augmentation）を使用して、TypeScriptの利点を活用し、コードベースをより強力にします。

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

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

Git構成

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

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

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

VS Code拡張機能

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

VS Code Marketplaceからインストール

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

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

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

さらに詳しく

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

よくある質問