Intlayer ドキュメント

公式Intlayerドキュメントへようこそ！ここでは、Next.js、React、Vite、Express、またはその他のJavaScript環境での国際化（i18n）ニーズに対応するために、Intlayerを統合、設定、習得するために必要なすべての情報を見つけることができます。

はじめに

Intlayerとは何ですか？

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

Intlayerは、コンテンツを簡単に編集・管理できるオプションのビジュアルエディタも提供しています。このエディタは、コンテンツ管理に視覚的なインターフェースを好む開発者や、コードを気にせずにコンテンツを生成するチームに特に役立ちます。

使用例

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

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

const componentContent = {
  key: "component-key",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      es: "Hola Mundo",
      fr: "Bonjour le monde",
    }),
  },
} satisfies Dictionary;

export default componentContent;

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

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

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

主な機能

Intlayerは、現代のウェブ開発のニーズに応える多彩な機能を提供します。以下は主な機能で、それぞれの詳細なドキュメントへのリンクも記載しています：

• 国際化サポート：組み込みの国際化サポートで、アプリケーションのグローバル展開を強化します。
• ビジュアルエディター：Intlayer専用のエディタープラグインで開発ワークフローを改善します。ビジュアルエディターガイドをご覧ください。
• 設定の柔軟性: 詳細な設定オプションを使ってセットアップをカスタマイズしましょう。詳しくは設定ガイドをご覧ください。
• 高度なCLIツール: Intlayerのコマンドラインインターフェースを使ってプロジェクトを効率的に管理しましょう。機能の詳細はCLIツールのドキュメントで確認できます。

コアコンセプト

辞書 (Dictionary)

コードの近くに多言語コンテンツを整理し、一貫性と保守性を保ちましょう。

• はじめに
  Intlayerでコンテンツを宣言する基本を学びましょう。

• 翻訳
  翻訳がどのように生成され、保存され、アプリケーションで利用されるかを理解します。

• 列挙
  複数言語にわたる繰り返しや固定データセットを簡単に管理します。

• 条件
  Intlayerで条件ロジックを使用して動的なコンテンツを作成する方法を学びます。

• 挿入
  挿入プレースホルダーを使って文字列に値を挿入する方法を発見します。

• 関数フェッチング
  プロジェクトのワークフローに合わせてカスタムロジックでコンテンツを動的に取得する方法を確認します。

• マークダウン
  Intlayerでリッチコンテンツを作成するためのMarkdownの使い方を学びます。

• ファイル埋め込み
  Intlayerで外部ファイルを埋め込み、コンテンツエディターで使用する方法を発見します。

• ネスティング
  Intlayerでコンテンツをネストして複雑な構造を作成する方法を理解します。

環境と統合

Intlayerは柔軟性を念頭に設計されており、人気のあるフレームワークやビルドツールとのシームレスな統合を提供します：

• Next.js 15 と Intlayer
• Next.js 14（App Router）と Intlayer
• Next.js Page Router と Intlayer
• React CRA と Intlayer
• Vite + ReactでのIntlayer
• React NativeとExpoでのIntlayer
• LynxとReactでのIntlayer
• ExpressでのIntlayer

各統合ガイドには、サーバーサイドレンダリング、動的ルーティング、クライアントサイドレンダリングなど、Intlayerの機能を活用するためのベストプラクティスが含まれており、高速でSEOに優れた、非常にスケーラブルなアプリケーションを維持できます。

貢献とフィードバック

私たちはオープンソースとコミュニティ主導の開発の力を重視しています。改善提案をしたい場合、新しいガイドを追加したい場合、またはドキュメントの問題を修正したい場合は、遠慮なくプルリクエストを提出するか、GitHubリポジトリでイシューを開いてください。

アプリケーションの翻訳をより速く、より効率的に始める準備はできていますか？ ぜひドキュメントに飛び込んで、今日からIntlayerを使い始めましょう。コンテンツを整理し、チームの生産性を高める、堅牢で効率的な国際化アプローチを体験してください。