@intlayer/docs 9.4.3 → 9.5.0

package/docs/ja/intlayer_with_svelte_kit.md

@@ -70,37 +70,31 @@ author: aymericzip
 Intlayer は、**多言語ルーティング**、**SSR サポート**、およびスケーリング国際化 (i18n) に必要なすべての機能を提供することにより、SvelteKit と完全に連携するように最適化されています。
 
 </Accordion>
-
 <Accordion header="Bundle size">
 
 大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
 </Accordion>
-
 <Accordion header="保守性">
 
 アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
 
 </Accordion>
-
 <Accordion header="AI Agent">
 
 コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
 </Accordion>
-
 <Accordion header="自動化">
 
 AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
 </Accordion>
-
 <Accordion header="パフォーマンス">
 
 大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
 </Accordion>
-
 <Accordion header="none-dev でのスケーリング">
 
 Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
@@ -108,8 +102,6 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
 </Accordion>
 </AccordionGroup>
 
----
-
 ## SvelteKitアプリケーションでIntlayerをセットアップするステップバイステップガイド
 
 [Application Template](https://github.com/aymericzip/intlayer-sveltekit-template) を GitHub で参照してください。
@@ -157,7 +149,6 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
 ```
 
 <Steps>
-
 <Step number={1} title="依存関係をインストール">
 
 npm を使用して必要なパッケージをインストールしてください:
@@ -207,7 +198,6 @@ bun add vite-intlayer --save-dev
 - **vite-intlayer**: コンテンツ宣言をビルドプロセスに統合するViteプラグイン。
 
 </Step>
-
 <Step number={2} title="プロジェクトの設定">
 
 プロジェクトのルートに設定ファイルを作成します:
@@ -226,7 +216,6 @@ export default config;
 ```
 
 </Step>
-
 <Step number={3} title="Intlayer を Vite 設定に統合する">
 
 `vite.config.ts` を更新して、Intlayer プラグインを含めます。このプラグインは、コンテンツファイルのトランスパイルを処理します。
@@ -242,7 +231,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={4} title="コンテンツを宣言する">
 
 `src` フォルダ内の任意の場所（例：`src/lib/content` またはコンポーネントの隣）にコンテンツ宣言ファイルを作成します。これらのファイルは、各ロケールに対して `t()` 関数を使用してアプリケーション用の翻訳可能なコンテンツを定義します。
@@ -266,7 +254,6 @@ export default heroContent;
 ```
 
 </Step>
-
 <Step number={5} title="Intlayerをコンポーネントで利用する">
 
 これで、任意の Svelte コンポーネントで `useIntlayer` 関数を使用できます。これはロケールが変更されると自動的に更新されるリアクティブストアを返します。この関数は現在のロケール (SSR とクライアント側のナビゲーション の両方) を自動的に尊重します。
@@ -292,7 +279,6 @@ export default heroContent;
 ```
 
 </Step>
-
 <Step number={6} title="ルーティングの設定" isOptional={true}>
 
 以下の手順は、SvelteKit でロケールベースのルーティングをセットアップする方法を示しています。これにより、URL にロケールプレフィックス (例: `/en/about`, `/fr/about`) を含めることができ、SEO とユーザー体験が向上します。
@@ -319,7 +305,6 @@ export default heroContent;
 ```
 
 </Step>
-
 <Step number={7} title="サーバーサイドのロケール検出を処理する">
 
 SvelteKit では、SSR 時に正しいコンテンツをレンダリングするため、サーバーはユーザーのロケールを認識する必要があります。`hooks.server.ts` を使用して、URL またはクッキーからロケールを検出します。
@@ -534,7 +519,6 @@ export const prerender = true;
 ```
 
 </Step>
-
 <Step number={8} title="国際化されたリンク" isOptional={true}>
 
 SEO のため、ルートをロケール接頭辞を付けることが推奨されます (例: `/en/about`, `/fr/about`)。このコンポーネントは現在のロケールで自動的にリンクに接頭辞を付けます。
@@ -569,7 +553,6 @@ goto(localizedPath); // ロケールに応じて /en/about または /fr/about
 ```
 
 </Step>
-
 <Step number={1} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
@@ -612,7 +595,6 @@ goto(localizedPath); // ロケールに応じて /en/about または /fr/about
 ```
 
 </Step>
-
 <Step number={10} title="バックエンドプロキシを追加する" isOptional={true}>
 
 SvelteKitアプリケーションにバックエンドプロキシを追加するには、`vite-intlayer`プラグインが提供する`intlayerProxy`関数を使用できます。このプラグインは、URL、クッキー、およびブラウザーの言語設定に基づいて、ユーザーに最適なロケールを自動的に検出します。
@@ -638,7 +620,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={11} title="intlayer editor / CMS を設定する" isOptional={true}>
 
 intlayer エディターをセットアップするには、[intlayer エディターのドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)に従う必要があります。
@@ -665,7 +646,6 @@ intlayer editor selector を視覚化するには、intlayer のコンテンツ
 ```
 
 </Step>
-
 <Step number={12} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存の codebase がある場合、数千のファイルを変換するのに時間がかかる可能性があります。
@@ -781,8 +761,6 @@ Intlayerによって生成されたファイルを無視することをお勧め
 .intlayer
 ```
 
----
-
 ### さらに進む
 
 - **ビジュアルエディター**: UIから直接翻訳を編集するために、[Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を統合します。
@@ -801,25 +779,21 @@ Intlayerによって生成されたファイルを無視することをお勧め
 SvelteKit ではサーバーサイドの部分に違いが現れます。hooks でのロケール検出、ローカライズされたリンク、エディタ統合がライブラリに付属しており、プロジェクトごとに組み立てる必要がありません。[Intlayer を選ぶ理由](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/interest_of_intlayer.md)と [Svelte i18n ベンチマーク](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/benchmark/svelte.md)を参照してください。
 
 </Question>
-
 <Question title="i18n は SvelteKit のバンドルサイズにどの程度の影響を与えますか？">
 
 ネームスペースベースのセットアップよりもはるかに少なくなります。ページはレンダリングしないカタログをダウンロードしないためです。サーバーレンダリングされたマークアップはサーバー上でコンテンツを解決し、ビルド時コンパイラは `useIntlayer` 呼び出しをコンポーネントが使用する正確な辞書エントリに置き換えるため、未使用のキーと未使用の言語は削除され、[動的辞書](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md)は残りをロケールごとに分割します。通常の代替案と比較すると、Intlayer はバンドルとページサイズを最大 50% 削減します。[バンドル最適化](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md)と[ベンチマーク](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/benchmark/svelte.md)を参照してください。
 
 </Question>
-
 <Question title="`svelte-i18n` または `typesafe-i18n` からコンポーネントを書き直さずに移行できますか？">
 
 ほぼ可能です。[Svelte I18n 移行ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compat/svelte-i18n.md)に従ってコンテンツを移動してください。段階的に移行することもできます。[sync JSON プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)は既存の JSON カタログを信頼できるソースとして保ち、それらから Intlayer 辞書を生成するため、両方のレイヤーが同期を保ちながらコンポーネントを 1 つずつ移動できます。
 
 </Question>
-
 <Question title="既存の JSON 翻訳ファイルを保持できますか？">
 
 はい。[sync JSON プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)は `/messages/{locale}/{namespace}.json` ファイルを信頼できるソースとして保ち、双方向で Intlayer 辞書を生成します。[sync PO プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-po.md)は gettext カタログに対して同じことを行い、[ロケールごとのファイル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/per_locale_file.md)では 1 つのファイルにロケールをグループ化する代わりに言語ごとにコンテンツを分割できます。
 
 </Question>
-
 <Question title="コンテンツをキーごとに移動する必要がありますか？">
 
 いいえ。`npx intlayer extract` を実行すると、Intlayer はコンポーネントを読み込み、ユーザーに見える文字列を抽出し、各コンポーネントの隣に `.content` ファイルを書き込むため、文字列をカタログに 1 つずつコピーする代わりに diff をレビューできます。このガイドのステップ 12 でそれについて説明しています。
@@ -829,7 +803,6 @@ SvelteKit ではサーバーサイドの部分に違いが現れます。hooks
 コンパイラをオンにする前に知っておく価値のある 2 つの制限があります。静的分析によって機能するため、API エラーコードや CMS フィールドなど、実行時にのみ存在する文字列は到達不可能です。また、`className="active"` やステータスコードなどのアプリケーションロジックからユーザーに見える文字列を区別する必要があり、大規模なコードベースではいくつかのアノテーションが必要です。[extract コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md)はあなたをループに保つことでその両方を回避します。
 
 </Question>
-
 <Question title="利用可能なエディタと AI エージェントツールは何ですか？">
 
 5 つのピース、すべてオプションです：
@@ -841,43 +814,36 @@ SvelteKit ではサーバーサイドの部分に違いが現れます。hooks
 - **[ESLint プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/eslint.md)**: `no-raw-text` はハードコードされた文字列にフラグを立て、静的辞書キーと未使用コンテンツのさらなるルールがあります。
 
 </Question>
-
 <Question title="Intlayer は SvelteKit のサーバーサイドレンダリングとプリレンダリングで機能しますか？">
 
 はい。ステップ 7 は `hooks.server.ts` でのサーバーサイドロケール検出をカバーしているため、最初の HTML レスポンスはすでに正しい言語を含んでおり、これは検索エンジンとソーシャルクローラーが読むものです。プリレンダリングされたルートはビルド時にコンテンツを解決します。
 
 </Question>
-
 <Question title="ローカライズされたルートと国際化されたリンクをセットアップするにはどうすればよいですか？">
 
 ステップ 6 と 8 でカバーしています。ルートツリー上のロケールセグメントと、リンク用の `getLocalizedUrl` はナビゲーションをアクティブな言語内に保ち、`routing.mode` はデフォルトロケールがまったくプレフィックスされるかどうかを決定します。[設定リファレンス](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
 </Question>
-
 <Question title="Svelte で言語スイッチャーを構築するにはどうすればよいですか？">
 
 ステップ 9 がコンポーネントを示しています。`useLocale` はアクティブなロケール、宣言されたロケール、cookie に選択を永続化するセッターを公開し、`getLocalizedUrl` は現在のパスを書き直すため、読者は言語を切り替えた後も同じページに留まります。
 
 </Question>
-
 <Question title="SvelteKit アプリを AI で自動的に翻訳するにはどうすればよいですか？">
 
 `npx intlayer fill` を実行します。これは選択した LLM を使用して独自のプロバイダーと API キーで不足している翻訳を入力し、`--git-diff` は実行をブランチで変更されたコンテンツに制限します。[fill コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/fill.md)と [CI/CD 統合](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/CI_CD.md)を参照してください。
 
 </Question>
-
 <Question title="Intlayer は複数形、性別、リッチテキストをサポートしていますか？">
 
 はい：[複数形](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/plurial.md)、[性別ベースのコンテンツ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/gender.md)、条件、[挿入](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/insertion.md)、[Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/markdown.md)、および数値、日付、通貨の[フォーマッター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/formatters.md)。
 
 </Question>
-
 <Question title="翻訳者がコードに触れずにコンテンツを編集するにはどうすればよいですか？">
 
 [ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を通じて、独自のインフラストラクチャで実行され、誰でも実行中のアプリ上でテキストをその場で編集できます。または、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を通じて、コンテンツを外部化してデプロイなしで変更できます。
 
 </Question>
-
 <Question title="Intlayer は無料でオープンソースですか？">
 
 はい、Apache 2.0 ライセンスの下で、商用利用を含みます。ホストされた CMS はオプションの有料サービスで、[自己ホスト](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/self_hosting.md)することもできます。

package/docs/ja/intlayer_with_tanstack+solid.md

@@ -52,37 +52,31 @@ author: aymericzip
 Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化の拡張 (i18n) に必要なすべての機能を提供することにより、TanStack Start および Solid と完全に連携するように最適化されています。
 
 </Accordion>
-
 <Accordion header="バンドルサイズ">
 
 大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
 </Accordion>
-
 <Accordion header="保守性">
 
 アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
 
 </Accordion>
-
 <Accordion header="AI Agent">
 
 コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
 </Accordion>
-
 <Accordion header="自動化">
 
 AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
 </Accordion>
-
 <Accordion header="パフォーマンス">
 
 大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
 </Accordion>
-
 <Accordion header="none-dev でのスケーリング">
 
 Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
@@ -90,8 +84,6 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Tanstack StartアプリケーションでIntlayerをセットアップするためのステップバイステップガイド
 
 <Tabs defaultTab="video">
@@ -127,13 +119,11 @@ Intlayer は単なる i18n ソリューションではなく、**自己ホスト
 GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-tanstack-start-solid-template)を確認してください。
 
 <Steps>
-
 <Step number={1} title="プロジェクト作成">
 
 まず、TanStack Startウェブサイトの[新しいプロジェクトを開始](https://tanstack.com/start/latest/docs/framework/solid/quick-start)ガイドに従って、新しいTanStack Startプロジェクトを作成します。
 
 </Step>
-
 <Step number={2} title="Intlayerパッケージのインストール">
 
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
@@ -189,9 +179,42 @@ bun add vite-intlayer --dev
   Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのViteプラグイン、およびユーザーの優先ロケールの検出、Cookie管理、URLリダイレクトを処理するためのミドルウェアが含まれています。
 
 </Step>
-
 <Step number={3} title="プロジェクトの構成">
 
+### アーキテクチャ
+
+このアーキテクチャでは、ローカライズされたすべてのルートが Solid の `{-$locale}` ルートセグメントの下に配置されます。このアプローチにより、各言語が専用のURLを持つことが保証され、自動ロケールプレフィックス、バリデーション、およびSEOの最適化が可能になります。
+
+```bash
+.
+├── src
+│   ├── components
+│   │   ├── Header.content.ts
+│   │   ├── Header.tsx
+│   │   ├── LocaleSwitcher.content.ts
+│   │   ├── LocaleSwitcher.tsx
+│   │   └── LocalizedLink.tsx
+│   ├── routes
+│   │   ├── {-$locale}
+│   │   │   ├── 404.content.ts
+│   │   │   ├── 404.tsx
+│   │   │   ├── about.content.ts
+│   │   │   ├── about.tsx
+│   │   │   ├── index.content.tsx
+│   │   │   ├── index.tsx
+│   │   │   └── route.tsx             # Locale layout & prefix validation
+│   │   ├── __root.tsx                # Root route with IntlayerProvider
+│   │   └── sitemap[.]xml.ts
+│   ├── router.tsx
+│   └── styles.css
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+### 設定
+
 アプリケーションの言語を構成するための構成ファイルを作成します：
 
 ```typescript fileName="intlayer.config.ts"
@@ -212,7 +235,6 @@ export default config;
 > この構成ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクト、Cookie名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[構成ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
 </Step>
-
 <Step number={4} title="Vite構成にIntlayerを統合する">
 
 Vite構成にintlayerプラグインを追加します：
@@ -246,7 +268,6 @@ export default defineConfig({
 > `intlayer()` Viteプラグインは、IntlayerをViteと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードでそれらを監視します。Viteアプリケーション内でIntlayer環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスを提供します。
 
 </Step>
-
 <Step number={5} title="ルートレイアウトの作成">
 
 現在選択されているロケールを検出するために `useParams` を使用し、`html` タグに `lang` および `dir` 属性を設定することで、国際化をサポートするようにルートレイアウトを構成します。
@@ -291,7 +312,6 @@ const RootComponent: ParentComponent = (props) => {
 ```
 
 </Step>
-
 <Step number={6} title="ロケールレイアウトの作成">
 
 ロケールプレフィックスを処理し、検証を実行するレイアウトを作成します。このレイアウトにより、有効なロケールのみが処理されるようになります。
@@ -328,7 +348,6 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'no-prefix'` または `'search-params'` モードの場合、スロットを完全に削除できます。
 
 </Step>
-
 <Step number={7} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成および管理します：
@@ -376,7 +395,6 @@ export default appContent;
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
 </Step>
-
 <Step number={8} title="ロケール対応のコンポーネントとフックを利用する">
 
 ロケール対応のナビゲーションのために `LocalizedLink` コンポーネントを作成します：
@@ -457,7 +475,6 @@ export const useLocalizedNavigate = () => {
 ```
 
 </Step>
-
 <Step number={9} title="ページでIntlayerを活用する">
 
 > コンポーネント内では既定で **`useIntlayer`** を使用してください。コンパイラがレンダリング対象のロケールへ解決してくれるため、これが推奨される方法です。`getIntlayer` / `getIntlayerAsync` は Solid ツリーの外側（ルートの `head`、ローダー、サーバー関数）でのみ使用します。
@@ -491,10 +508,10 @@ function RouteComponent() {
 }
 ```
 
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```tsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
 > Solidでは、`useIntlayer`はリアクティブなコンテンツ（例：`content`）を返します。そのプロパティに直接アクセスできます。
@@ -502,7 +519,6 @@ function RouteComponent() {
 > `useIntlayer` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/useIntlayer.md)を参照してください。
 
 </Step>
-
 <Step number={10} title="ロケール切り替えコンポーネントの作成">
 
 ユーザーが言語を変更できるようにするコンポーネントを作成します：
@@ -548,7 +564,6 @@ export default LocaleSwitcher;
 > `useLocale` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/solid-intlayer/useLocale.md)を参照してください。
 
 </Step>
-
 <Step number={11} title="HTML属性の管理">
 
 ステップ 5 で見たように、ルートコンポーネントで `useParams` を使用して `html` タグの `lang` および `dir` 属性を管理できます。これにより、サーバーとクライアントで正しい属性が設定されるようになります。
@@ -567,7 +582,6 @@ const RootComponent: ParentComponent = (props) => {
 ```
 
 </Step>
-
 <Step number={12} title="ミドルウェアの追加">
 
 `intlayerProxy` を使用して、アプリケーションにサーバーサイドのルーティングを追加することもできます。このプラグインはURLに基づいて現在のロケールを自動的に検出し、適切なロケールCookieを設定します。ロケールが指定されていない場合、プラグインはユーザーのブラウザ言語設定に基づいて最も適切なロケールを決定します。ロケールが検出されない場合は、デフォルトのロケールにリダイレクトします。
@@ -603,7 +617,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={12} title="メタデータの国際化">
 
 <Tabs>
@@ -796,7 +809,6 @@ export const Route = createFileRoute("/{-$locale}/")({
 | DX                  | 最もシンプル               | `await` が 1 つ             | コンテンツを `loaderData` 経由で受け渡し  |
 
 </Step>
-
 <Step number={13} title="サーバーアクションでロケールを取得する">
 
 サーバーアクションやAPIエンドポイント内から現在のロケールにアクセスしたい場合があります。
@@ -833,7 +845,6 @@ export const getLocaleServer = createServerFn().handler(async () => {
 ```
 
 </Step>
-
 <Step number={14} title="404ページを管理する">
 
 ユーザーが存在しないページにアクセスしたときに、カスタム 404 ページを表示できます。ロケールプレフィックスは、404 ページがトリガーされる方法に影響を与える可能性があります。
@@ -909,7 +920,6 @@ export const Route = createFileRoute("/{-$locale}/$")({
 ```
 
 </Step>
-
 <Step number={15} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存のコードベースがある場合、数千ものファイルを変換するのは時間がかかる可能性があります。
@@ -1024,7 +1034,6 @@ bun run build # または bun run dev
 </Tabs>
 
 </Step>
-
 <Step number={16} title="サイトマップの生成">
 
 > Intlayer によって生成されたサイトマップは、`xhtml:link` 名前空間 (Hreflang XML Extensions) をサポートしています。生の URL のみを表示するデフォルトのサイトマップ ジェネレーターとは異なり、Intlayer はページのすべての言語バージョン (例: `/about`、`/about?lang=fr`、`/about?lang=es`) 間に必要な双方向リンクを自動的に作成します。これにより、検索エンジンが正しい言語バージョンを正しい対象者に正しくインデックス付けして提供できるようになります。
@@ -1097,7 +1106,6 @@ export const Route = createFileRoute("/sitemap.xml")({
 ```
 
 </Step>
-
 <Step number={17} title="TypeScriptの構成">
 
 Intlayerは、TypeScriptの利点を活用し、コードベースをより強固にするために、モジュール拡張（module augmentation）を使用します。
@@ -1129,8 +1137,6 @@ Intlayerによって生成されたファイルを無視することをお勧め
 .intlayer
 ```
 
----
-
 ## VS Code 拡張機能
 
 Intlayerでの開発体験を向上させるために、公式の **Intlayer VS Code 拡張機能** をインストールできます。
@@ -1146,14 +1152,10 @@ Intlayerでの開発体験を向上させるために、公式の **Intlayer VS
 
 拡張機能の使用方法の詳細については、[Intlayer VS Code 拡張機能ドキュメント](https://intlayer.org/doc/vs-code-extension) を参照してください。
 
----
-
 ## さらに進む
 
 さらに進むには、[ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装したり、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使用してコンテンツを外部化したりできます。
 
----
-
 ## ドキュメント参照
 
 - [Intlayer ドキュメント](https://intlayer.org)
@@ -1179,25 +1181,21 @@ TanStack Start には i18n レイヤーが付属していないため、Solid
 [Intlayer を選ぶ理由](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/interest_of_intlayer.md)と [TanStack Start i18n ベンチマーク](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/benchmark/tanstack.md)を参照してください。
 
 </Question>
-
 <Question title="i18n は TanStack Start のバンドルサイズにどの程度の影響を与えますか？">
 
 名前空間ベースのセットアップよりもはるかに少なくなります。ページはレンダリングしないカタログをダウンロードしないためです。サーバーレンダリングされたマークアップはサーバー上でコンテンツを解決し、ビルド時コンパイラは `useIntlayer` 呼び出しをコンポーネントが使用する正確な辞書エントリに置き換えるため、未使用のキーと未使用の言語は削除され、[動的辞書](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dynamic_dictionaries/index.md)は残りをロケールごとに分割します。通常の代替案と比較すると、Intlayer はバンドルとページサイズを最大 50% 削減します。[バンドル最適化](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/bundle_optimization.md)と[ベンチマーク](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/benchmark/tanstack.md)を参照してください。
 
 </Question>
-
 <Question title="`@solid-primitives/i18n` または `i18next` からコンポーネントを書き直さずに移行できますか？">
 
 ほぼ可能です。[i18next 移行ガイド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/migration_from_i18next_to_intlayer.md)に従ってコンテンツを移動してください。段階的に移行することもできます：[sync JSON プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)は既存の JSON カタログを信頼できるソースとして保ち、それらから Intlayer 辞書を生成するため、両方のレイヤーは同期を保ちながらコンポーネントを一度に 1 つずつ移動できます。
 
 </Question>
-
 <Question title="既存の JSON 翻訳ファイルを保持できますか？">
 
 はい。[sync JSON プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-json.md)は `/messages/{locale}/{namespace}.json` ファイルを信頼できるソースとして保ち、双方向で Intlayer 辞書を生成します。[sync PO プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/plugins/sync-po.md)は gettext カタログに対して同じことを行い、[ロケールごとのファイル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/per_locale_file.md)では 1 つのファイルにロケールをグループ化する代わりに言語ごとにコンテンツを分割できます。
 
 </Question>
-
 <Question title="コンテンツをキーごとに移動する必要がありますか？">
 
 いいえ。`npx intlayer extract` を実行すると、Intlayer はコンポーネントを読み込み、ユーザーに見える文字列を抽出し、各コンポーネントの隣に `.content` ファイルを書き込むため、カタログに文字列を 1 つずつコピーする代わりに差分をレビューできます。このガイドのステップ 15 でそれについて説明しています。
@@ -1207,7 +1205,6 @@ TanStack Start には i18n レイヤーが付属していないため、Solid
 コンパイラをオンにする前に知っておく価値のある 2 つの制限があります。静的分析で動作するため、API エラーコードや CMS フィールドなど、実行時にのみ存在する文字列は到達できません。また、`className="active"` やステータスコードなどのアプリケーションロジックからユーザーに見える文字列を区別する必要があり、大規模なコードベースではいくつかのアノテーションが必要です。[extract コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md)はあなたをループに保つことでこの両方を回避します。
 
 </Question>
-
 <Question title="利用可能なエディターと AI エージェントツールは何ですか？">
 
 5 つのツールがあり、すべてオプションです：
@@ -1219,61 +1216,51 @@ TanStack Start には i18n レイヤーが付属していないため、Solid
 - **[ESLint プラグイン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/eslint.md)**: `no-raw-text` はハードコードされた文字列にフラグを立て、静的辞書キーと未使用コンテンツのさらなるルールがあります。
 
 </Question>
-
 <Question title="Intlayer はサーバーサイドレンダリングとプリレンダリングをサポートしていますか？">
 
 はい。コンテンツは SSR 中に解決され、ステップ 16 はローカライズされたルートごとに 1 つの静的ドキュメントを出力するプリレンダー構成と、同じルートテーブルから生成されたローカライズされたサイトマップをカバーしています。
 
 </Question>
-
 <Question title="ロケールを変更すると、アプリ全体が再レンダリングされますか？">
 
 いいえ。コンテンツは Solid signals に支えられているため、言語を切り替えると、変更された値を読み取る DOM ノードのみが更新されます。
 
 </Question>
-
 <Question title="hreflang タグとローカライズされたサイトマップを追加するにはどうすればよいですか？">
 
 `src/routes/sitemap[.]xml.ts` ルートで組み込みの `generateSitemap` 関数を使用してください。`xhtml:link` 名前空間を出力するため、ページのすべての言語バージョンは他の言語に双方向でリンクします。ローカライズされた `head` メタデータはステップ 12 でカバーされています。
 
 </Question>
-
 <Question title="ローカライズされたルートで 404 ページを処理するにはどうすればよいですか？">
 
 ステップ 14 でカバーされています。`validatePrefix` は URL のロケールセグメントが宣言されたロケールであるかどうかを示すため、`/xx/about` は重複ページとしてインデックスされる代わりに実際の 404 を返します。
 
 </Question>
-
 <Question title="URL にロケールを入れる必要がありますか？">
 
 いいえ。`routing.mode` は `"prefix-no-default"`（デフォルト）、`"prefix-all"`、`"no-prefix"`、`"search-params"` を受け入れ、`routing.domains` は各ロケールを独自のドメインにマップします。[構成リファレンス](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
 </Question>
-
 <Question title="現在のルートを保持するロケール切り替え機能を構築するにはどうすればよいですか？">
 
 ステップ 9 がコンポーネントを示しています。`useLocale` はアクティブなロケール、利用可能なロケール、選択を保持するセッターを公開し、`getLocalizedUrl` は現在のパスをターゲット言語に書き直すため、ユーザーは同じページに留まります。
 
 </Question>
-
 <Question title="AI で自動的にアプリを翻訳するにはどうすればよいですか？">
 
 `npx intlayer fill` を実行してください。選択した LLM を使用して、独自のプロバイダーと API キーで不足している翻訳を入力し、`--git-diff` は実行をブランチで変更されたコンテンツに制限します。[fill コマンド](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/fill.md)と [CI/CD 統合](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/CI_CD.md)を参照してください。
 
 </Question>
-
 <Question title="Intlayer は複数形、性別、リッチテキストをサポートしていますか？">
 
 はい：[複数形](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/plurial.md)、[性別ベースのコンテンツ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/gender.md)、条件、[挿入](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/insertion.md)、[Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/markdown.md)、および数値、日付、通貨の[フォーマッター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/formatters.md)。
 
 </Question>
-
 <Question title="翻訳者がコードに触れずにコンテンツを編集するにはどうすればよいですか？">
 
 [ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を通じて、独自のインフラストラクチャで実行され、誰もが実行中のアプリ上でテキストをその場で編集できます。または、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を通じて、コンテンツを外部化してデプロイメントなしで変更できます。
 
 </Question>
-
 <Question title="Intlayer は無料でオープンソースですか？">
 
 はい、Apache 2.0 ライセンスの下で、商用利用を含みます。ホストされた CMS はオプションの有料サービスで、[自己ホスト](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/self_hosting.md)も可能です。