Angular 9 で導入されたグローバルな $localize() 関数とは？

Angular 9 で導入されたグローバルな $localize() 関数とは？

従来の i18n メカニズムでは、翻訳対象の文字列を特殊な構文で囲む必要がありました。しかし、$localize() 関数を使用すると、より自然な書き方で翻訳対象の文字列を指定することができます。

$localize() 関数の利点

• より自然なテンプレート記述
• 翻訳対象の文字列の視認性向上
• コードの簡潔化

$localize() 関数の使い方

<p>ようこそ、{{ name }} さん！</p>

上記の例では、{{ name }} が翻訳対象の文字列としてマークされています。$localize() 関数は、この文字列を翻訳後の文字列に置き換えます。

翻訳後の文字列は、翻訳ファイルに定義されます。例えば、日本語の場合は以下のように翻訳ファイルを定義します。

{
  "WELCOME": "ようこそ、{{ name }} さん！"
}

$localize() 関数は、翻訳ファイルのキーと翻訳対象の文字列を一致させて、翻訳後の文字列を返します。

$localize() 関数を利用するには、以下の手順が必要です。

1. @angular/localize パッケージをインストールする。
2. polyfills.ts ファイルに import '@angular/localize'; を追加する。
3. 翻訳対象の文字列を $localize() 関数でマークする。
4. 翻訳ファイルを定義する。

Angular 9 で導入された $localize() 関数は、i18n の処理をより容易にし、テンプレート記述をより自然にする強力なツールです。i18n を必要とする Angular アプリケーション開発において、積極的に活用することをおすすめします。

Angular 9 で $localize() 関数を利用したサンプルコード

app.component.html

<p>ようこそ、{{ $localize('WELCOME', { name: user.name }) }} さん！</p>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = {
    name: '田中 太郎'
  };
}

messages.json

{
  "WELCOME": "ようこそ、{{ name }} さん！"
}

このコードでは、app.component.html ファイルで $localize() 関数を使用して、WELCOME という翻訳キーと user.name という変数を指定して翻訳対象の文字列をマークしています。

app.component.ts ファイルでは、user というオブジェクトを定義し、その中に name というプロパティにユーザーの名前を設定しています。

messages.json ファイルには、WELCOME という翻訳キーと翻訳後の文字列を定義しています。

実行時に、$localize() 関数は messages.json ファイルの翻訳キーと一致する翻訳後の文字列を返します。そして、翻訳対象の文字列と翻訳後の文字列を結合して、テンプレートに挿入します。

この例は、$localize() 関数の基本的な使い方を示しています。実際のアプリケーションでは、より複雑な翻訳処理を行うことも可能です。

• 翻訳対象の文字列にフォーマットを適用する
• 複数形の翻訳に対応する
• HTML タグを含む翻訳を行う

これらのサンプルコードは、以下のサイトなどで参照することができます。

$localize() 関数は、Angular 9 で導入された強力な i18n ツールです。この関数を活用することで、i18n の処理をより容易にし、テンプレート記述をより自然にすることができます。

サンプルコードを参考に、ぜひ $localize() 関数を使いこなして、国際対応の Angular アプリケーション開発を進めてください。

Angular 9 で翻訳を実現するその他の方法

ngx-translate は、Angular 向けのオープンソースの翻訳ライブラリです。$localize() 関数よりも多くの機能を提供しており、複雑な翻訳処理にも対応できます。

• 利点
  • 多くの機能を備えている
  • 複雑な翻訳処理に対応できる
• 欠点

ICU メッセージフォーマットは、複数形の翻訳や性別による翻訳など、複雑な翻訳を記述するためのフォーマットです。

• 利点
• 欠点

カスタムパイプを使用して、翻訳処理を独自に実装することもできます。

• 利点
• 欠点

どの方法を選択するかは、プロジェクトの要件や開発者のスキルによって異なります。

• シンプルな翻訳であれば、$localize() 関数で十分でしょう。
• 複雑な翻訳が必要であれば、ngx-translate や ICU メッセージフォーマットを使用することを検討しましょう。
• 完全な柔軟性が必要であれば、カスタムパイプを使用しましょう。

以下は、各方法の比較表です。

Angular 9 で翻訳を実現するには、様々な方法があります。それぞれの方法の利点と欠点を理解し、プロジェクトの要件に合った方法を選択することが重要です。