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

実践における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の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以降で導入されたシグナルベースのリアクティビティの両方で正しく 機能します。

セットアップ比較

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

よくある質問

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プロジェクトを使うことも、アプリごとに別のプロジェクトを使うこともでき、ダッシュボードから両方の構成を管理できます。