挿入の仕組み

Intlayerでは、挿入コンテンツはinsertion関数を使用して実現されます。この関数は、文字列内のプレースホルダー（例: {{name}}や{{age}}）を特定し、実行時に動的に置き換えることができます。このアプローチにより、アプリケーションから渡されるデータによって特定の部分が決定される柔軟なテンプレートのような文字列を作成できます。

React IntlayerやNext Intlayerと統合することで、各プレースホルダーの値を含むデータオブジェクトを提供するだけで、Intlayerがプレースホルダーを置き換えたコンテンツを自動的にレンダリングします。

挿入コンテンツの設定

Intlayerプロジェクトで挿入コンテンツを設定するには、挿入定義を含むコンテンツモジュールを作成します。以下に、さまざまな形式の例を示します。

import { insert, type Dictionary } from "intlayer";const myInsertionContent = {  key: "my_key",  content: {    myInsertion: insert("こんにちは、私の名前は{{name}}で、{{age}}歳です！"),  },} satisfies Dictionary;export default myInsertionContent;

React Intlayerでの挿入コンテンツの使用

Reactコンポーネント内で挿入コンテンツを利用するには、react-intlayerパッケージからuseIntlayerフックをインポートして使用します。このフックは指定されたキーのコンテンツを取得し、コンテンツ内の各プレースホルダーを表示したい値にマッピングするオブジェクトを渡すことができます。

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const InsertionComponent: FC = () => {  const { myInsertion } = useIntlayer("my_key");  return (    <div>      <p>        {          /* 出力: "こんにちは、私の名前はJohnで、30歳です！" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* 同じ挿入を異なる値で再利用できます */          myInsertion({ name: "Alice", age: "25" })        }      </p>    </div>  );};export default InsertionComponent;

追加リソース

設定や使用に関する詳細情報は、以下のリソースを参照してください：

• Intlayer CLI ドキュメント
• React Intlayer ドキュメント
• Next Intlayer ドキュメント

これらのリソースは、さまざまな環境やフレームワークでのIntlayerのセットアップと使用に関するさらなる洞察を提供します。