このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid useIntlayer APIのプロパティへの直接アクセスへの変更"v8.9.02026/5/4
- "安定版リリース"v8.0.02026/1/26
- "initコマンドの追加"v8.0.02025/12/30
- "初期履歴"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
Intlayerを使用してAngular 21（Vite）Webサイトを翻訳する | 国際化（i18n）
目次
Intlayerとは？
Intlayerは、現代のWebアプリケーションにおける多言語サポートを簡素化するために設計された、革新的なオープンソースの国際化（i18n）ライブラリです。
Intlayerを使用すると、次のことができます：
- コンポーネントレベルで宣言型辞書を使用して翻訳を簡単に管理。
- メタデータ、ルート、コンテンツを動的にローカライズ。
- 自動生成された型でTypeScriptサポートを保証し、オートコンプリートとエラー検出を改善。
- 動的なロケール検出や切り替えなどの高度な機能を活用。
AngularアプリケーションでIntlayerをセットアップするためのステップバイステップガイド
GitHubでアプリケーションテンプレートを参照してください。
ステップ1：依存関係のインストール
npmを使用して必要なパッケージをインストールします：
コードをクリップボードにコピー
npm install intlayer angular-intlayernpm install @angular-builders/custom-esbuild --save-devnpx intlayer initintlayer
angular-intlayer IntlayerをAngularアプリケーションに統合するパッケージ。Angularの国際化のためのコンテキストプロバイダとフックを提供します。
@angular-builders/custom-esbuild Angular CLIのesbuild構成をカスタマイズするために必要です。
ステップ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、ミドルウェアのリダイレクト、Cookie名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメーターの完全なリストについては、設定ドキュメントを参照してください。
ステップ3：Angular構成へのIntlayerの統合
IntlayerをAngular CLIと統合するには、カスタムビルダーを使用する必要があります。このガイドでは、Vite/esbuild（Angular 21プロジェクトのデフォルト）を使用していることを前提としています。
まず、カスタムesbuildビルダーを使用するようにangular.jsonを変更します。buildとserveの構成を更新します：
コードをクリップボードにコピー
{ "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ファイルを作成します：
コードをクリップボードにコピー
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：コンテンツの宣言
翻訳を保存するためにコンテンツ宣言を作成および管理します：
コンテンツ宣言は、contentDirディレクトリ（デフォルトでは./src）に含まれている限り、アプリケーション内のどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトでは.content.{json,ts,tsx,js,jsx,mjs,cjs}）と一致している必要があります。
詳細については、コンテンツ宣言のドキュメントを参照してください。
ステップ5：コードでIntlayerを活用する
Angularアプリケーション全体でIntlayerの国際化機能を活用するには、アプリケーションの構成でIntlayerを提供する必要があります。
コードをクリップボードにコピー
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機能を使用できます。
コードをクリップボードにコピー
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");}そして、テンプレートでは：
コードをクリップボードにコピー
<div class="content"> <h1>{{ content().title }}</h1> <p>{{ content().congratulations }}</p></div>IntlayerのコンテンツはSignalとして返されるため、シグナルを呼び出すことで値にアクセスします：content().title。
（オプション）ステップ6：コンテンツの言語を変更する
コンテンツの言語を変更するには、useLocale関数によって提供される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;}次に、このコンポーネントを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によって生成されたファイルを無視.intlayerVS Code拡張機能
Intlayerでの開発エクスペリエンスを向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。
この拡張機能は次を提供します：
- 翻訳キーのオートコンプリート。
- 欠落している翻訳のリアルタイムエラー検出。
- 翻訳されたコンテンツのインラインプレビュー。
- 翻訳を簡単に作成および更新するためのクイックアクション。
拡張機能の使い方の詳細については、Intlayer VS Code拡張機能のドキュメントを参照してください。
さらに進む
さらに進むには、ビジュアルエディターを実装したり、CMSを使用してコンテンツを外部化したりできます。