Angularアプリケーションをi18n対応するときに選択すべき方法とは何か

2023-06-20

Angularアプリケーションをi18n対応するときに選択すべき方法とは何か

記事をシェアする

[！] この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

i18n とは

"internationalization"(国際化)の略で、アプリケーションを様々な言語や文化に合わせて利用できるように改良することを i18n といいます。
単にテキストを翻訳するだけでなく、日付、通貨単位や重さなどの単位、縦書きか横書きかなど様々なことを考慮に入れないといけません。
国際化は、Angular アプリケーションを実装する際、ぜひとも取り入れたい要件の一つではありますが、国際化を実装するにあたり、単純な方法はなく、様々な要因からベストな実装方法を模索していくことになります。
国際化を実現するには主に 2 つの方法があります。今回は Angular でそれぞれの方法の中で人気のライブラリについて、いくつかピックアップしてご紹介していきます。

この記事の対象者

Angular の基礎を理解している方
国際化対応をする際、選択肢が多くてお困りの方

本記事で使用している開発環境

Angular：16.0.2
OS： Windows 11 Pro

i18n を実現する２つの方法

コンパイル時変換

コンパイル時に変換する必要があるすべての文字列を置換する方法
メリット
- すべての変換はコンパイル時に事前に置換されるため、アプリケーションの実行時にパフォーマンスの低下を気にする必要がない
デメリット
- 変換したい言語の数だけ成果物をビルドする必要がある。動的に言語選択したいときは、選択した言語の成果物に切り替える必要があるため、実行時変換に比べて Web サーバの構成や、ルーティングが複雑になりやすい

compile

実行時変換

アプリケーションの実行時に変換を行う方法
予め用意した翻訳ファイルをアプリケーション実行時に読み込むことで動的に変換を行う
メリット
- アプリケーションの構成が国際化対応する前と比べて複雑になりづらい
デメリット
- アプリケーション実行時に翻訳ファイルをロードすることになるので、http 通信が発生してしまう
- 規模が大きいアプリケーションほど、動的変換によるパフォーマンス低下の影響を受ける

runtime

コンパイル時変換の代表的なライブラリ

@angular/localize

Angular 組み込みの公式ライブラリ
メリット
- 現時点で Angular i18n ライブラリでは最も人気があり、公式ドキュメントや情報が充実している
- Angular の一部であるため、更新頻度がとても高く(少なくとも月一回以上)サポートが手厚い
- pipe を使用した日付のフォーマットや通貨マーク等の動的変換ができる
- コンパイル時変換方式であるため、パフォーマンスの低下を気にする必要がなく、大規模開発向け
デメリット
- 他のライブラリに比べ学習難度が高い
- 変換する場所が増えるたびにファイル生成をし直し、既存のファイルとのマージ作業が発生するためメンテナンス性には難点がある

導入方法

サンプルとして、簡単な購入フォームを作成して日本語 ⇔ 英語の国際化対応をしてみたいと思います。なお、スタイリングの為に Angular Material を使用していますが、そちらの解説は今回は割愛します。下記は今回使用するサンプルコードです。

app.component.ts

1
import { Component, Inject, LOCALE_ID } from "@angular/core";
2

3
@Component({
4
  selector: "app-root",
5
  templateUrl: "./app.component.html",
6
  styleUrls: ["./app.component.css"],
7
})
8
export class AppComponent {
9
  vegetables = [
10
    { name: "トマト", num: 10, shippingTime: "2023/05/24", price: 430 },
11
    { name: "ブロッコリー", num: 20, shippingTime: "2023/05/23", price: 355 },
12
    { name: "じゃがいも", num: 3, shippingTime: "2023/05/25", price: 150 },
13
    { name: "人参", num: 5, shippingTime: "2023/05/22", price: 160 },
14
    { name: "ピーマン", num: 10, shippingTime: "2023/05/23", price: 470 },
15
    { name: "キャベツ", num: 20, shippingTime: "2023/05/24", price: 170 },
16
  ];
17

18
  arrayNumberLength(number: number): any[] {
19
    return [...Array(number)];
20
  }
21
}

app.component.html

