Angular

【Angular】 ngx-translateの使い方

  /

マナビト
マナビト
こんにちはマナビトです。
普段はフロントエンドエンジニアとしてJavaScript/TypeScript/Aangular/GraphQLを
メインに開発業務を行なっています。

今回はAngularのngx-translateについて使用する機会がありましたのでその導入方法について、記事にしていきたいと思います。

目次
  1. 1. ngx-trsnalateとは？
  2. 2. アプリケーションを他言語にする方法
  3. 3. 言語ファイルの作成
  4. 4. 記載方法

1. ngx-trsnalateとは？

ngx-translateとは、Webアプリケーションを日本語以外の多言語にする際にとても便利なAngularのi18nライブラリです。

i18nとは国際化を意味する「internationalization」の略で、世界で共通して使えることを指します。

以下ngx-translateの公式ドキュメントです。

GitHub
外部リンク
GitHub - ngx-translate/core: The internationalization (i18n) library for Angular

実は、ngx-translateライブラリを使用しなくても、Angularでは標準でi18n機能を装備しています。Angularで国際化対応 - 闘うITエンジニアの覚え書きでも触れられていますが、使い比べてみると、翻訳する箇所が増える度に、翻訳用のファイルを新たに作る必要があったりと、ngx-translate の方が全然使いやすいと思います。

2. アプリケーションを他言語にする方法

それでは、Angularでngx-translateを導入していきたいと思います。ngx-translateを利用するにはまず、npmでライブラリをインストールする必要があります。

npm install @ngx-translate/core --save

次にappModule内に、TranslateModule.forRoot()をインポートします。これを記述することで、ngx-translateのTranslateModuleをアプリが認識してくれるようになります。

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core'; //追加

@NgModule({
    imports: [
        BrowserModule,
        TranslateModule.forRoot() //追加
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

※ Lazy loadedを使用している場合は、forChildを使用します。

@NgModule({

    imports: [
        TranslateModule.forChild({
            loader: {provide: TranslateLoader, useClass: CustomLoader},
            compiler: {provide: TranslateCompiler, useClass: CustomCompiler},
            parser: {provide: TranslateParser, useClass: CustomParser},
            missingTranslationHandler: {provide: MissingTranslationHandler, useClass: CustomHandler},
            isolate: true
        })
    ]
})

export class LazyLoadedModule { }

さらに、ngx-translateはHttpClientを使用する為、HttpLoaderをインストールします。

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

HttpLoaderをインストールできたら、TranslateModule.forRootを以下のように書き換えます。

TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    },
    defaultLanguage: 'ja'
})

TranslateHttpLoaderを使用する為、app.module.tsに、HttpLoaderFactoryメソッドを追加します。

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

コードの全体像としては以下の通りとなります。

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';

exportfunction HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            },
            defaultLanguage: 'ja'
        })
    ],
    bootstrap: [AppComponent]
})

exportclass AppModule { }

これでngx-translateの導入は完了です。

3. 言語ファイルの作成

ngx-translateの導入が完了したら、次は翻訳をするための言語ファイルを作成します。ファイルは通常はJSON形式でasset/i18nフォルダの中に記載します。フォルダ名は英語に翻訳する場合はen.jsonで良いかと思います。

{
    "ログイン": "Login",
         "registration" : {
          "メールアドレス": "Mail",
          "パスワード": "Password",
          "会員登録": "Member registration",
     }
    ...
}

4. 記載方法

次に、JSONフォルダの記述をもとに、翻訳したいHTMLテンプレートにtransalteを記載していきます。タグに translate ディレクティブをつけるだけで翻訳をすることが出来ます。

<h2 class="title" translate>ログイン</h2>
<p class="caption" translate>メールアドレス</p>
<p class="caption" translate>パスワード</p>

placeholderなどのhtml属性の場合は、translate をpipeとして使うことでplaceholderのhtml属性を翻訳することができます。

<input type="text" matInput placeholder="{{ 'ログイン' | translate }}">

本日はここまでとなります。ここまでお読みいただきありがとうございました。

RELATED POST