アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツコードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。

AI エージェント

コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツールスイートも付属しています。および エージェントスキル により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。

オートメーション

AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォームも提供します。

パフォーマンス

大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。

非開発によるスケーリング

Intlayer は単なる i18n ソリューションではなく、自己ホスト型ビジュアルエディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。

AnalogアプリケーションへのIntlayerセットアップ手順

GitHubでアプリケーションテンプレートを確認する。

1
依存関係のインストール

npmを使用して必要なパッケージをインストールします：
bash
コードをコピー
コードをクリップボードにコピー
npm install intlayer angular-intlayer vite-intlayernpx intlayer init
npm install intlayer angular-intlayer vite-intlayernpx intlayer init
- intlayer
  
  設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージ。
- angular-intlayer IntlayerをAngularアプリケーションと統合するパッケージ。Angularの国際化のためのコンテキストプロバイダーとフックを提供します。
- vite-intlayer IntlayerをViteと統合するパッケージ。コンテンツ宣言ファイルを処理するプラグインを提供し、最適なパフォーマンスのためのエイリアスを設定します。
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ログの無効化などが可能です。利用可能なパラメータの全リストについては、設定ドキュメントを参照してください。

Vite設定へのIntlayerの統合

AnalogとIntlayerを統合するには、vite-intlayerプラグインを使用する必要があります。

vite.config.tsファイルを修正します：

vite.config.ts

コードをコピー

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

import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import analog from "@analogjs/platform";// https://vitejs.dev/config/export default defineConfig(() => ({  plugins: [    analog(),    intlayer(), // Intlayerプラグインを追加  ],}));

import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import analog from "@analogjs/platform";// https://vitejs.dev/config/export default defineConfig(() => ({  plugins: [    analog(),    intlayer(), // Intlayerプラグインを追加  ],}));

intlayer()プラグインは、Intlayerを使用してViteを設定します。コンテンツ宣言ファイルを処理し、最適なパフォーマンスのためのエイリアスを設定します。

コンテンツの宣言

翻訳を保存するためのコンテンツ宣言を作成・管理します：

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

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

コード内でのIntlayerの利用

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

src/app/app.config.ts

コードをコピー

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

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

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

その後、任意のコンポーネント内でuseIntlayer関数を使用できます。

src/app/pages/index.page.ts

コードをコピー

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

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-home",  standalone: true,  template: `    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-home",  standalone: true,  template: `    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

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

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

オプション

コンテンツの言語を変更するには、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;}

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;}

次に、このコンポーネントをページで使用します：

src/app/pages/index.page.ts

コードをコピー

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

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "../locale-switcher.component";@Component({  selector: "app-home",  standalone: true,  imports: [LocaleSwitcherComponent],  template: `    <app-locale-switcher></app-locale-switcher>    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "../locale-switcher.component";@Component({  selector: "app-home",  standalone: true,  imports: [LocaleSwitcherComponent],  template: `    <app-locale-switcher></app-locale-switcher>    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

TypeScriptの設定

Intlayerは、TypeScriptの利点を活かしてコードベースを強力にするためにモジュール拡張を使用します。

Autocompletion

Translation error

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

tsconfig.json

コードをコピー

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

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

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

Gitの設定

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

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

bash

コードをコピー

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

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

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

VS Code拡張機能

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

VS Code Marketplaceからインストール

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

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

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

Angular 19 (Webpack)

React CRA

バージョン履歴

Intlayerを使用したAnalog (Angular) アプリの翻訳 | 国際化 (i18n)

目次

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

AnalogアプリケーションへのIntlayerセットアップ手順

依存関係のインストール

プロジェクトの設定

Vite設定へのIntlayerの統合

コンテンツの宣言

コード内でのIntlayerの利用

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

TypeScriptの設定

Gitの設定

VS Code拡張機能