今日の広大なデジタル世界では、Web 開発者は世界中の視聴者とつながることを目指しています。これを達成するための重要な戦略は、Angular アプリケーションを多言語エクスペリエンスに変換することです。国際化 (i18n) へようこそ。ユーザーがどこにいても、アプリはユーザーの母国語で通信できます。このブログでは、i18n を Angular プロジェクトに統合して、アプリが世界中の人々にとってアクセス可能でユーザーフレンドリーであることを保証する方法について詳しく説明します。

Angular での国際化 (i18n) の概要

Web アプリが世界中のユーザーをつなぐ架け橋であると想像してください。すべての人にとって歓迎的でユーザーフレンドリーなエクスペリエンスを生み出すには、彼らの言語でコミュニケーションすることが不可欠です。国際化 (i18n) は、アプリをさまざまな言語や地域に適応させるための鍵です。 Angular は、これを達成するための強力なツールと機能を提供します。

新しい Angular プロジェクトのセットアップ

i18n の旅を始める前に、新しい Angular プロジェクトを作成しましょう。

ng new i18n-app

次のコマンドを使用して、Angular CLI を使用して新しい Angular プロジェクトを開始できます。セットアップ プロセス中に、Angular ルーティングの有効化やスタイルシート形式 (CSS、SCSS など) の選択などのオプションを含むプロジェクトを構成できます。プロジェクトの要件に一致する設定を選択してください。

Angular の i18n ツールのインストールと構成

1. i18n の旅を始めるには、適切なツールが必要です。アプリを多言語にするために、Angular の i18n ツールをインストールしてセットアップします。

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

1. ngx-translate がインストールされたら、それを Angular モジュールまたは構成にインポートし、翻訳サービスをセットアップできます。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.config ファイルを使用している場合は、NgModule を次のコードに置き換えるだけです:

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ApplicationConfig, importProvidersFrom } from '@angular/core';

export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom([
            BrowserModule,
            HttpClientModule,
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient],
                },
            }),
        ])
    ]
}

このコードでは、必要な ngx-translate モジュールをインポートし、HttpLoaderFactory 関数を使用して翻訳ローダーを構成します。 HttpLoaderFactory 関数は、HttpClient モジュールを使用して、サーバーから翻訳ファイルを非同期に読み込みます。

翻訳ファイルの作成

翻訳サービスを設定したら、サポートしたい言語ごとに翻訳ファイルを作成できます。翻訳ファイルは、キーを翻訳された文字列にマップする JSON ファイルです。

必要な言語コードを名前としてファイルを作成し、翻訳を追加します。

たとえば、英語の翻訳ファイルは次のとおりです:

{
  "title": "My App",
  "greeting": "Hello, {{name}}!"
}

そして、これがドイツ語の翻訳ファイルです:

{
  "title": "Meine App",
  "greeting": "Hallo, {{name}}!"
}

フォルダー構造とファイル名は次のとおりです。

注: 翻訳ファイルは同じキーを使用しますが、言語ごとに異なる値を使用します。これにより、コードを変更することなく、アプリケーションでの言語間の切り替えが簡素化されます。

テンプレートでの翻訳の使用

翻訳ファイルの準備ができたら、それを Angular テンプレートに統合できます。最初のステップは、翻訳サービスをコンポーネントに挿入することです:

App.component.ts :

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private translate: TranslateService) {
    // Set the default language
    translate.setDefaultLang('EN');
  }

  translateLanguage(lang: string) {
    // Set the current language
    this.translate.use(lang);
  }
}

このコードでは、TranslateService をコンポーネントに挿入し、英語をデフォルト言語として設定します。また、アプリケーションの言語を変更できるようにするTranslateLanguage メソッドも定義します。

言語翻訳用のコンポーネントを作成する

ng g c LanguageTranslation

コンポーネントを作成した後、翻訳サービスを利用して複数の言語間で翻訳できます。

LanguageTranslation.component.ts

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language-translator'
})

export class LanguageTranslationComponent {
constructor(private translate: TranslateService) {}

TranslateToEnglish() {
  this.translate.use('En');
}

TranslateToGerman() {
  this.translate.use('DE');
 }
}

LanguageTranslation.component.html

{{ "title" | translate }}


    English
    German

このコードでは、TranslateService を挿入し、英語とドイツ語を切り替えるための 2 つのボタンを提供する LanguageTranslationComponent を作成します。ボタンがクリックされると、適切な言語コードを使用して TranslateService の translationLanguage メソッドを呼び出します。

注: this.translate.use('DE') を使用する場合は、大文字と小文字が区別されるため、正しい言語コードを使用し、ファイル名が正確であることを確認してください。

結論：

国際化は現代のソフトウェア開発の重要な要素であり、Angular は多言語アプリケーションを作成するための強力なツールを提供します。 ngx-translate ライブラリを使用すると、Angular での i18n の実装がより簡単になり、適応性も高まります。

この記事では、ngx-translate を使用して翻訳ファイルを生成し、テンプレートに翻訳を適用し、Angular アプリケーション内で言語を切り替える方法について説明しました。これらのガイドラインに従うことで、世界中のユーザーがアクセスできる多言語アプリを簡単に構築できます。

ありがとう！

ご質問がございましたら、お気軽にコメントを残してください