翻訳対象テキストのマーキング
i18n属性で翻訳対象のテキストを指定します
「翻訳対象テキストのマーキング」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
国際化で解決できること
国際化（i18n）とは、コードを変更せずにアプリのテキストを他の言語へ翻訳できるよう、アプリを準備することです。Angularには、テンプレート内の翻訳対象テキストをi18n属性でマークする、組み込みのi18nシステムがあります。
i18n属性
翻訳対象のテキストを持つ要素にi18n属性を追加します。Angularはビルド時にこれらを収集し、ロケールごとに内容を置き換えます。
<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>属性の翻訳
titleやplaceholderなどのHTML属性を翻訳するには、属性名の先頭にi18n-を付けます。
<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />意味と説明
i18n="meaning|description"という構文を使って、翻訳者にコンテキストを伝えられます。meaningは同じ翻訳を共有すべき同一のフレーズをまとめ、descriptionは用途を説明します。
<button i18n="cta|The main call to action on the home page">Get started</button>カスタムID
テキストを編集しても翻訳が維持されるよう、@@の後に安定したカスタムIDを追加します。これがない場合、元のテキストを変更すると新しいIDが生成され、既存の翻訳が失われます。
<h1 i18n="@@homeTitle">Welcome to our store</h1>翻訳テキスト内の補間
翻訳テキスト内のバインディングはプレースホルダーになります。翻訳者には名前付きトークンとして表示されるため、対象言語に合わせて位置を変更できます。
<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>$localizeによるコンポーネント内テキストのマーク
テンプレートではなくTypeScript内の文字列には、$localizeを付けます。テンプレートでi18n属性を使う場合と同様に、その文字列が抽出対象であることを示します。
const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction文字列を単純に連結してはいけない理由
テキストをハードコードして連結する方法（'You have ' + n + ' items'）では、翻訳に問題が生じます。言語によって語順が異なり、複数形の規則も異なるためです。フレーズ全体をi18nでマークすれば、翻訳者が文法を適切に保てます。
ネストしたマークアップの翻訳
翻訳対象のテキストに子要素が含まれる場合、Angularは子要素をプレースホルダーとして保持します。そのため、翻訳者が誤ってマークアップを削除することはありません。
<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>ソーステキストを整理して保つ
テキストは、通常は完全な文やラベルなど、妥当な最小単位でマークします。1つの文を複数のi18nブロックに分割するのは避けてください。各断片が別々の、翻訳しにくい文字列になるためです。
ビルド時に行われること
i18n属性による実行時のコストはありません。Angularはロケールごとのコンパイル時にマークされたテキストを置き換え、最適化済みの別々のバンドルを生成します。次のレッスンでは、これらの文字列を抽出して翻訳する方法を学びます。
クイックチェック
placeholder属性を翻訳するにはどうしますか？
まとめ
テンプレートのテキストにはi18n属性を、属性にはi18n-attrを付けます。コンテキストにはmeaning|descriptionを、安定したIDには@@customIdを追加します。バインディングはプレースホルダーになり、TypeScriptの文字列には$localizeを使います。マーク付けによる実行時コストはありません。
よくある質問
「翻訳対象テキストのマーキング」レッスンは無料ですか？
はい。「翻訳対象テキストのマーキング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「翻訳対象テキストのマーキング」で何を学びますか？
i18n属性で翻訳対象のテキストを指定します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「翻訳対象テキストのマーキング」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 翻訳対象テキストのマーキング
- メッセージの抽出と翻訳
- 複数形とSelect（ICU）
- ローカライズ済みバンドルの構築