1
<mat-toolbar color="primary">
2
  <span>i18n sample app</span>
3
  <span class="example-spacer"></span>
4
</mat-toolbar>
5

6
<div class="content">
7
  <ng-container *ngFor="let vagetable of vegetables">
8
    <mat-card class="card">
9
      <mat-card-header class="card-header">
10
        <mat-card-title>{{vagetable.name}}</mat-card-title>
11
      </mat-card-header>
12
      <mat-card-content>
13
        <span>出荷数：{{vagetable.num}} kg</span>
14
      </mat-card-content>
15
      <mat-card-content>
16
        <span>出荷日：{{vagetable.shippingTime | date:'yyyy年MM月dd日'}}</span>
17
      </mat-card-content>
18
      <mat-card-content>
19
        <span>値段(kg)：{{vagetable.price | currency:'JPY'}} 円</span>
20
      </mat-card-content>
21
      <mat-card-content>
22
        <mat-form-field>
23
          <mat-label>購入数(kg)</mat-label>
24
          <mat-select>
25
            <mat-option
26
              *ngFor="let num of arrayNumberLength(vagetable.num); index as i"
27
              [value]="i"
28
            >
29
              {{i + 1}}kg
30
            </mat-option>
31
          </mat-select>
32
        </mat-form-field>
33
      </mat-card-content>
34
      <mat-card-content class="card-content">
35
        <button mat-flat-button color="accent" type="submit">buy</button>
36
      </mat-card-content>
37
    </mat-card>
38
  </ng-container>
39
</div>

app.component.css

1
.example-spacer {
2
  flex: 1 1 auto;
3
}
4
.content {
5
  display: flex;
6
  flex-direction: row;
7
  flex-wrap: wrap;
8
}
9
.card {
10
  width: 400px;
11
  margin: 3rem auto;
12
}
13
.card-header {
14
  display: flex;
15
  justify-content: center;
16
  padding: 1rem;
17
}
18
.card-content {
19
  display: flex;
20
  flex-direction: column;
21
}

localize1

まず、プロジェクトに@angular/localize パッケージを追加します。

1
ng add @angular/localize

@anuglar/localize では変換した言語ファイルで ng serve や ng build をするためにはangular.jsonを変更する必要があります。
ここら辺は公式ドキュメントが分かりやすいですが、設定が必要な部分を抜粋して紹介します。

angular.json

1
"projects": {
2
  "angular-i18n-sample": {
3
    // 追加
4
    "i18n": {
5
      "sourceLocale": "en-US",
6
      "locales": {
7
        "ja": {
8
          "translation": "src/locale/messages.ja.json"
9
        },
10
        "en": {
11
          "translation": "src/locale/messages.en.json"
12
        }
13
      }
14
    },
15
  }
16
}
17

18
"build": {
19
  "builder": "@angular-devkit/build-angular:browser",
20
  "options": {
21
    // 追加
22
    "localize": true,
23
  },
24
}
25

26
"build": {
27
  "configurations": {
28
    // 追加
29
    "ja": {
30
      "localize": ["ja"]
31
    },
32
    "en": {
33
      "localize": ["en"]
34
    }
35
  },
36
},
37
"serve": {
38
  "builder": "@angular-devkit/build-angular:dev-server",
39
  "configurations": {
40
    // 追加
41
    "ja": {
42
      "browserTarget": "angular-i18n-sample:build:development,ja"
43
    },
44
    "en": {
45
      "browserTarget": "angular-i18n-sample:build:development,en"
46
    }
47
  },
48
},

ここまでで初期設定は終了です。
次に実際に変換作業に移っていきます。
i18n 属性を使用して、コンポーネントテンプレート内の全てのテキストをマークしていきます。

1
<!--これを-->
2
<span>i18n sample app</span>
3
<!--これに-->
4
<span i18n>i18n sample app</span>

