【Angular】TranslateServiceを使ってシンプルに国際化(i18n)する方法

こんにちは！

Webアプリケーション開発において、多言語対応はますます重要な要素となっています。

Angularで多言語対応をしたいけど、どうすればいいかわからない…

TranslateServiceって何？どう使うの？

多言語対応で気をつけることは？

Angularでの多言語対応について、このような疑問をお持ちではないでしょうか。

この記事では、Angularで多言語対応を実現するためのサービスである TranslateService の基本的な使い方から、具体的な導入手順、さらには開発における注意点まで、詳しく解説します。

この記事は次のような方におすすめです。

この記事を読めば、Angularでの多言語対応の具体的な方法が理解できるようになります。さらに、多言語対応で起こりがちな問題への対策も習得できます。

「Angularで多言語対応を始めたい方」「TranslateServiceを効果的に活用したい方」は、ぜひ参考にしてください。

それでは、順を追って詳しく見ていきましょう！

AngularのTranslateServiceとは

まず、TranslateService とは何か、その役割を見ていきましょう。

TranslateService の役割

TranslateService は、Angular アプリケーションを国際化対応させるための、@ngx-translate/core パッケージが提供するサービスです。アプリケーション内のテキストを、ユーザーの言語設定に合わせて切り替えることを可能にします。

TranslateService を使用することで、以下のようなことが実現できます。

ngx-translate を利用することで、複雑な多言語対応のロジックを自分で実装する必要がなくなり、効率的に多言語対応を進めることが可能です。
多言語対応の面倒な作業を、TranslateService が一手に引き受けてくれます。

国際化（i18n）とは

国際化とは、アプリケーションをさまざまな言語や文化に対応させることです。
グローバルに展開するアプリケーションにとって、国際化対応は必要不可欠な要素です。国際化対応することで、より多くのユーザーにアプリケーションを利用してもらえる可能性が広がります。

TranslateService は、Angular アプリケーションを国際化するための強力なツールと言えるでしょう。

TranslateServiceのメリット

TranslateService を利用するメリットはいくつかあります。

これらのメリットを考えると、多言語対応が必要なAngularアプリケーション開発において、TranslateService を利用することは非常に合理的です。
開発者は多言語対応の細かいロジックに気を配る必要がなくなり、アプリケーションのコアな機能の開発に集中できます。

TranslateServiceの具体的な使い方

ここからは、TranslateService を利用して、実際に多言語対応を行う具体的な方法を説明します。
具体的なステップに沿って、どのように多言語対応を実装していくかを見ていきましょう。

STEP 1: ngx-translate のインストール

まずは、ngx-translate をAngularプロジェクトにインストールする必要があります。以下のコマンドを実行してインストールしてください。

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

@ngx-translate/core が TranslateService を含めたコア機能を提供し、@ngx-translate/http-loader がHTTPを通して翻訳ファイルを読み込むためのローダーを提供します。

STEP 2: モジュールに設定を追加

ngx-translate を利用するためには、モジュール（通常はapp.module.ts）に設定を追加する必要があります。
HttpClientModule と TranslateModule をインポートし、 TranslateModule を設定してください。
以下のコード例を参考にモジュールを編集してください。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
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';

// ngx-translate のローダー
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

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

この例では、defaultLanguage を 'en'（英語）に設定しています。
翻訳ファイルの場所などの設定も必要に応じて追加してください。

STEP 3: 翻訳ファイルを作成

次に、言語ごとの翻訳ファイル（JSON形式）を作成します。例えば、英語用の en.json と日本語用の ja.json を作成し、それぞれの言語に対応するテキストを記述します。
これらのファイルは assets/i18n ディレクトリなどに配置するのが一般的です。

en.json の例：

{
  "greeting": "Hello",
  "welcome": "Welcome to our website"
}

ja.json の例：

{
  "greeting": "こんにちは",
  "welcome": "当サイトへようこそ"
}

