---
title: "JSSにおける多言語アプリケーションのサポート"
slug: "supporting-multilingual-applications-in-jss"
abstract: "JSSアプリが多言語コンテンツや辞書をどのように扱うかの概要"
---
# JSSにおける多言語アプリケーションのサポート

Sitecore JSS Sitecoreのコンテンツ言語バージョン管理機能を活用できます。

Sitecoreから翻訳されたデータをレンダリングする際には通常、2つの懸念があります。

-   主要なページの内容。
-   ラベルやボタンのテキストの翻訳に使われる辞書項目。

サンプルアプリは、JSSが提供するツールを使ってアプリを完全に翻訳可能にする方法の一つを示しています。

## 翻訳されたSitecoreコンテンツのレンダリング

GraphQLでもRESTでも、Sitecoreからコンテンツを取得する際は、リクエストは舞台裏で[Sitecoreレイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")に送られます。

レイアウトサービスはルートおよびコンテキストデータを取得する際に言語コンテキストSitecoreを尊重するため、レイアウトサービスへのリクエストはsc\_langパラメータを利用して特定の言語でコンテンツを要求できます。例えば、http://JssReactWeb/sitecore/api/layout/render/jss?item=/Services&sc\_lang=es-MX&sc\_apikey={YOUR\_API\_KEY}。

[レイアウトサービスの呼び出し](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/fetching-layout-data-with-the-jss-layout-api.html "Fetching layout data with the JSS Layout API")方法や言語変更の処理方法を選べます。

サンプルアプリケーションのいずれかを使ってJSSプロジェクトをセットアップした場合、アプリケーションはすでにレイアウトデータの取得を処理しています。

## Sitecore辞書フレーズの取得

Sitecore JSSは[、JSSアプリで翻訳されたフレーズを取得する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/fetching-dictionary-data-with-the-jss-dictionary-api.html "Fetching dictionary data with the JSS Dictionary API")ための[辞書API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-dictionary-api.html "JSS Dictionary API")を提供しています。

サンプルアプリケーションのいずれかを使ってJSSプロジェクトをセットアップした場合、そのアプリケーションはすでに辞書のフレーズ取得を処理しています。

## 切断モードでの翻訳されたルートおよびコンテキストデータ

[切断モードで](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サンプルアプリケーションが提供するDisconnected Layout Serviceは、言語データを含むSitecoreレイアウトサービスのインターフェースをモックします。Disconnected Layout Serviceは、単一言語であるJSSマニフェストデータによって駆動されます。

しかし、アプリが異なる言語を要求すると、サービスは自動的にマニフェストを再生成します。このユースケースをサポートするには、複数の言語で利用可能なデータが必要です。

> !注Disconnected Layout Serviceは、[Sitecoreファースト開発](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-first-development-workflow.html "Sitecore-first development workflow")ワークフローで開発する場合には使用されません。

サンプルアプリは、異なる言語のコンテンツやレイアウトデータの定義を可能にするために、lang.ymlまたはJSONファイルを使うデフォルトの慣例があります。

![Content and layout data definitions for multiple languages in disconnected mode](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/hd/19/sitecore-headless-development/images/recipe-content-translation-dev-routes.png)

これはサンプルアプリの多言語コンテンツのデフォルト慣例であり、/sitecore/definitions/routes.sitecore.jsで定義されています。ご自身の好みやニーズに合った多言語データの保存方法や慣習を定義できます。

### 翻訳されたコンテンツと切断モードのインポート

ほとんどの場合、Sitecoreインスタンスなしで開発されたアプリケーションは、翻訳が考慮される前にSitecoreデータを使うことに移行するでしょう。

しかし、Sitecoreインスタンスを使わずに作業しながら、切り離された多言語コンテンツを作成することも可能です。この技術はサンプルアプリで示されており、en.yamlやes-mx.yamlなどの各言語のファイルを使ってルートを定義します。

多言語の切り離されたアプリケーションを展開するには、各言語ごとに別々にアプリケーションを展開する必要があります。理由は以下の通りです:

-   アプリは package.json ファイルで定義された単一のデフォルト言語を持っています。すべてのサンプルアプリはデフォルトで enです。
-   [マニフェストを生成する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/generating-a-jss-app-manifest-file.html "Generating a JSS app manifest file")際、マニフェストには一度に1つの言語のみが含まれます。
-   アップデートパッケージを展開する際は、一度に1つの言語のみがパッケージに含まれます。
-   マニフェストやパッケージング時のデフォルト言語は、以下で定義されているものです package.json

> !注 \--includeContentまたは \--includeDictionaryの引数を使ってコンテンツやルートデータをデプロイしなければ、多言語データを展開することはできず、単一のステップで展開できます。

言語のSitecoreにアイテムをデプロイするには:

-   ターミナル内のJSSアプリケーションのルートディレクトリで、次のコマンドを実行します。
    
    jss deploy items --language=es-MX --includeContent --includeDictionary
    
    > !注jss deploy itemsコマンドはファイルを展開しません。
    > 
    > ファイルを展開するにはjss deploy filesコマンドを使用します。
    > 
    > アイテムやファイルを展開するにはjss deploy appコマンドを使用します。
    

展開したい各言語ごとに同じ手順を繰り返します。

## 翻訳コンテンツと統合レンダリング

JSSアプリケーションが[統合モードで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode")動作する場合、Sitecoreが言語解像度やLayout Serviceのコンテンツを処理し、[統合サーバー側レンダリング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/server-side-rendering-jss-apps-in-integrated-mode.html "Server-side rendering JSS apps in integrated mode")に使われるrenderView()関数に提供されるため、データは正しい言語で返されます。

内容翻訳を助けるために、JSSはviewBagの議論に2つの性質を加えています:

-   viewBag.language - これはSitecoreによって解決される言語であり、アプリ状態を正しい言語で初期化するのに役立ちます。Sitecoreはデフォルトで言語クッキーも使用しているため、URLに言語パラメータのないリクエストは、ユーザーが最後に要求した言語の内容を返すことができます。
-   viewBag.dictionary - [Sitecore辞書サービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/dictionary-service.html "Dictionary Service")が提供する現在の言語でアプリの辞書フレーズを含みます。これにより、サーバー側レンダリングのために辞書の初期化が可能になります。

## ヘッドレスサーバーサイドレンダリングモードで翻訳されたコンテンツ

JSSに含まれる[ヘッドレスサーバーサイドレンダリング](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/headless-server-side-rendering-mode.html "Headless server-side rendering mode")の例は、初期のルートURLをLayout Serviceへのリクエストに変換・プロキシすることで部分的に機能します。これには、ルートURLの構造やSitecoreルートパス以外のものが含まれているか、または言語パラメータを付け加えたいかについての知能が必要です。これを可能にするために、プロキシ関数はlangおよびsitecoreRouteプロパティを持つオブジェクトを返すことを期待するオプションのparseRouteUrl関数を受け入れます。

この例はエクスポートされた関数をparseRouteUrlで埋めています。Reactのサーバーバンドルを検査し、/server/server.jsファイルでサンプルアプリVue.js、Angularアプリの場合はserver.bundle.tsファイルで確認できます。