Intlayerの仕組み

概要

Intlayerの主なアイデアは、コンポーネントごとのコンテンツ管理を採用することです。そのため、Intlayerの背後にある考え方は、コンテンツをコードベースのどこにでも、例えばコンポーネントと同じディレクトリ内に宣言できるようにすることです。

.└── Components    └── MyComponent        ├── index.content.cjs        └── index.mjs

これを実現するために、Intlayerの役割は、プロジェクト内に存在するさまざまな形式のコンテンツ宣言ファイルをすべて見つけ出し、それらから辞書を生成することです。

したがって、主に2つのステップがあります：

• ビルドステップ
• 解釈ステップ

辞書のビルドステップ

ビルドステップは以下の3つの方法で実行できます：

• CLIを使用してnpx intlayer buildを実行
• vscode拡張機能を使用
• vite-intlayerパッケージなどのアプリプラグインを使用、またはNext.js用の同等のプラグインを使用。これらのプラグインのいずれかを使用すると、アプリケーションを開始（開発）またはビルド（本番）する際に、Intlayerが自動的に辞書をビルドします。

1. コンテンツファイルの宣言

   • コンテンツファイルは、TypeScript、ECMAScript、CommonJS、JSONなど、さまざまな形式で定義できます。
   • コンテンツファイルはプロジェクト内のどこにでも定義でき、これによりメンテナンス性とスケーラビリティが向上します。コンテンツファイルの拡張子の規約を守ることが重要です。この拡張子はデフォルトで*.content.{js|cjs|mjs|ts|tsx|json}ですが、設定ファイルで変更できます。

2. 辞書の生成

   • 辞書はコンテンツファイルから生成されます。デフォルトでは、Intlayer辞書はプロジェクトの.intlayer/dictionariesディレクトリに生成されます。
   • これらの辞書は、すべてのニーズに対応し、アプリケーションのパフォーマンスを最適化するために、さまざまな形式で生成されます。

3. 辞書型の生成

   辞書に基づいて、Intlayerはアプリケーションで使用可能な型を生成します。

   • 辞書型はIntlayerの辞書から生成されます。デフォルトでは、Intlayer辞書型はプロジェクトの.intlayer/typesディレクトリに生成されます。

   • Intlayerのモジュール拡張は、Intlayerに追加の型を定義できるTypeScriptの機能です。これにより、利用可能な引数や必要な引数を提案することで開発体験が向上します。 生成された型の中には、Intlayer辞書型や言語設定型が含まれ、types/intlayer.d.tsファイルに追加され、他のパッケージで使用されます。これを行うには、tsconfig.jsonファイルがプロジェクトのtypesディレクトリを含むように設定されている必要があります。

辞書の解釈ステップ

Intlayerを使用すると、useIntlayerフックを使用してアプリケーション内でコンテンツにアクセスできます。

const MyComponent = () => {  const content = useIntlayer("my-component");  return <div>{content.title}</div>;};

このフックはロケールの検出を管理し、現在のロケールに対応するコンテンツを返します。このフックを使用すると、Markdownの解釈、複数形の管理なども可能です。

Intlayerのすべての機能を見るには、辞書ドキュメントを参照してください。

遠隔コンテンツ

Intlayerを使用すると、コンテンツをローカルで宣言し、それをCMSにエクスポートして非技術的なチームが編集できるようにすることができます。

そのため、Gitでコードを操作するのと同様に、CMSからアプリケーションにコンテンツをプッシュおよびプルすることが可能です。

プロジェクトで設定されている場合、Intlayerはアプリケーションの開始（開発）/ビルド（本番）時にCMSからコンテンツを自動的に取得します。

ビジュアルエディタ

Intlayerは、視覚的にコンテンツを編集できるビジュアルエディタも提供しています。このビジュアルエディタは、外部のintlayer-editorパッケージで利用可能です。

アプリビルドの最適化

アプリケーションのバンドルサイズを最適化するために、Intlayerはアプリケーションのビルドを最適化するための2つのプラグインを提供しています：@intlayer/babelと@intlayer/swcプラグイン。

開発モードでは、Intlayerは辞書の集中型静的インポートを使用して開発体験を簡素化します。

ビルドを最適化することで、Intlayerは辞書の呼び出しを置き換えてチャンク化を最適化します。この方法では、最終的なバンドルは使用される辞書のみをインポートします。

設定でactivateDynamicImportオプションを有効にすると、Intlayerは動的インポートを使用して辞書をロードします。このオプションは、アプリケーションのレンダリング時に非同期処理を回避するためにデフォルトでは無効になっています。

@intlayer/babelはvite-intlayerパッケージでデフォルトで利用可能です。

@intlayer/swcは、Next.jsでSWCプラグインがまだ実験的であるため、next-intlayerパッケージにはデフォルトでインストールされていません。

アプリケーションのビルドを設定する方法については、設定ドキュメントを参照してください。

パッケージ

Intlayerは、翻訳プロセスにおいて特定の役割を持つ複数のパッケージで構成されています。このパッケージの構造を示す図は以下の通りです：

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アプリケーションで使用可能にします。

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)とIntlayerを統合するためのViteプラグイン、およびユーザーの優先ロケールを検出し、クッキーを管理し、URLリダイレクトを処理するためのミドルウェアを含みます。

react-scripts-intlayer

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やintlayerパッケージによって使用されます。

@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 (WIP)

@intlayer/swcパッケージは、Next.jsアプリケーションの辞書のバンドリングを最適化するツールを提供します。

@intlayer/api

@intlayer/apiパッケージは、バックエンドとやり取りするためのAPI SDKです。

@intlayer/design-system

@intlayer/design-systemパッケージは、CMSとビジュアルエディター間でデザイン要素を共有するために使用されます。

@intlayer/backend

@intlayer/backendパッケージは、バックエンドタイプをエクスポートし、将来的にはスタンドアロンパッケージとしてバックエンドを提供する予定です。

スマートドキュメントとチャットする

• スマートドキュメントに質問する