JSONファイルでは、翻訳のキーと翻訳テキストをペアで定義します。キーは、コードの中で翻訳テキストを参照する際に使用します。
キーには、わかりやすい名前をつけることが大切です。例えば、「greeting」（挨拶）や「welcome」（歓迎）など、意味が明確になるようなキーを設定しましょう。

STEP 4: コンポーネントでTranslateServiceを利用する

翻訳テキストをアプリケーションで使用するには、コンポーネントでTranslateServiceをインジェクションし、get()やinstant()などのメソッドを利用します。

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 {
  title = 'my-app';
  greeting: string | undefined;
  welcome: string | undefined;

  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'ja']);
    translate.use('en');

    // 非同期で翻訳テキストを取得
    translate.get('greeting').subscribe((res: string) => {
      this.greeting = res;
    });

    // 同期的に翻訳テキストを取得
     this.welcome = translate.instant('welcome');
  }

  // 言語切り替え
  changeLanguage(lang: string) {
    this.translate.use(lang);

    // 非同期で翻訳テキストを取得
    this.translate.get('greeting').subscribe((res: string) => {
      this.greeting = res;
    });

    // 同期的に翻訳テキストを取得
    this.welcome = this.translate.instant('welcome');
  }
}

ここでは、コンストラクターで TranslateService を注入し、get() と instant() メソッドを使って、翻訳テキストを取得しています。
get() は非同期で翻訳テキストを取得し、instant() は同期的に翻訳テキストを取得します。

addLangs() でサポートする言語を追加し、 use() で使用する言語を設定しています。
changeLanguage() は、言語を切り替えるためのメソッドです。
translate.get() と

translate.instant() を言語変更の際に実行することで表示言語を切り替えます。

app.component.html の例：

<p>{{ greeting }}</p>
<p>{{ welcome }}</p>

<button (click)="changeLanguage('en')">English</button>
<button (click)="changeLanguage('ja')">Japanese</button>

HTMLでは、取得した翻訳テキストを {{ }} の中に記述して表示します。
changeLanguage ボタンをクリックすると、言語を切り替えることができます。

getとinstantの使い分け

get メソッドは非同期処理のため、subscribeする必要があるのが特徴です。instant は同期的なメソッドで、すぐ翻訳結果を取得できます。

get メソッドは、翻訳ファイルの読み込み完了後にテキストを取得する場合に使用し、instant メソッドは、翻訳ファイルの読み込みが完了している状態で、すぐにテキストを取得する場合に使用する、と覚えておきましょう。

instant メソッドの注意点としては、instantメソッドを使用するときに翻訳ファイルがロードされていない場合、指定したキーがそのまま表示されてしまう点です。この点を考慮して、状況に応じて get メソッドと instant メソッドを使い分けるようにしましょう。

よく使うメソッド

TranslateService には、多言語対応を実現するための様々なメソッドが用意されています。
特にget()、instant()、use()は使用頻度が高いため、確実に覚えておきましょう。

これらのメソッドを使いこなすことで、多言語対応を柔軟かつ効率的に実装できます。
それぞれのメソッドの使い方や特徴を理解し、適切な場面で使用しましょう。

HTMLテンプレートでの利用

HTML テンプレートで TranslateService を利用して、テキストを翻訳表示させる方法もあります。

en.json の例：

{
  "title": "Welcome to my App",
  "greeting": "Hello, {{name}}!"
}

ja.json の例：

{
  "title": "私のアプリへようこそ",
  "greeting": "こんにちは、{{name}} さん！"
}

app.component.html の例：

<h1>{{ 'title' | translate }}</h1>
<p>{{ 'greeting' | translate:{ name: name } }}</p>

ここでは、translate パイプを使用しています。パイプの左側には、翻訳ファイルのキーを渡します。greeting のように変数を含める場合は、{ name: name } のようにパイプの引数でオブジェクトを渡します。

このコードを実行すると、nameが”Taro”のとき translate.use('ja') が設定されていれば、以下のように表示されます。

<h1>私のアプリへようこそ</h1>
<p>こんにちは、Taro さん！</p>

