@intlayer/docs 5.5.10 → 5.5.11

package/docs/ja/how_works_intlayer.md

@@ -0,0 +1,254 @@
+---
+createdAt: 2024-08-12
+updatedAt: 2025-06-29
+title: Intlayerの仕組み
+description: Intlayerが内部でどのように機能するかを学びます。Intlayerを強力にするアーキテクチャとコンポーネントを理解しましょう。
+keywords:
+  - Intlayer
+  - どのように機能するか
+  - アーキテクチャ
+  - コンポーネント
+  - 内部動作
+slugs:
+  - doc
+  - concept
+  - how-works-intlayer
+---
+
+# Intlayerの仕組み
+
+## 概要
+
+Intlayerの主なアイデアは、コンポーネントごとのコンテンツ管理を採用することです。そのため、Intlayerの背後にある考え方は、コンテンツをコードベースのどこにでも、例えばコンポーネントと同じディレクトリ内に宣言できるようにすることです。
+
+```bash
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+これを実現するために、Intlayerの役割は、プロジェクト内に存在するさまざまな形式の`コンテンツ宣言ファイル`をすべて見つけ出し、それらから`辞書`を生成することです。
+
+したがって、主に2つのステップがあります：
+
+- ビルドステップ
+- 解釈ステップ
+
+### 辞書のビルドステップ
+
+ビルドステップは以下の3つの方法で実行できます：
+
+- CLIを使用して`npx intlayer build`を実行
+- [vscode拡張機能](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/vs_code_extension.md)を使用
+- [`vite-intlayer`パッケージ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/vite-intlayer/index.md)などのアプリプラグインを使用、または[Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/index.md)用の同等のプラグインを使用。これらのプラグインのいずれかを使用すると、アプリケーションを開始（開発）またはビルド（本番）する際に、Intlayerが自動的に辞書をビルドします。
+
+1. コンテンツファイルの宣言
+
+   - コンテンツファイルは、TypeScript、ECMAScript、CommonJS、JSONなど、さまざまな形式で定義できます。
+   - コンテンツファイルはプロジェクト内のどこにでも定義でき、これによりメンテナンス性とスケーラビリティが向上します。コンテンツファイルの拡張子の規約を守ることが重要です。この拡張子はデフォルトで`*.content.{js|cjs|mjs|ts|tsx|json}`ですが、[設定ファイル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)で変更できます。
+
+2. `辞書`の生成
+
+   - 辞書はコンテンツファイルから生成されます。デフォルトでは、Intlayer辞書はプロジェクトの`.intlayer/dictionaries`ディレクトリに生成されます。
+   - これらの辞書は、すべてのニーズに対応し、アプリケーションのパフォーマンスを最適化するために、さまざまな形式で生成されます。
+
+3. 辞書型の生成
+   `辞書`に基づいて、Intlayerはアプリケーションで使用可能な型を生成します。
+
+- 辞書型はIntlayerの`コンテンツ宣言ファイル`から生成されます。デフォルトでは、Intlayer辞書型はプロジェクトの`.intlayer/types`ディレクトリに生成されます。
+
+- Intlayerの[モジュール拡張](https://www.typescriptlang.org/docs/handbook/declaration-merging.html)は、Intlayerに追加の型を定義できるTypeScriptの機能です。これにより、利用可能な引数や必要な引数を提案することで開発体験が向上します。
+  生成された型の中には、Intlayer辞書型や言語設定型が含まれ、`types/intlayer.d.ts`ファイルに追加され、他のパッケージで使用されます。これを行うには、`tsconfig.json`ファイルがプロジェクトの`types`ディレクトリを含むように設定されている必要があります。
+
+### 辞書の解釈ステップ
+
+Intlayerを使用すると、`useIntlayer`フックを使ってアプリケーション内でコンテンツにアクセスできます。
+
+```tsx
+const MyComponent = () => {
+  const content = useIntlayer("my-component");
+  return <div>{content.title}</div>;
+};
+```
+
+このフックはロケールの検出を管理し、現在のロケールに対応するコンテンツを返します。このフックを使用すると、Markdownの解釈、複数形の管理なども可能です。
+
+> Intlayerのすべての機能を見るには、[辞書ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)を参照してください。
+
+## 遠隔コンテンツ
+
+Intlayerを使用すると、コンテンツをローカルで宣言し、それをCMSにエクスポートして非技術的なチームが編集できるようにすることができます。
+
+そのため、Gitでコードを操作するのと同様に、CMSからアプリケーションにコンテンツをプッシュおよびプルすることが可能です。
+
+CMSを使用して外部化された辞書の場合、Intlayerは基本的なフェッチ操作を行い、遠隔の辞書を取得してローカルの辞書とマージします。プロジェクトで設定されている場合、Intlayerはアプリケーションの起動（開発）やビルド（本番）時にCMSからのコンテンツ取得を自動的に管理します。
+
+## ビジュアルエディタ
+
+Intlayerは、視覚的にコンテンツを編集できるビジュアルエディタも提供しています。この[ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)は、外部の`intlayer-editor`パッケージで利用可能です。
+
+![ビジュアルエディタ](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
+
+- サーバーは、クライアントからのリクエストを受け取り、`dictionaries`やクライアント側でアクセス可能にするための設定など、アプリケーションのコンテンツを取得するシンプルなExpressアプリケーションです。
+- 一方、クライアントは視覚的なインターフェースを使ってコンテンツとやり取りするためのReactアプリケーションです。
+  `useIntlayer`を使ってコンテンツを呼び出し、エディタが有効になっている場合、文字列は自動的に`IntlayerNode`という名前のProxyオブジェクトでラップされます。このノードは、ビジュアルエディタのインターフェースを含むラップされたiframeと通信するために`window.sendMessage`を使用します。
+  エディタ側では、これらのメッセージを受信してコンテンツとの実際のインタラクションをシミュレートし、アプリケーションのコンテキスト内で直接テキストを編集できるようにします。
+
+## アプリビルドの最適化
+
+アプリケーションのバンドルサイズを最適化するために、Intlayerはアプリケーションのビルドを最適化するための2つのプラグインを提供しています：`@intlayer/babel`と`@intlayer/swc`プラグイン。
+BabelおよびSWCプラグインは、アプリケーションの抽象構文木（AST）を解析してIntlayer関数の呼び出しを最適化されたコードに置き換えることで動作します。このプロセスにより、実際に使用されている辞書のみがインポートされるようになり、チャンクの最適化とバンドルサイズの削減が行われるため、本番環境での最終バンドルが軽量化されます。
+
+開発モードでは、Intlayerは辞書の集中型静的インポートを使用して開発体験を簡素化します。
+
+[設定](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)で`activateDynamicImport`オプションを有効にすると、Intlayerは動的インポートを使用して辞書をロードします。このオプションは、アプリケーションのレンダリング時に非同期処理を回避するためにデフォルトで無効になっています。
+
+> `@intlayer/babel`は`vite-intlayer`パッケージでデフォルトで利用可能です。
+
+> `@intlayer/swc`は、Next.jsでSWCプラグインがまだ実験的であるため、`next-intlayer`パッケージにはデフォルトでインストールされていません。
+
+アプリケーションのビルドを設定する方法については、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
+
+## パッケージ
+
+Intlayerは、翻訳プロセスにおいて特定の役割を持つ複数のパッケージで構成されています。このパッケージの構造を示す図は以下の通りです：
+
+![intlayerのパッケージ](https://github.com/aymericzip/intlayer/blob/main/docs/assets/packages_dependency_graph.svg)
+
+### intlayer
+
+`intlayer`パッケージは、コンテンツファイル内でコンテンツを宣言するためにアプリケーションで使用されます。
+
+### react-intlayer
+
+`react-intlayer`パッケージは、Intlayer辞書を解釈し、Reactアプリケーションで使用可能にします。
+
+### next-intlayer
+
+`next-intlayer`パッケージは、`react-intlayer`の上にレイヤーを構築し、Next.jsアプリケーションでIntlayer辞書を使用可能にします。翻訳ミドルウェア、ルーティング、または`next.config.js`ファイルの設定など、Next.js環境でIntlayerを動作させるための重要な機能を統合しています。
+
+### vue-intlayer
+
+`vue-intlayer`パッケージは、Intlayer辞書を解釈し、Vueアプリケーションで使用可能にします。
+
+### nuxt-intlayer
+
+### nuxt-intlayer
+
+`nuxt-intlayer`パッケージは、NuxtモジュールとしてIntlayer辞書をNuxtアプリケーションで使用可能にします。翻訳ミドルウェア、ルーティング、`nuxt.config.js`ファイルの設定など、Nuxt環境でIntlayerを動作させるための重要な機能を統合しています。
+
+### svelte-intlayer (作業中)
+
+`svelte-intlayer`パッケージは、Intlayer辞書を解釈し、Svelteアプリケーションで使用可能にします。
+
+### solid-intlayer (作業中)
+
+`solid-intlayer`パッケージは、Intlayer辞書を解釈し、Solid.jsアプリケーションで使用可能にします。
+
+### preact-intlayer
+
+`preact-intlayer`パッケージは、Intlayer辞書を解釈し、Preactアプリケーションで使用可能にします。
+
+### angular-intlayer (作業中)
+
+`angular-intlayer`パッケージは、Intlayer辞書を解釈し、Angularアプリケーションで使用可能にします。
+
+### express-intlayer
+
+`express-intlayer`パッケージは、Express.jsバックエンドでIntlayerを使用するために使用されます。
+
+### react-native-intlayer
+
+`react-native-intlayer`パッケージは、MetroバンドラーでIntlayerを動作させるためのプラグインを統合するツールを提供します。
+
+### lynx-intlayer
+
+`lynx-intlayer`パッケージは、LynxバンドラーでIntlayerを動作させるためのプラグインを統合するツールを提供します。
+
+### vite-intlayer
+
+Viteバンドラー([Vite](https://vite.dev/guide/why.html#why-bundle-for-production))とIntlayerを統合するためのViteプラグイン、およびユーザーの優先ロケールを検出し、クッキーを管理し、URLリダイレクトを処理するためのミドルウェアを含みます。
+
+### react-scripts-intlayer
+
+`react-scripts-intlayer`パッケージには、Create React AppベースのアプリケーションとIntlayerを統合するためのコマンドとプラグインが含まれています。これらのプラグインは[craco](https://craco.js.org/)に基づいており、[Webpack](https://webpack.js.org/)バンドラーの追加設定も含まれています。
+
+### intlayer-editor
+
+`intlayer-editor`パッケージは、ビジュアルエディターの使用を可能にするために使用されます。このパッケージはオプションであり、アプリケーションにインストールして`react-intlayer`パッケージによって使用されます。
+2つの部分で構成されています：サーバーとクライアント。
+
+クライアントには、`react-intlayer`で使用されるUI要素が含まれています。
+
+Expressに基づいたサーバーは、ビジュアルエディターのリクエストを受信し、コンテンツファイルを管理または変更するために使用されます。
+
+### intlayer-cli
+
+`intlayer-cli`パッケージは、`npx intlayer dictionaries build`コマンドを使用して辞書を生成するために使用できます。`intlayer`がすでにインストールされている場合、CLIは自動的にインストールされ、このパッケージは必要ありません。
+
+### @intlayer/core
+
+`@intlayer/core`パッケージは、Intlayerの主要なパッケージです。翻訳および辞書管理機能が含まれています。`@intlayer/core`はマルチプラットフォームであり、他のパッケージによって辞書の解釈を実行するために使用されます。
+
+### @intlayer/config
+
+`@intlayer/config`パッケージは、利用可能な言語、Next.jsミドルウェアパラメーター、または統合エディター設定など、Intlayerの設定を構成するために使用されます。
+
+### @intlayer/webpack
+
+`@intlayer/webpack`パッケージは、WebpackベースのアプリケーションをIntlayerと連携させるためのWebpack設定を提供します。このパッケージは、既存のWebpackアプリケーションに追加するプラグインも提供します。
+
+### @intlayer/cli
+
+`@intlayer/cli`パッケージは、Intlayerコマンドラインインターフェースに関連するスクリプトを宣言するために使用されるNPMパッケージです。すべてのIntlayer CLIコマンドの一貫性を確保します。このパッケージは特に、[intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/ja/packages/intlayer-cli/index.md)や[intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/ja/packages/intlayer/index.md)パッケージによって使用されます。
+
+### @intlayer/mcp
+
+`@intlayer/mcp`パッケージは、Intlayerエコシステム向けにAI搭載のIDE支援を提供するMCP（Model Context Protocol）サーバーを提供します。ドキュメントを自動的に読み込み、Intlayer CLIと統合されます。
+`@intlayer/mcp`パッケージは、Intlayerエコシステムに特化したAI搭載のIDE支援を提供するMCP（Model Context Protocol）サーバーを提供します。ドキュメントを自動的に読み込み、Intlayer CLIと統合されます。
+
+### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
+
+`@intlayer/dictionaries-entry`、`@intlayer/unmerged-dictionaries-entry`、および`@intlayer/dynamic-dictionaries-entry`パッケージは、Intlayer辞書のエントリパスを返します。ブラウザからファイルシステムを検索することは不可能なため、WebpackやRollupのようなバンドラーを使用して辞書のエントリパスを取得することはできません。これらのパッケージはエイリアスとして設計されており、Vite、Webpack、Turbopackなどのさまざまなバンドラーでのバンドル最適化を可能にします。
+
+### @intlayer/chokidar
+
+`@intlayer/chokidar`パッケージは、コンテンツファイルを監視し、変更があるたびに修正された辞書を再生成するために使用されます。
+
+### @intlayer/editor
+
+`@intlayer/editor`パッケージは、辞書エディターに関連するユーティリティを提供します。特に、アプリケーションとIntlayerエディターを連携させるためのAPIや、辞書を操作するためのユーティリティが含まれています。このパッケージはクロスプラットフォーム対応です。
+
+### @intlayer/editor-react
+
+`@intlayer/editor-react`パッケージは、ReactアプリケーションとIntlayerエディターを連携させるための状態、コンテキスト、フック、およびコンポーネントを提供します。
+
+### @intlayer/babel
+
+`@intlayer/babel`パッケージは、ViteおよびWebpackベースのアプリケーション向けに辞書のバンドルを最適化するツールを提供します。
+
+### @intlayer/swc
+
+`@intlayer/swc`パッケージは、Next.jsアプリケーション向けに辞書のバンドルを最適化するツールを提供します。
+
+### @intlayer/api
+
+`@intlayer/api`パッケージは、バックエンドとやり取りするためのAPI SDKです。
+
+### @intlayer/design-system
+
+`@intlayer/design-system`パッケージは、CMSとビジュアルエディター間でデザイン要素を共有するために使用されます。
+
+### @intlayer/backend
+
+`@intlayer/backend`パッケージは、バックエンドタイプをエクスポートし、将来的にはスタンドアロンパッケージとしてバックエンドを提供する予定です。
+
+## スマートドキュメントとチャットする
+
+- [スマートドキュメントに質問する](https://intlayer.org/doc/chat)
+
+## ドキュメント履歴
+
+- 5.5.10 - 2025-06-29: 初期履歴

package/docs/ja/index.md

@@ -0,0 +1,164 @@
+---
+createdAt: 2025-02-07
+updatedAt: 2025-06-29
+title: Intlayer ドキュメント - JavaScript向け完全i18nガイド
+description: JavaScript、React、Next.js、Expressなどのフレームワーク向けのモダンな国際化ライブラリIntlayerの完全ドキュメント。
+keywords:
+  - intlayer
+  - 国際化
+  - i18n
+  - JavaScript
+  - React
+  - Next.js
+  - ドキュメント
+  - 翻訳
+  - 多言語
+slugs:
+  - doc
+  - index
+---
+
+# Intlayer ドキュメント
+
+公式の**Intlayer**ドキュメントへようこそ！ここでは、**Next.js**、**React**、**Vite**、**Express**、またはその他のJavaScript環境で作業しているかに関わらず、Intlayerを統合、設定、そしてマスターするために必要なすべての情報を見つけることができます。
+
+Intlayerは、アプリケーションの翻訳に柔軟でモダンなアプローチを提供します。インストールとセットアップから、**AIによる翻訳**、**TypeScript**定義、**サーバーコンポーネント**対応などの高度な機能まで、ドキュメントがあなたを導き、シームレスで多言語対応の体験を実現する力を与えます。
+
+---
+
+## はじめに
+
+- **[イントロダクション](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/introduction.md)**  
+  Intlayerの仕組み、そのコア機能、そしてなぜi18nにおいて画期的な存在であるかの概要を把握しましょう。
+
+- **[Intlayerの仕組み](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/how_works_intlayer.md)**  
+  アーキテクチャ設計に深く入り込み、Intlayerがコンテンツの宣言から翻訳の配信までどのように処理しているかを学びます。
+
+- **[設定](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)**  
+  プロジェクトのニーズに合わせてIntlayerをカスタマイズしましょう。ミドルウェアのオプション、ディレクトリ構造、そして高度な設定を探ります。
+
+- **[Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_cli.md)**  
+  コンテンツと翻訳をコマンドラインツールで管理します。コンテンツのプッシュやプル、翻訳の自動化などの方法を発見してください。
+
+- **[Intlayerエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)**  
+  非開発者とのコラボレーションを簡素化し、無料で直感的なCMS内でAIを活用して翻訳を強化します。
+
+---
+
+## コアコンセプト
+
+### 辞書
+
+多言語コンテンツをコードの近くに整理し、一貫性と保守性を保ちます。
+
+- **[はじめに](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/get_started.md)**  
+  Intlayerでコンテンツを宣言する基本を学びます。
+
+- **[翻訳](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/translation.md)**  
+  翻訳がどのように生成され、保存され、アプリケーションで利用されるかを理解しましょう。
+
+- **[列挙](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/enumeration.md)**  
+  複数言語にわたる繰り返しや固定データのセットを簡単に管理します。
+
+- **[条件](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/conditional.md)**  
+  Intlayerで条件ロジックを使用して動的なコンテンツを作成する方法を学びます。
+
+- **[挿入](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/insertion.md)**  
+  挿入プレースホルダーを使って文字列に値を挿入する方法を発見しましょう。
+
+- **[関数フェッチ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/function_fetching.md)**
+- **[関数フェッチ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/function_fetching.md)**  
+  プロジェクトのワークフローに合わせてカスタムロジックで動的にコンテンツを取得する方法を確認します。
+
+- **[マークダウン](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/markdown.md)**  
+  Intlayerでリッチコンテンツを作成するためにMarkdownを使用する方法を学びます。
+
+- **[ファイル埋め込み](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/file_embeddings.md)**  
+  Intlayerで外部ファイルを埋め込み、コンテンツエディタで使用する方法を発見します。
+
+- **[ネスティング](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/nesting.md)**  
+  Intlayerでコンテンツをネストして複雑な構造を作成する方法を理解します。
+
+---
+
+## 環境と統合
+
+Intlayerは柔軟性を念頭に置いて構築されており、人気のあるフレームワークやビルドツールとのシームレスな統合を提供します：
+
+- **[Next.js 15とIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_15.md)**
+- **[Next.js 14（App Router）とIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_14.md)**
+- **[Next.js Page RouterとIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_nextjs_page_router.md)**
+- **[React CRAとIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_create_react_app.md)**
+- **[Vite + ReactとIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_vite+react.md)**
+- **[React Native と Expo での Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_react_native+expo.md)**
+- **[Lynx と React での Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_lynx+react.md)**
+- **[Express での Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_express.md)**
+
+各統合ガイドには、**サーバーサイドレンダリング**、**動的ルーティング**、**クライアントサイドレンダリング**など、Intlayer の機能を活用するためのベストプラクティスが含まれており、高速で SEO に優れ、非常にスケーラブルなアプリケーションを維持できます。
+
+---
+
+## パッケージ
+
+Intlayer のモジュラー設計は、特定の環境やニーズに対応した専用パッケージを提供します。
+
+### `intlayer`
+
+i18n設定を構成および管理するためのコアユーティリティ関数。
+
+- **[getConfiguration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getConfiguration.md)**
+- **[getHTMLTextDir](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getHTMLTextDir.md)**
+- **[getLocaleLang](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getLocaleLang.md)**
+- **[getLocaleName](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getLocaleName.md)**
+- **[getLocalizedUrl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getLocalizedUrl.md)**
+- **[getMultilingualUrls](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getMultilingualUrls.md)**
+- **[getPathWithoutLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getPathWithoutLocale.md)**
+- **[getTranslation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getTranslation.md)**
+- **[getEnumeration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/intlayer/getEnumeration.md)**
+
+### `express-intlayer`
+
+**Express**ベースのアプリケーション内でIntlayerを活用しましょう：
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/express-intlayer/t.md)**  
+  サーバールートやビューのための、最小限でシンプルな翻訳ヘルパー。
+
+### `react-intlayer`
+
+**React** アプリケーションを強力なフックで強化しましょう：
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)**
+
+### `next-intlayer`
+
+**Next.js** とシームレスに統合：
+
+- **[t](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/t.md)**
+- **[useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useIntlayer.md)**
+- **[useDictionary](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useDictionary.md)**
+- **[useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/next-intlayer/useLocale.md)**
+
+---
+
+## 追加リソース
+
+- **[ブログ: Intlayer と i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_i18next.md)**  
+  Intlayer が人気のある **i18next** ライブラリとどのように補完し、比較されるかを学びましょう。
+
+- **[YouTubeでのライブチュートリアル](https://youtu.be/W2G7KxuSD4c?si=GyU_KpVhr61razRw)**  
+  包括的なデモを視聴し、Intlayer をリアルタイムで統合する方法を学びましょう。
+
+---
+
+## 貢献とフィードバック
+
+私たちはオープンソースとコミュニティ主導の開発の力を重視しています。改善提案、新しいガイドの追加、またはドキュメントの問題修正を希望される場合は、遠慮なくプルリクエストを送信するか、[GitHubリポジトリ](https://github.com/aymericzip/intlayer/blob/main/docs/docs)でイシューを開いてください。
+
+**アプリケーションの翻訳をより速く、より効率的に始めませんか？** 今すぐドキュメントにアクセスしてIntlayerの使用を開始しましょう。コンテンツを整理し、チームの生産性を高める堅牢で効率的な国際化アプローチを体験してください。
+
+## ドキュメント履歴
+
+- 5.5.10 - 2025-06-29: 履歴初期化

package/docs/ja/interest_of_intlayer.md

@@ -0,0 +1,160 @@
+---
+createdAt: 2024-08-14
+updatedAt: 2025-06-29
+title: Intlayerの利点
+description: プロジェクトでIntlayerを使用する利点とメリットを発見しましょう。なぜIntlayerが他のフレームワークの中で際立っているのかを理解してください。
+keywords:
+  - 利点
+  - メリット
+  - Intlayer
+  - フレームワーク
+  - 比較
+slugs:
+  - doc
+  - concept
+  - interest
+---
+
+# Intlayer: あなたのウェブサイトを翻訳するためのカスタマイズされた方法
+
+**Intlayer** はJavaScript開発者向けに特別に設計された国際化ライブラリです。コードのあらゆる場所でコンテンツの宣言を可能にします。多言語コンテンツの宣言を構造化された辞書に変換し、コードに簡単に統合できるようにします。TypeScriptを使用することで、**Intlayer** は開発をより強力かつ効率的にします。
+
+## 使用例
+
+```bash codeFormat="typescript"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.ts
+        └── index.tsx
+```
+
+```bash codeFormat="commonjs"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.cjs
+        └── index.mjs
+```
+
+```bash codeFormat="esm"
+.
+└── Components
+    └── MyComponent
+        ├── index.content.mjs
+        └── index.js
+```
+
+```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { t } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+// コンポーネントの翻訳コンテンツの定義
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+export default componentExampleContent;
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { t } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+// コンポーネントの翻訳コンテンツの定義
+const componentExampleContent = {
+  key: "component-example",
+  content: {
+    myTranslatedContent: t({
+      en: "Hello World",
+      fr: "Bonjour le monde",
+      es: "Hola Mundo",
+    }),
+  },
+};
+
+module.exports = componentExampleContent;
+```
+
+```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+import { useIntlayer } from "react-intlayer";
+
+// コンポーネント例の定義
+export const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+// コンポーネント例の定義
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+// コンポーネント例の定義
+const ComponentExample = () => {
+  const { myTranslatedContent } = useIntlayer("component-example");
+
+  return <span>{myTranslatedContent}</span>;
+};
+```
+
+## なぜIntlayerを選ぶのか？
+
+| 機能                                 | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **JavaScript駆動のコンテンツ管理**   | JavaScriptの柔軟性を活用して、コンテンツを効率的に定義および管理します。                                                                                                                                                                                                                                                                                                                                                                                                     |
+| **型安全な環境**                     | TypeScriptを活用して、すべてのコンテンツ定義が正確でエラーのないものになるようにします。                                                                                                                                                                                                                                                                                                                                                                                     |
+| **統合されたコンテンツファイル**     | 翻訳をそれぞれのコンポーネントの近くに配置し、保守性と明確さを向上させます。                                                                                                                                                                                                                                                                                                                                                                                                 |
+| **簡素化されたセットアップ**         | 最小限の設定で迅速に開始でき、特にNext.jsプロジェクトに最適化されています。                                                                                                                                                                                                                                                                                                                                                                                                  |
+| **サーバーコンポーネントサポート**   | Next.jsのサーバーコンポーネントに完全対応し、スムーズなサーバーサイドレンダリングを実現します。                                                                                                                                                                                                                                                                                                                                                                              |
+| **強化されたルーティング**           | Next.jsアプリのルーティングを完全にサポートし、複雑なアプリケーション構造にもシームレスに適応します。                                                                                                                                                                                                                                                                                                                                                                        |
+| **整理されたコードベース**           | コードベースをより整理された状態に保ちます：1つのコンポーネントにつき、同じフォルダー内に1つの辞書を配置します。                                                                                                                                                                                                                                                                                                                                                             |
+| **CI 自動翻訳**                      | 独自の OpenAI API キーを使用して CI 内で翻訳を自動入力し、L10n プラットフォームを必要としません。                                                                                                                                                                                                                                                                                                                                                                            |
+| **MCPサーバー統合**                  | IDEの自動化のためのMCP（モデルコンテキストプロトコル）サーバーを提供し、開発環境内でシームレスなコンテンツ管理と国際化ワークフローを可能にします。[詳細はこちら](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/mcp_server.md)。                                                                                                                                                                                                                              |
+| **Markdown サポート**                | プライバシーポリシーのような多言語コンテンツのために、マークダウンファイルをインポートして解釈します。                                                                                                                                                                                                                                                                                                                                                                       |
+| **無料のビジュアルエディターとCMS**  | 翻訳のためにコンテンツライターと協力する必要がある場合、無料のビジュアルエディターとCMSが利用可能です。これにより、ローカリゼーションプラットフォームの必要性が再び排除され、コードベースからのコンテンツの外部化が可能になります。                                                                                                                                                                                                                                          |
+| **簡略化されたコンテンツ取得**       | 各コンテンツごとに `t` 関数を呼び出す必要はありません。単一のフックを使用して、すべてのコンテンツを直接取得できます。                                                                                                                                                                                                                                                                                                                                                        |
+| **一貫した実装**                     | クライアントコンポーネントとサーバーコンポーネントの両方で同じ実装を使用でき、各サーバーコンポーネントに `t` 関数を渡す必要がありません。                                                                                                                                                                                                                                                                                                                                    |
+| **ツリーシェイカブルなコンテンツ**   | コンテンツはツリーシェイカブルであり、最終的なバンドルを軽量化します。                                                                                                                                                                                                                                                                                                                                                                                                       |
+| **ノンブロッキング静的レンダリング** | Intlayerは`next-intl`のように静的レンダリングをブロックしません。                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **非ブロッキング静的レンダリング**   | Intlayerは`next-intl`のように静的レンダリングをブロックしません。                                                                                                                                                                                                                                                                                                                                                                                                            |
+| **相互運用性**                       | [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_react-i18next.md)、[next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_next-i18next.md)、[next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_next-intl.md)、および[react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_with_react-intl.md)との相互運用性を提供します。 |
+
+## ドキュメント履歴
+
+- 5.5.10 - 2025-06-29: 履歴初期化