ソースコード内のテキストは $localize とバッククオート文字( ` ) で囲むことで変換できます。

1
// これを
2
name: "トマト";
3
// これに
4
name: $localize`トマト`;

日付のフォーマットも locale によって変更できます。
Angular には pipe というフォーマット機能がありますが、これは locale に対応しています。
今回は pipe を使用して、yyyy年MM月dd日 と固定表示させていますので、カスタムフォーマットをやめて、locale ごとのデフォルトフォーマットにしてみます。

1
<!--これを-->
2
<span>出荷日：{{vagetable.shippingTime | date:'yyyy年MM月dd日'}}</span>
3
<!--これに-->
4
<span>出荷日：{{vagetable.shippingTime | date"}}</span>

一度変換ファイルを出力してみます。このとき、コマンドオプションを追加することで、ソース言語ファイルの場所、フォーマット、ファイル名を指定することができます。

--format (出力ファイルのフォーマットを設定する)
--out-file (出力ファイルのファイル名を設定する)
--output-path (出力先ディレクトリのパスを設定する)

今回は下記で実行してみます。

1
ng extract-i18n --format=json --out-file=messages.en.json --output-path=./src/locale/

localize3

src 配下に locale フォルダが作成され、messages.en.jsonが作成されました。
作成したmessages.en.jsonを確認してみます。

messages.en.json

1
{
2
  "locale": "en-US",
3
  "translations": {
4
    "4620635300831144134": "i18n sample app",
5
    "9214206249205702546": "出荷数：{$INTERPOLATION} kg",
6
    "1295556927564936626": "出荷日：{$INTERPOLATION}",
7
    "7917787923726762220": "値段(kg)：{$INTERPOLATION} 円",
8
    "8717191150242400960": "購入",
9
    "6117368252728179045": "トマト",
10
    "1323480278677303850": "ブロッコリー",
11
    "4074549688188433745": "じゃがいも",
12
    "8335428839579026746": "人参",
13
    "8762090999450365602": "ピーマン",
14
    "4288587544101204934": "キャベツ"
15
  }
16
}

i18n の属性を付けたテキストが json 形式で出力されています。
テキストの key として ID が付けられていますが、このままでは数字の羅列なので分かりづらいです。
カスタム ID を設定してみます。カスタム ID はテンプレートテキストの場合は i18n=@@"カスタムID" で設定することができます

1
<!--これを-->
2
<span i18n>i18n sample app</span>
3
<!--これに-->
4
<span i18n="@@i18n sample app">i18n sample app</span>

ソースコード内のテキストの場合は

1
// これを
2
name: $localize`トマト`;
3
// これに
4
name: $localize`:@@トマト:トマト`;

こうすることでカスタム ID が設定できます。
もう一度変換ファイルを出力してみると

messages.ja.json

1
{
2
  "locale": "en-US",
3
  "translations": {
4
    "i18n sample app": "i18n sample app",
5
    "収穫数": "収穫数：{$INTERPOLATION} kg",
6
    "収穫日": "収穫日：{$INTERPOLATION}",
7
    "値段(kg)": "値段(kg)：{$INTERPOLATION} 円",
8
    "購入数(kg)": "購入数(kg)",
9
    "購入": "購入",
10
    "トマト": "トマト",
11
    "ブロッコリー": "ブロッコリー",
12
    "じゃがいも": "じゃがいも",
13
    "人参": "人参",
14
    "ピーマン": "ピーマン",
15
    "キャベツ": "キャベツ"
16
  }
17
}

自分で付与したカスタム ID で出力できました。
後はこちらの変換ファイルを変換したい言語に書き換えます。

1
{
2
  "locale": "en-US",
3
  "translations": {
4
    "i18n sample app": "i18n sample app",
5
    "収穫数": "Harvest number：{$INTERPOLATION} kg",
6
    "収穫日": "Harvest day：{$INTERPOLATION}",
7
    "値段(kg)": "price(kg)：{$INTERPOLATION} yen",
8
    "購入数(kg)": "Order(kg)",
9
    "購入": "Buy",
10
    "トマト": "Tomato",
11
    "ブロッコリー": "Broccoli",
12
    "じゃがいも": "Potatoes",
13
    "人参": "Carrot",
14
    "ピーマン": "Green pepper",
15
    "キャベツ": "Cabbage"
16
  }
17
}

書き換えが完了したら実際に変換した画面を表示してみましょう。
言語を英語にするためには下記コマンドで実行します。

1
ng serve --configuration=en

localize2

無事英語化した画面が出力されました。

実際にビルドもしてみます。ビルドする前に忘れずに日本語の変換ファイルも作成しておきます。

1
ng build --localize

dist にen,jaというビルド成果物が配置されました。

localize4

次に web サーバと接続して動的に言語選択できるようにしてみます。

web サーバはここでは golang を使ってみたいと思います。

作成するディレクトリ構成

angular-i18n-sample
  ├─angular-i18n-sample.go
  └─app
      ├─en
      └─ja

golang を公式サイトからインストールしてきたら、angular-i18n-sample.goという go ファイルを作成します。
golang の実装の説明は省きますがサンプルを置いておきます。

angular-i18n-sample.go

1
package main
2

3
import (
4
  "fmt"
5
  "html/template"
6
  "log"
7
  "net/http"
8
)
9

10
func jaHandler(w http.ResponseWriter, r *http.Request) {
11
  html, err := template.ParseFiles("app/ja/index.html")
12
  if err != nil {
13
    log.Fatal(err)
14
  }
15
  if err := html.Execute(w, nil); err != nil {
16
    log.Fatal(err)
17
  }
18
}
19

20
func enHandler(w http.ResponseWriter, r *http.Request) {
21
  html, err := template.ParseFiles("app/en/index.html")
22
  if err != nil {
23
    log.Fatal(err)
24
  }
25
  if err := html.Execute(w, nil); err != nil {
26
    log.Fatal(err)
27
  }
28
}
29

30
func main() {
31
  http.Handle("/", http.StripPrefix("/", http.FileServer(http.Dir("app"))))
32

33
  http.HandleFunc("/ja", jaHandler)
34
  http.HandleFunc("/en", enHandler)
35
  fmt.Println("Golang Server Start...")
36
  log.Fatal(http.ListenAndServe("localhost:8080", nil))
37
}

angular-i18n-sample.goと同じ階層に app フォルダを作成し、先ほどビルドしたen,jaを配置します。ここまで来たら web サーバを立ち上げてみます。

1
go run angular-i18n-sample.go

http://localhost:8080/ja
http://localhost:8080/en

購入フォームが各言語で表示できました。

localize5

localize6

言語選択のボタンを実装してみます。

app.component.html

1
･･･
2
<mat-form-field class="locale">
3
  <mat-select (selectionChange)="onChange()" [(ngModel)]="formLocale">
4
    <mat-option *ngFor="let locale of locales" [value]="locale.code">
5
      {{ locale.name }}
6
    </mat-option>
7
  </mat-select>
8
</mat-form-field>

app.component.ts

1
･･･
2
locales = [
3
  { code: 'en', name: 'English' },
4
  { code: 'ja', name: '日本語' },
5
];
6

7
constructor(
8
  @Inject(LOCALE_ID) public formLocale: string
9
) {}
10

11
onChange() {
12
  window.location.href = `/${this.formLocale}`;
13
}

再度ビルドして web サーバに配置します。

localize7

localize8

動的に変更できるボタンの実装ができました。

実行時変換の代表的なライブラリ

@ngx-translate

標準の方法とともに人気度の高いライブラリ
メリット
- こちらも人気のライブラリなので情報が充実している
- 実装方法自体はシンプルで、学習難度も低い
- 実行時変換手法なので動的な変換も容易に行える
デメリット
- 現在開発段階がメンテナンスモードなため、更新が最低限しか行われていない *2023年6月現在
  - 最新の更新が 2023/5/9
  - 前回の更新が 2021/11/8

導入方法

先ほどのサンプルを初期状態に戻し、次は@ngx-translateを用いて国際化対応してみたいと思います。
まずはパッケージのインストールから始めます。下記のコマンドを実行してください。

1
npm install @ngx-translate/core
2
npm install @ngx-translate/http-loader

次にsrc/app/app.module.tsを下記のように書き換えます。

1
import { NgModule } from "@angular/core";
2
import { AppComponent } from "./app.component";
3
import { BrowserModule } from "@angular/platform-browser";
4
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
5
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
6
import { MatCheckboxModule } from "@angular/material/checkbox";
7
import { MatButtonModule } from "@angular/material/button";
8
import { MatInputModule } from "@angular/material/input";
9
import { MatCardModule } from "@angular/material/card";
10
import { HttpClient, HttpClientModule } from "@angular/common/http";
11
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
12
import {
13
  TranslateLoader,
14
  TranslateModule,
15
  TranslateService,
16
} from "@ngx-translate/core";
17

18
// 追加
19
export function createTranslateLoader(http: HttpClient) {
20
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
21
}
22

23
@NgModule({
24
  declarations: [AppComponent],
25
  imports: [
26
    BrowserModule,
27
    BrowserAnimationsModule,
28
    FormsModule,
29
    ReactiveFormsModule,
30
    MatCheckboxModule,
31
    MatButtonModule,
32
    MatInputModule,
33
    MatCardModule,
34
    // 追加
35
    HttpClientModule,
36
    TranslateModule.forRoot({
37
      loader: {
38
        provide: TranslateLoader,
39
        useFactory: createTranslateLoader,
40
        deps: [HttpClient],
41
      },
42
      defaultLanguage: "ja",
43
    }),
44
  ],
45
  providers: [],
46
  bootstrap: [AppComponent],
47
})
48
export class AppModule {
49
  // 追加
50
  constructor(translate: TranslateService) {
51
    translate.use("en");
52
  }
53
}

ここまでで@ngx-translate の初期設定は終わりです。簡単ですね。では実際に変換作業に移っていきます。

まずは@angular/localize と同じようにテンプレート内のテキストに変換用の属性をつけていきます。 @ngx-translate では translate という属性をつけていきます。
注意点として、translate 属性はbuttonなどの一部タグでは使用できません。 *2023年6月現在
https://github.com/ngx-translate/core/issues/849 ⧉
回避策として、<span>を追加する方法を取ります。

1
<!--これを-->
2
<span>i18n sample app</span>
3
<!--これに-->
4
<span translate>i18n sample app</span>
5

6
<button mat-flat-button color="accent" type="submit">購入</button>
7
<!--span追加-->
8
<button mat-flat-button color="accent" type="submit">
9
  <span translate>購入</span>
10
</button>

動的に言語選択させるには TranslateService を使用します。

app.component.html

1
<mat-form-field class="locale">
2
  <mat-label translate>言語選択</mat-label>
3
  <mat-select (selectionChange)="onChange($event.value)">
4
    <mat-option *ngFor="let locale of locales" [value]="locale.code">
5
      {{ locale.name }}
6
    </mat-option>
7
  </mat-select>
8
</mat-form-field>

app.component.ts

1
import { TranslateService } from '@ngx-translate/core';
2

3
export class AppComponent {
4
  locales = [
5
      { code: 'en', name: 'English' },
6
      { code: 'ja', name: '日本語' },
7
    ];
8

9
  constructor(
10
    // 追加
11
    private translate: TranslateService
12
  ) { }
13

14
  // 書き換え
15
  onChange(lang: string) {
16
    this.translate.use(lang);
17
  }
18
}

変換ファイルも準備します。
src/assets/i18n/ に変換ファイルを json 形式で用意します。
今回は en.json、ja.json を作成します。

en.json

1
{
2
  "i18n sample app": "i18n sample app",
3
  "トマト": "Tomato",
4
  "ブロッコリー": "Broccoli",
5
  "じゃがいも": "Potatoes",
6
  "人参": "Carrot",
7
  "ピーマン": "Green pepper",
8
  "キャベツ": "Cabbage",
9
  "収穫数": "Harvest number",
10
  "収穫日": "Harvest day",
11
  "値段(kg)": "price(kg)",
12
  "購入数(kg)": "Order(kg)",
13
  "購入": "Buy",
14
  "言語選択": "Select Language"
15
}

ja.json

1
{
2
  "i18n sample app": "i18n sample app",
3
  "トマト": "トマト",
4
  "ブロッコリー": "ブロッコリー",
5
  "じゃがいも": "じゃがいも",
6
  "人参": "人参",
7
  "ピーマン": "ピーマン",
8
  "キャベツ": "キャベツ",
9
  "収穫数": "収穫数",
10
  "収穫日": "収穫日",
11
  "値段(kg)": "値段(kg)",
12
  "購入数(kg)": "購入数(kg)",
13
  "購入": "購入",
14
  "言語選択": "言語選択"
15
}

これで変換作業は終了です。ng serveを実行してみると、変換されたログインフォームが確認できます。

translate1

translate2

しかしこのままだと収穫日の日付が動的に変換できていません。
これは@ngx-translateだと pipe を用いた動的変換ができないことに起因しています。
回避策としてはカスタムパイプを実装するか、pipe を使うことをやめて表記を統一するかになると思います。

@ngneat/transloco

2019 年頃に開発された比較的新しいライブラリ
メリット
- 導入方法はシンプル
- コミュニティの開発が活発(少なくともひと月に 1 回以上)
- 選択した言語に対す言語 API や変換したソースに対する変換 API など、機能面が充実している
デメリット
- 情報が少ない

導入方法

まずはパッケージのインストールから。下記コマンドを実行してください。

1
ng add @ngneat/transloco

インストールが始まったら何点か設定に関する質問が表示されます。適宜回答しながら進めてください。今回は変換ファイルとして、英語、日本語の変換ファイルを作成したいので、

1
which languages do you need? ->  en, ja

と回答しました。回答が終わると自動で新しいモジュール(transloco-root.module.ts)と変換ファイル(en.json, ja.json)が作成され、app.module.ts でも、TranslocoRootModule をインポートするよう変更されます。
これで@ngneat/transloco の初期設定は終わりです。

次に実際に変換してみます。

テンプレートテキストの変換方法は *transloco という構造ディレクティブを使用することが推奨されています。

1
<ng-container *transloco="let t">
2
  <p>{{ t('key')}}</p>
3
</ng-container>

というように変換したいテキストの部分を key にして変換ファイルで記述すれば変換結果が出力できます。

app.component.html

1
<ng-container *transloco="let t">
2
  <mat-toolbar color="primary">
3
    <span>{{ t ("i18n sample app")}}</span>
4
    <span class="example-spacer"></span>
5
    <mat-form-field class="locale">
6
      <mat-label>{{ t ("言語選択")}}</mat-label>
7
      <mat-select (selectionChange)="onChange($event.value)">
8
        <mat-option *ngFor="let locale of locales" [value]="locale.code">
9
          {{ locale.name }}
10
        </mat-option>
11
      </mat-select>
12
    </mat-form-field>
13
  </mat-toolbar>
14

15
  <div class="content">
16
    <ng-container *ngFor="let vagetable of vegetables">
17
      <mat-card class="card">
18
        <mat-card-header class="card-header">
19
          <mat-card-title>{{vagetable.name | transloco}}</mat-card-title>
20
        </mat-card-header>
21
        <mat-card-content>
22
          <span>{{ t ("収穫数")}}：{{vagetable.num}} kg</span>
23
        </mat-card-content>
24
        <mat-card-content>
25
          <span>{{ t ("収穫日")}}：{{vagetable.harvestTime | date }}</span>
26
        </mat-card-content>
27
        <mat-card-content>
28
          <span
29
            >{{ t ("値段(kg)")}}：{{vagetable.price | currency:'JPY' }}{{ t
30
            ("円")}}</span
31
          >
32
        </mat-card-content>
33
        <mat-card-content>
34
          <mat-form-field>
35
            <mat-label>{{ t ("購入数(kg)")}}</mat-label>
36
            <mat-select>
37
              <mat-option
38
                *ngFor="let num of arrayNumberLength(vagetable.num); index as i"
39
                [value]="i"
40
              >
41
                {{i + 1}}kg
42
              </mat-option>
43
            </mat-select>
44
          </mat-form-field>
45
        </mat-card-content>
46
        <mat-card-content class="card-content">
47
          <button mat-flat-button color="accent" type="submit">
48
            {{ t ("購入")}}
49
          </button>
50
        </mat-card-content>
51
      </mat-card>
52
    </ng-container>
53
  </div>
54
</ng-container>

en.json

1
{
2
  "i18n sample app": "i18n sample app",
3
  "トマト": "Tomato",
4
  "ブロッコリー": "Broccoli",
5
  "じゃがいも": "Potatoes",
6
  "人参": "Carrot",
7
  "ピーマン": "Green pepper",
8
  "キャベツ": "Cabbage",
9
  "収穫数": "Harvest number",
10
  "収穫日": "Harvest day",
11
  "値段(kg)": "price(kg)",
12
  "円": "yen",
13
  "購入数(kg)": "Order(kg)",
14
  "購入": "Buy",
15
  "言語選択": "Select Language"
16
}

動的に言語選択させるには TranslocoService を使用します。

1
import { TranslocoService } from '@ngneat/transloco';
2

3
export class AppComponent {
4
  constructor(
5
    private translate: TranslocoService
6
  ) { }
7

8
  onChange(lang: string) {
9
    this.translate.setActiveLang(lang);
10
  }
11
}

ng serve で画面を確認してみると変換できていますね。

transloco1

transloco2

ここまでは @ngx-translate ととてもよく似ています。
ngneat-transloco がすごいのはここからです。
transloco にはLocale L10Nという優秀なプラグインが存在しています。
因みにL10Nとは Localization の略で、特定の地域に合わせた言語や文化を使用することを言います。 Locale L10N をインストールして実際に使ってみます。

1
npm i @ngneat/transloco-locale

transloco-root.module.ts

1
import { TranslocoLocaleModule } from '@ngneat/transloco-locale';
2

3
@NgModule({
4
  imports: [
5
    TranslocoLocaleModule.forRoot()
6
  ],
7
  ...
8
})
9
export class TranslocoRootModule {}

Locale L10N をインポートしたらローカリゼーションパイプである日付パイプを使ってみます

app.component.html

1
<!--これを-->
2
<span>{{ t ("収穫日")}}：{{vagetable.harvestTime: date }}</span>
3
<!--これに-->
4
<span
5
  >{{ t ("収穫日")}}：{{vagetable.harvestTime | translocoDate:{ dateStyle:
6
  'medium' } }}</span
7
>

transloco3

transloco4

日付を locale ごとのフォーマットで表示できるようになりました。
Locale L10N プラグインにはそのほかにも便利なパイプやオプションが多数存在しています。
この点が transloco の明確な強みだなと感じますね。

それぞれの特徴

1 週間当たりの DL 数 *2023年6月現在
- @angular/localize 80 万 DL
- @ngx-translate/core 75 万 DL
- @ngneat/transloco 10 万 DL
ひと昔前は @angular/localize は変換ファイルが分かりづらいことや、メンテナンス性に難点があったことから、@ngx-translate が人気のライブラリでした。
しかし、現在は @angular/localize の機能も充実していること。@ngx-translate がメンテナンスモードとなっていて、活発な開発が行われていないことからそれぞれの利用者はほぼほぼ同数である状況です。
@ngneat/transloco は上記 2 つに比べると人気のないライブラリであることが分かります。ただ、決して機能的に劣っているわけではなく、単純に新しいライブラリであるため情報が少ないことが避けられている要因かなと思います。

所感

今回は i18n を実現する 2 つの方法と、Angular で人気のライブラリについて紹介しました。
個人的にはサポートが手厚いことや、ドキュメントが豊富なことから@angular/localize を推しています。
@ngx-translate は翻訳機能に特化しているといった印象で、ローカライズ面では他には劣るのかなと思います。また、今後新たな機能の追加も現時点ではあまり望めないので、今からこのライブラリを使用して i18n を進めるのはあまりお勧めしません。
大規模開発に使用するなら@angular/localize。小規模開発に使用するなら@ngneat/transloco がいい選択肢かなと自分は考えます。
ここまで読んでいただきありがとうございます。この記事が読者の i18n 対応の手助けになれば幸いです。

参考サイト

https://angular.jp/guide/i18n-overview ⧉

https://github.com/ngx-translate/core ⧉

https://ngneat.github.io/transloco/ ⧉

記事をシェアする