Lingvit
  • Angular
  • i18n
  • ガイド

Angular翻訳：ngx-translate vs 自動翻訳（2026年版）

読了時間 8分

Angularにはプラットフォームに組み込まれたビルド時のフレームワークと、広く使われている ランタイムライブラリという2つのi18nアプローチが用意されています。さらに、コードの変更を 一切必要としないDOMベースの自動翻訳という選択肢もあります。それぞれの仕組み、適する場面、 そして選び方を解説します。

Angular組み込みの2つのi18nアプローチ

Angularには独自のi18nフレームワーク@angular/localizeがあり、 XLIFFファイルとビルド時翻訳を使用します。重要な特徴は、ロケールごとに別々のビルドを 実行することです。各言語は翻訳が組み込まれた独自の最適化バンドルを生成します — ブラウザ内で 翻訳の検索処理が発生しないため、実行時としては最速です。

人気のあるサードパーティの代替手段は @ngx-translate/coreで、 こちらはランタイムで動作します。1つのバンドルを配布し、起動時にロケールJSONファイルを 読み込みます。言語を切り替えるユーザーは、ページの再読み込みなしで新しい文字列を 受け取ります。

Angular翻訳：ngx-translate vs 自動翻訳（2026年版）の補足データ（表1/2）
方式翻訳が適用されるタイミング言語ごとのバンドル
@angular/localizeビルド時ロケールごとに1つ
@ngx-translate/coreランタイム（起動時）共有バンドル1つ
自動翻訳ランタイム（DOM）共有バンドル1つ

横にスクロールしてすべての列を表示できます。

実践におけるngx-translate

@ngx-translate/coreは、 組み込みフレームワークを除けば最も広く使われているAngular向けi18nライブラリです。 基本パターンは3つの要素から成ります。

  • TranslateModule — 翻訳を必要とするすべてのAngularモジュール （またはスタンドアロンコンポーネント）にインポートします。パイプとディレクティブを 提供します。
  • TranslateService — プログラムから言語を切り替えたり、TypeScript内で 翻訳にアクセスしたりする必要があるコンポーネントに注入します。
  • translateパイプ — テンプレート内で使用： {{ "HELLO" | translate }}。 リアクティブで、アクティブな言語が変わると自動的に更新されます。
  • HttpLoader — デフォルトのローダーは言語切替時に /assets/i18n/fr.jsonを 取得します。ロケールごとに1つのJSONファイルを維持します。

エコシステムは成熟しており、ICU形式の複数形処理、遅延読み込みされる翻訳モジュール、 サーバーサイドレンダリングをコミュニティパッケージが扱います。Angular 13以前に プロジェクトを開始したチームの多くはngx-translateを使っています。

Angular i18nのコスト

どちらの組み込みアプローチも、プロジェクトの初期には見落としがちな保守コストを伴います。

@angular/localize：ロケールごとに1回のCIビルド

ロケールごとの個別ビルドは訪問者にとっては高速ですが、CI上では高コストです。 5言語ではビルド時間とアーティファクトのストレージがおよそ5倍になります。多くの グローバル製品が目標とする10言語以上になると、この組み合わせは本物のインフラ問題に なります — パイプラインが長くなり、ストレージが増え、デプロイが複雑になります。

ngx-translate：維持すべきロケールJSONファイル

アプリ内のすべての文字列が、すべてのロケールJSONファイルにキーを必要とします。 アプリが成長するにつれて、ファイルの同期を保つことがバグの温床になります — 欠落したキーは静かにフォールバックし、古い翻訳が警告なく公開され、型安全な キー管理には追加のツールが必要になります。

両方に共通：翻訳ファイルは動く標的

UIコピーは製品開発中に頻繁に変わります。文字列が変わるたびにXLIFFやJSONファイルの 更新、キーの再抽出、翻訳者や翻訳管理システムとの調整が必要になります。専任の ローカリゼーションワークフローを持たないチームでは、このオーバーヘッドがすぐに 積み重なります。

Angularのi18nツールが正解になる場面

