公式のIntlayerドキュメントへようこそ！ここでは、Next.js、React、Vite、Express、またはその他のJavaScript環境を使用しているかどうかにかかわらず、国際化（i18n）のすべてのニーズに合わせてIntlayerを統合、構成、およびマスターするために必要なすべてを見つけることができます。

はじめに

Intlayerとは何ですか？

Intlayerは、JavaScript開発者向けに特別に設計された国際化ライブラリです。コード内のどこにでもコンテンツの宣言を行うことができます。多言語コンテンツの宣言を構造化された辞書に変換し、コードに簡単に統合できるようにします。TypeScriptを使用することで、Intlayerは開発をより堅牢かつ効率的にします。

Intlayerには、コンテンツを簡単に編集および管理できるオプションのビジュアルエディタも用意されています。このエディタは、コンテンツ管理のためにビジュアルインターフェイスを好む開発者や、コードを気にせずにコンテンツを生成するチームに特に役立ちます。

使用例

bash

コードをコピー

コードをクリップボードにコピー

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

src/components/MyComponent/index.content.ts

コードをコピー

コードをクリップボードにコピー

import { t, type Dictionary } from "intlayer";

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
      ja: "こんにちは世界",
    }),
  },
} satisfies Dictionary;

export default componentContent;

src/components/MyComponent/index.tsx

コードをコピー

コードをクリップボードにコピー

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

export const MyComponent: FC = () => {
  const { myTranslatedContent } = useIntlayer("component-key");

  return <span>{myTranslatedContent}</span>;
};

なぜ他の選択肢よりもIntlayerなのか？

next-intlやi18nextのような主流のソリューションと比較して、Intlayerは以下のような統合された最適化機能を提供するソリューションです：

巨大なJSONファイルをページに読み込む代わりに、必要なコンテンツのみを読み込みます。Intlayerはバンドルとページのサイズを最大50%削減するのに役立ちます。

アプリケーションのコンテンツのスコープを限定することは、大規模なアプリケーションの保守を容易にします。コンテンツのコードベース全体を確認するという精神的負担なしに、単一の機能フォルダを複製または削除できます。さらに、Intlayerはコンテンツの正確性を確保するために完全に型付け（fully typed）されています。

コンテンツを同一の場所に配置することは、大規模言語モデル（LLM）によって必要なコンテキストを減らします。Intlayerには、不足している翻訳をテストするためのCLI、LSP、MCP、およびエージェントスキルなどの一連のツールも付属しており、AIエージェント向けのデベロッパーエクスペリエンス（DX）をさらにスムーズにします。

CI/CDパイプラインでの翻訳に、AIプロバイダーのコストでお好みのLLMを使用して自動化を利用できます。Intlayerはまた、コンテンツ抽出を自動化するためのコンパイラーや、バックグラウンドでの翻訳を支援するウェブプラットフォームを提供します。

巨大なJSONファイルをコンポーネントに接続すると、パフォーマンスやリアクティビティの問題が発生する可能性があります。Intlayerはビルド時にコンテンツの読み込みを最適化します。

Intlayerは単なるi18nソリューションではありません。セルフホスト可能なビジュアルエディターや完全なCMSを提供し、多言語コンテンツをリアルタイムで管理するのに役立ち、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションをシームレスにします。コンテンツはローカルおよび/またはリモートに保存できます。

主な機能

Intlayerは、最新のWeb開発のニーズに合わせたさまざまな機能を提供しています。以下は主な機能であり、それぞれに詳細なドキュメントへのリンクがあります：

国際化サポート: 国際化の組み込みサポートにより、アプリケーションのグローバルな展開を強化します。
ビジュアルエディタ: Intlayer用に設計されたエディタプラグインを使用して、開発ワークフローを改善します。ビジュアルエディタガイドを確認してください。
構成の柔軟性: 構成ガイドで詳しく説明されている広範な構成オプションを使用して、セットアップをカスタマイズします。
高度なCLIツール: Intlayerのコマンドラインインターフェースを使用して、プロジェクトを効率的に管理します。CLIツールドキュメントで機能を調べます。

コアコンセプト

辞書

コードの近くに多言語コンテンツを整理し、すべてを一貫性があり保守可能に保ちます。

始め方
Intlayerでコンテンツを宣言するための基本を学びます。
翻訳
翻訳がアプリケーションでどのように生成、保存、利用されるかを理解します。
列挙
さまざまな言語で繰り返しまたは固定されたデータセットを簡単に管理します。
条件
Intlayerで条件論理を使用してダイナミックコンテンツを作成する方法を学びます。
挿入挿入プレースホルダーを使用して文字列に値を挿入する方法を発見します。
関数フェッチ
プロジェクトのワークフローに合わせて、カスタムロジックで動的にコンテンツをフェッチする方法を確認します。
Markdown
IntlayerでMarkdownを使用してリッチコンテンツを作成する方法を学びます。
ファイル埋め込み
コンテンツエディターで使用するために、Intlayerに外部ファイルを埋め込む方法を発見します。
ネスト
Intlayerでコンテンツをネストして複雑な構造を作成する方法を理解します。

環境と統合

柔軟性を念頭に置いてIntlayerを構築し、人気のフレームワークやビルドツールでのシームレスな統合を提供しています：

各統合ガイドには、サーバーサイドレンダリング、ダイナミックルーティング、またはクライアントサイドレンダリングなど、Intlayerの機能を使用するためのベストプラクティスが含まれており、高速でSEOフレンドリーかつスケーラビリティの高いアプリケーションを維持できます。

貢献とフィードバック

私たちはオープンソースとコミュニティ主導の開発の力を大切にしています。改善を提案したり、新しいガイドを追加したり、ドキュメントの問題を修正したりする場合は、GitHubリポジトリでPull Requestを送信するか、Issueを開いてください。

アプリケーションをより速く、より効率的に翻訳する準備はできましたか？ 今すぐドキュメントにアクセスして、Intlayerの使用を開始してください。コンテンツを整理し、チームの生産性を向上させる堅牢で合理化された国際化アプローチを体験してください。

なぜIntlayer？

Intlayerの仕組み