translate.use('en') が設定されていれば、以下のように表示されます。

<h1>Welcome to my App</h1>
<p>Hello, Taro!</p>

成功のための具体的なポイント

多言語対応を成功させるためには、技術的な知識だけでなく、いくつか押さえておきたいポイントがあります。

翻訳テキストの品質

翻訳テキストは、専門の翻訳者や翻訳ツールを使用するなどして、高品質なものを用意するようにしましょう。
翻訳の品質が悪いと、ユーザーに誤解を与えたり、ブランドイメージを損なったりする可能性があります。

可能であれば、ネイティブスピーカーによる翻訳チェックを行い、自然で正確な翻訳を目指しましょう。
また、技術用語など、専門性の高い内容に関しては、該当分野に詳しい翻訳者を選定することが重要です。

翻訳ファイルの管理

翻訳ファイルは、Gitなどのバージョン管理システムで適切に管理するようにしましょう。
変更履歴を管理することで、翻訳ミスや修正の際に迅速に対応できます。

また、翻訳ファイルは、複数の開発者で共有することもあるため、ファイルの構造やルールをチーム内で統一しておくことが大切です。
例えば、ファイル名の命名規則や、キーの書き方などを事前に決めておくと、スムーズな開発につながります。

言語切り替えのインターフェース

言語切り替えのインターフェースは、ユーザーが簡単に言語を切り替えられるように、分かりやすく設計するようにしましょう。
言語切り替えボタンの場所や表示形式などを工夫し、ユーザーエクスペリエンスを向上させることが大切です。

また、言語設定は、ブラウザの設定や、ユーザーが選択した設定を保存できるように、ローカルストレージなどを利用するのが便利です。
一度言語を設定すると、次回のアクセス時も、前回と同じ言語が表示されるようにしましょう。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業

株式会社 ONE WEDGEでは、新たな仲間を募集しています！

私たちと一緒に、革新的で充実したキャリアを築きませんか？
当社は、従業員が仕事と私生活のバランスを大切にできるよう、充実した福利厚生を整えています。

• 完全週休2日制（土日休み）で、祝日や夏季休暇、年末年始休暇もしっかり保証！
• 様々な休暇制度（有給、慶弔、産前・産後、育児、バースデー休暇）を完備！
• 従業員の成長と健康を支援するための表彰制度、資格取得支援、健康促進手当など！
• 生活を支えるテレワーク手当、記事寄稿手当、結婚祝金・出産祝金など、様々な手当を提供！
• 自己啓発としての書籍購入制度や、メンバー間のコミュニケーションを深める交流費補助！
• 成果に応じた決算賞与や、リファラル採用手当、AI手当など、頑張りをしっかり評価！
• ワークライフバランスを重視し、副業もOK！

株式会社 ONE WEDGEでは、一人ひとりの従業員が自己実現できる環境を大切にしています。
共に成長し、刺激を与え合える仲間をお待ちしております。
あなたの能力と熱意を、ぜひ当社で発揮してください。
ご応募お待ちしております！

ホームページ、採用情報は下記ボタンからご確認ください！

ホームページ

　採用情報　

会社のことがわかるおすすめ記事

• ONE WEDGE 代表インタビュー
• ONE WEDGEってどんな会社？
• ONE WEDGEで働く社員

応募、ご質問など、LINEでお気軽にご相談ください♪

まとめ

今回は、Angularの TranslateService を使って多言語対応を行う方法について解説しました。
TranslateService は、多言語対応を容易にし、Webアプリケーションの国際化を支援します。

改めて、重要なポイントをおさらいしましょう。

多言語対応は複雑に感じるかもしれませんが、 TranslateService を活用することで効率的に実装できます。
この記事が、Angularで多言語対応を始めるための一歩となれば幸いです。

多言語対応は、グローバルなWebアプリケーションにとって非常に重要な要素です。TranslateService を効果的に活用し、世界中のユーザーに快適なWebアプリケーションを提供しましょう。