組み込みのAngular i18nスタックが本領を発揮する具体的な場面があります。

  • 専任のローカリゼーションチームを持つエンタープライズアプリ。 プロの翻訳者、TMS、レビューワークフローがあるなら、XLIFFの抽出はそれらの プロセスに直接組み込めます。
  • 人によるレビュー済み翻訳が求められるコンプライアンス要件。 未レビューのコピーを出荷してはならない金融、法律、医療系アプリは、XLIFFワークフローが 強制する明示的な翻訳承認ステップから恩恵を受けます。
  • ICUメッセージフォーマットを多用する場合。 複数形や選択のルール （例：“{count, plural, one {1 result} other {# results}}”）は @angular/localizeでは 第一級の機能であり、ICUプラグインを使ったngx-translateでも十分にサポートされています。
  • ロケールごとのビルド時最適化が必要な場合。 バンドルサイズが重要で、 各市場が単なる翻訳済み文字列以上に本当に異なるコンテンツを持つ場合、ロケールごとの ビルドを使えば未使用のロケール固有コードをツリーシェイキングできます。

自動翻訳が勝る場面

DOMベースの自動翻訳 — Angularアプリのホストページにスクリプトタグを追加するだけ — は翻訳パイプライン全体を省略します。これが明らかに良い選択となる場面があります。

  • 既存のAngularアプリを作り直さずに多言語化する。 i18nへの投資が ない稼働中のアプリを、コンポーネントを1つも触らずに今すぐ多言語化できます。
  • i18nエンジニアがいないスタートアップチーム。 ngx-translateや @angular/localizeを 正しく設定するには時間がかかります。スクリプトタグは統合作業を減らせますが、 所要時間はアプリによって異なります。
  • UIが急速に変化するSaaSダッシュボード。 UIコピーが毎週変わる場合、 翻訳ファイルの維持はフルタイムの仕事になります。自動翻訳はファイルを更新せずに DOMに追随します。
  • 市場投入までの速さが重要な場合。 四半期ではなく1日で フランス語、ドイツ語、スペイン語、日本語のユーザーに届くことは、多くの製品にとって 実質的な競争優位です。

LingvitとAngularの連携方法

Lingvitは、閉じ</body>タグの前の src/index.htmlに単一の スクリプトタグを追加することでAngularアプリに導入されます。

Angularの変更検知はコンポーネントが再レンダリングされるたびにDOMを更新します。Lingvitは MutationObserverを使ってこれらの DOM変更を検知し、新しいコンテンツが表示され次第翻訳します — これは、zone.jsベースの 変更検知と、Angular 16以降で導入されたシグナルベースのリアクティビティの両方で正しく 機能します。

  • Angular 15+ スタンドアロンコンポーネント

    変更なしで動作します。スタンドアロンコンポーネントも同じDOMにレンダリングされ、 アプリがNgModuleとスタンドアロンのどちらのアーキテクチャを使っていても MutationObserverがすべての更新を捕捉します。

  • Angular Universal / SSR

    サーバーサイドレンダリングにも対応しています。スクリプトタグはサーバーで レンダリングされたHTMLテンプレートに追加します。ハイドレーション後は、 MutationObserverがAngularのルーターやコンポーネントの再レンダリングによる クライアントサイドのDOM更新をすべて処理します。

  • 従来のNgModuleパターン

    Angular 12以前でNgModuleを使っているアプリも同様に動作します。スクリプトタグは ホストページレベルのものであり、アプリ内のAngularバージョンやモジュールシステムに 依存しません。

セットアップ比較

Angular翻訳：ngx-translate vs 自動翻訳（2026年版）の補足データ（表2/2）
ステップ@angular/localizengx-translateLingvit
インストールng add @angular/localizeパッケージをインストールし、TranslateModuleを設定—
文字列にマークすべての要素にi18n属性を追加すべての文字列をtranslateパイプでラップ—
翻訳ファイルXLIFFを抽出し、ロケールごとに記入ロケールごとにJSONを記述—
CIパイプラインロケールごとのビルドマトリクス単一ビルド単一ビルド
言語の追加ロケールごとに新しいビルド新しいJSONファイルダッシュボードで切り替え
index.htmlのスクリプトタグ不要不要</body>の前にタグを1つ

横にスクロールしてすべての列を表示できます。

よくある質問

LingvitはAngular SSR / Angular Universalで動作しますか？

はい。サーバーが配信するHTMLテンプレート（通常はsrc/index.htmlまたはExpressサーバーのテンプレート）にLingvitのスクリプトタグを追加してください。ウィジェットはAngularがクライアント側でページをハイドレートした後に初期化され、その後のDOM更新はAngularのルーターやコンポーネントの再レンダリングも含めてMutationObserverが処理します。

Angular Materialのコンポーネントでも動作しますか？

はい。Angular Materialは標準的なDOM要素をレンダリングします — MatButton、MatInput、MatTable、その他すべてのコンポーネントは通常のHTMLを生成し、MutationObserverが監視します。documentのbodyにアタッチされるツールチップやオーバーレイも捕捉されます。

複数のAngularアプリを持つNxモノレポの場合はどうなりますか？

Nxモノレポ内の各Angularアプリは、それぞれ独自のindex.htmlを持つ独立したデプロイ対象です。各アプリのindex.htmlに個別にLingvitのスクリプトタグを追加してください。同じドメイン上のアプリには同じLingvitプロジェクトを使うことも、アプリごとに別のプロジェクトを使うこともでき、ダッシュボードから両方の構成を管理できます。