---
title: "JSS Angularサンプルアプリにおける翻訳と言語"
slug: "translation-and-languages-in-the-jss-angular-sample-app"
abstract: "ngx翻訳および翻訳ローダーの使用による新しい言語の追加"
---
# JSS Angularサンプルアプリにおける翻訳と言語

JSSで作成されたAngularアプリケーションは、複数の言語でデータを表示できます。

## 新しい言語の追加

Angularのサンプルアプリケーションには英語とデンマーク語のサンプルコンテンツが含まれており、[切断モードで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-disconnected-mode.html "Start a JSS app in disconnected mode") は言語を簡単に切り替えることができます。他のモードで使用するためにデンマーク語レイヤーをインポートするには、以下のアイテムを展開する必要があります:

jss deploy items --language da-DK -c -d

> !重要Sitecoreに代替言語を展開するには、まずその言語がSitecoreに登録されている必要があります。未登録言語をインポートするとエラーが発生します。

## ngx-translateライブラリの使用

Sitecore辞書を動的に読み込み利用するために、Angularのサンプルは組み込みのコンパイル時変換サポートではなく、ngx-translateライブラリを使用しています。

他のライブラリや手法を使うこともできますが、このライブラリはカスタムTranslateLoader実装を消費できるため、Sitecore辞書とクライアントサイドでもサーバーサイドでも簡単に利用できます。

ngx-translateの初期化はsrc/app/app.component.tsのメインアプリコンポーネントで確認できます。これにはJssContextServiceの現在の言語状態に基づいて表示言語を切り替えるロジックが含まれており、ngx-translateライブラリが言語状態を現在のルートの言語と同期させることを可能にします。

ngx-translateライブラリのローダーは、クライアントレンダリングとサーバーレンダリングでそれぞれ異なる初期化されており、src/app/app.module.tsとsrc/app/app.server.module.tsです。

ngx-translateライブラリで翻訳値を用いる仕組みはいくつかあります。詳細は[ngx-translateのドキュメント](https://ngx-translate.org/)をご覧ください。

## 翻訳ローダー

JSS Angularサンプルアプリケーションは複数の翻訳ローダーを定義し、使用しています。それらはsrc/app/i18nディレクトリに存在します。

### JssTranslationLoaderService

この実装は、Headless Servicesが提供する辞書サービスからSitecore辞書を読み込みます。クライアントとサーバーの両方のレンダリング時にフォールバックとして機能します。

### JssTranslationServerLoaderService

この実装は、サーバーレンダリング時にSitecoreが提供するviewBagデータから辞書をJSS\_SERVER\_TO\_SSRインジェクショントークンを通じて読み込もうと試みます。JSSアプリケーションを実行する際、Sitecore便宜上デフォルトでビューバッグに辞書を提供します。辞書が見つからない場合は、ローダーはフォールバックローダー(設定通りのJssTranslationLoaderService)から辞書を取得しようとします。取得した辞書はクライアントアプリケーションが利用するためにTransferStateに入れられます。

### JssTranslationClientLoaderService

この実装は、TransferStateから辞書を読み込み、指定されたフォールバックローダー(設定通りJssTranslationLoaderService)にフォールバックします。