Angularのi18nでアプリを国際化対応する!ngx-translateとの比較。APIコラム海外エンジニアエンジニア論PC機器・書籍HOMEAngularAngular実践Angularのi18nでアプリを国際化対応する!ngx-translateとの比較。Angularのi18nでアプリを国際化対応する!ngx-translateとの比較。初心者向けこの記事では、Angularの国際化ライブラリであるi18nを使用してアプリを多言語化する方法について説明したい。近年、国際化の波の中で自社のウェブサイトを英語または中国語対応させたいと考えている企業も増えているだろう。したら多くの企業は最初から英語ベースでアプリを開発して、サブの言語として日本語を表示しているかもしれない。今回はAngularの標準の国際化ライブラリであるi18nについてその導入方法や使用方法を解説していきたい。サードバーティー製のi18nライブラリとして人気の「ngx-translate」についても特徴や長所などを説明しているので読んでいってほしい。CurrencyPipeAngularアプリの国際化対応まずはAngularアプリの国際化対応について、なぜライブラリむしろを英語を標準言語として考え、そこから日本語を含めた各言語に翻訳していくのが普通だろう。i18ni18nはAngularに標準で備わっている国際化対応ライブラリ。ngx-translatei18nのサードバーティー製の国際化ライブラリに「ngx-translate」がある。ngx-translateはシンプルで使いやすく導入している企業も少なくない人気のライブラリだ。https://github.com/ngx-translatengx-translateは以下のような特徴を持つ。Angularプロジェクトに導入するのが簡単。JSONフォーマットでシンプルな翻訳ファイル。動的な文字列やHTMLタグを翻訳テキストに使用可能。ngx-translateは翻訳ファイルの記述のシンプルさからi18nと較べるとだいぶ使いやすくなっている。i18nを使わなくてはいけない理由がある場合を除いて、こちらのライブラリの導入も検討してみたほうがいいだろう。i18nの導入方法ではi18nを自身のアプリへ導入しよう。i18nを導入するには以下のコマンドをターミナルで実行するだけでいい。@angular/localizei18nの使用方法ではi18nをAngularアプリ内のテキストに対して使用してみよう。この例では、英語をベースとしてアプリを作成して、のちに翻訳ファイルを基にテキストを日本語に翻訳する。Angularプロジェクトを用意するまずは翻訳したいテキストを含めた簡単なアプリを用意する。ここでは「translate-app」と名付けたシンプルなアプリを作成してapp.component.htmlに以下のようなサンプルコードを記述した。/>名前をテキスト内に動的に読み込みたいのでnameプロパティをコンポーネント側に定義しておく。serve」でアプリをスタートすると以下のような感じに表示されるはずだ。翻訳する箇所にタグを付けるここからは翻訳する箇所にi18nのタグを付けていく。<div>・<h1>といったタグで囲まれた要素をタグ付けする場合はHTMLタグ内に「i18n」と記述する。}}</h1>タグで囲まれていない要素をタグ付けする場合は<ng-container>タグで囲み「i18n」を記述する。tag.</ng-container>要素内の属性をタグ付けする場合は属性名の頭に「i18n-」を付けた属性を追記する。/>これですべてのテキストにi18nのタグが付けられた。テキストの抽出コマンドを実行する翻訳したい箇所へのタグ付けが終わったら翻訳対象のテキストをファイルに抽出する。以下のコマンドを実行する。extract-i18nコマンドを実行するとアプリのルートフォルダに「messages.xlf」というファイルが作成されているだろう。プロジェクトのsrcフォルダの配下に「locale」というフォルダを作成してmessages.xlfをその中に移動する。移動したら「messages.xlf」を「messages.en.xlf」とリネームし、さらにそのファイルをコピーして「messages.jp.xlf」とリネームする。*messages.en.xlfは英語のテキストが、messages.jp.xlfには日本語のテキストが納められる。日本語のテキストを入力するでは翻訳ファイルに日本語のテキストを入力しよう。messages.jp.xlfを開いてほしい。以下の写真のように翻訳データが記述されているはずだ。<file>タグ内のsource-language属性にて言語が設定されている。ここを「jp」に変更しよう。<trans-unit>タグの内部の情報がひとつの翻訳テキストに対応しており、双方はIDを通じて紐づけられている。日本語の翻訳データを作成するためには<source>タグ内の英語のテキストを日本語に書き換える。これで翻訳作業は完了だ。ビルド設定をアップデートする日本語のテキストが表示されるか確認する前にAngularプロジェクトのビルドに関する設定をアップデートする必要がある。angular.jsonの設定まずはangular.jsonの設定から。変更する箇所は3箇所ある。*以下、説明内容の”translate-app”の部分は自身のプロジェクト名に書き換える。最初にprojects/translate-appの配下に以下の内容を追記する。}},次にprojects/translate-app/architect/build/configurationsの配下に以下の内容を追記する。"error"},最後にprojects/translate-app/architect/serve/configurationsの配下に以下の内容を追記する。"translate-app:build:jp"},package.jsonの設定package.jsonの設定を拡張する。この設定はアプリのスタート設定であり、必ず設定しなければいけない訳ではない。scriptsの配下に以下の内容を追記する。--configuration=jp",これでビルド設定のアップデートは完了だ。アプリが翻訳されたかテストするでは、アプリが日本語に翻訳されたか確認するためにテストしてみよう。以下のコマンドを実行して、日本語をローカルとして設定したアプリを新しいポートで実行する。--port=4201以下のように日本語で画面が表示されればテストは成功だ。テキストが英語のままの場合はangular.jsonの設定をチェックし直そう。国際化対応に役立つパイプAngularの標準パイプの中にはアプリの国際化対応に役立つものがいくつかある。最後にそれらのパイプを紹介したい。I18nPluralPipeI18nPluralPipeは英語のように単数形と複数形で単語の語尾が異なるパターンがある言語の翻訳に役立つ。personsI18nPluralPipeを使えば、入力された数値を基に適切な翻訳を自動で選択することができる。I18nSelectPipeI18nSelectPipeはあらかじめ用意したマッピングを基に、適切な単語を返すパイプであり。キー・バリュー型の翻訳ファイルと考えるといい。DatePipeDatePipeはDateオブジェクトを希望するフォーマットで出力するためのパイプ。フォーマットの設定により月名や曜日名を言語設定に基づき単語として出力することができる。(例)Janurary・Mondayまた、DatePipeを使えば時刻を希望する国の時間に合わせることができる。CurrencyPipeCurrencyPipeはnumberオブジェクトを希望する通貨の形式で出力するためのパイプ。商品の価格を異なる通貨で表示したい場合などには役立つであろう。Angularのパイプについてさらに知りたい人はこちらの記事を読んでほしい。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。Hostingの使い方。2021.10.02この記事では、Angularプロジェクトをデプロイする方法について説明する。15についておもな変更点をまとめてみた。13」の変更点をざっくりと分かりやすく説明する。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。