挿入コンテンツ / Intlayerにおける挿入

挿入の仕組み

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>        {          /* 出力例: "Hello, my name is John and I am 30 years old!" */          myInsertion({ name: "John", age: "30" })        }      </p>      <p>        {          /* 同じ挿入を異なる値で再利用できます */          `myInsertion({ name: "Alice", age: "25" })`        }      </p>    </div>  );};export default InsertionComponent;

追加リソース

設定および使用方法の詳細については、以下のリソースを参照してください。

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

これらのリソースは、さまざまな環境やフレームワークにおける Intlayer のセットアップと使用方法について、さらに詳しい情報を提供します。

ドキュメント履歴

• 5.5.10 - 2025-06-29: 履歴の初期化