このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "initコマンドを追加"v8.0.02025/12/30
- "履歴の初期化"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るこのドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンクドキュメントのMarkdownをクリップボードにコピー
Intlayerを使用してAngular 19 (Webpack)ウェブサイトを翻訳する | 国際化 (i18n)
目次
Intlayerとは？
Intlayer は、最新のウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
Intlayerを使用すると、以下のことが可能です：
- 翻訳を簡単に管理: コンポーネントレベルの宣言型辞書を使用します。
- メタデータ、ルート、コンテンツを動的にローカライズ。
- TypeScriptサポートを確保: 自動生成された型により、オートコンプリートとエラー検出が向上します。
- 高度な機能の活用: 動的なロケール検出や切り替えなど。
AngularアプリケーションにIntlayerをセットアップするためのステップバイステップガイド
GitHubで アプリケーションテンプレート を確認する。
ステップ 1: 依存関係のインストール
npmを使用して必要なパッケージをインストールします：
コードをクリップボードにコピー
npm install intlayer angular-intlayernpm install @angular-builders/custom-webpack --save-devnpx intlayer initintlayer
構成管理、翻訳、コンテンツ宣言、トランスパイル、および CLIコマンド のための国際化ツールを提供するコアパッケージです。
angular-intlayer IntlayerをAngularアプリケーションと統合するパッケージです。Angularの国際化のためのコンテキストプロバイダーとフックを提供します。
@angular-builders/custom-webpack Angular CLIのWebpack構成をカスタマイズするために必要です。
ステップ 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: Angular構成へのIntlayerの統合
IntlayerをAngular CLIと統合するには、カスタムビルダーを使用する必要があります。このガイドでは、Webpack（多くのAngularプロジェクトのデフォルト）を使用していることを前提としています。
まず、カスタムWebpackビルダーを使用するように angular.json を変更します。build および serve の構成を更新します：
コードをクリップボードにコピー
{ "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 ファイルを作成します：
コードをクリップボードにコピー
import { mergeConfig } from "angular-intlayer/webpack";export default mergeConfig({});mergeConfig関数は、Intlayerを使用してWebpackを構成します。IntlayerPlugin（コンテンツ宣言ファイルを処理するため）を注入し、最適なパフォーマンスのためのエイリアスを設定します。
ステップ 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はモジュール拡張（Module Augmentation）を使用して、TypeScriptの利点を活用し、コードベースをより強力にします。
TypeScript構成に自動生成された型が含まれていることを確認してください。
コードをクリップボードにコピー
{ // ... 既存のTypeScript構成 "include": [ // ... 既存のTypeScript構成 ".intlayer/**/*.ts", // 自動生成された型を含める ],}Git構成
Intlayerによって生成されたファイルは無視することをお勧めします。これにより、それらをGitリポジトリにコミットすることを避けることができます。
これを行うには、.gitignore ファイルに以下の指示を追加します：
コードをクリップボードにコピー
# Intlayerによって生成されたファイルを無視.intlayerVS Code拡張機能
Intlayerでの開発体験を向上させるために、公式の Intlayer VS Code Extension をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーの オートコンプリート。
- 翻訳漏れの リアルタイムエラー検出。
- 翻訳済みコンテンツの インラインプレビュー。
- 翻訳を簡単に作成・更新するための クイックアクション。
拡張機能の使用方法の詳細については、Intlayer VS Code Extension ドキュメント を参照してください。
さらに詳しく
さらに詳しく知るには、ビジュアルエディター を実装するか、CMS を使用してコンテンツを外部化することができます。