Intlayerの今後のリリースに関する通知を受け取る

    このページのコンテンツはAIを使用して翻訳されました。

    英語の元のコンテンツの最新バージョンを見る

    関数フェッチング

    Intlayerでは、コンテンツモジュール内で同期または非同期の関数を宣言できます。アプリケーションのビルド時に、Intlayerはこれらの関数を実行して関数の結果を取得します。返り値はJSONオブジェクトか、文字列や数値のような単純な値でなければなりません。

    警告: 関数フェッチングは現在、JSONコンテンツ宣言およびリモートコンテンツ宣言ファイルでは利用できません。

    関数の宣言

    以下は、単純な同期関数でコンテンツをフェッチする例です。

    **/*.content.ts
    import type { Dictionary } from "intlayer";const functionContent = {  key: "function_content",  content: {    text: () => "これは関数によってレンダリングされたコンテンツです",  },} satisfies Dictionary;export default functionContent;

    この例では、textキーに文字列を返す関数が含まれています。このコンテンツは、react-intlayerのようなIntlayerのインタープリターパッケージを使用して、Reactコンポーネント内でレンダリングできます。

    非同期関数のフェッチ

    同期関数に加えて、Intlayerは非同期関数もサポートしており、外部ソースからデータを取得したり、モックデータでデータ取得をシミュレートしたりすることが可能です。

    以下は、サーバーフェッチをシミュレートする非同期関数の例です:

    **/*.content.ts
    import { setTimeout } from "node:timers/promises";import type { Dictionary } from "intlayer";const fakeFetch = async (): Promise<string> => {  // サーバーからのフェッチをシミュレートするために200ms待機  return await setTimeout(200).then(    () => "これはサーバーから取得したコンテンツです"  );};const asyncFunctionContent = {  key: "async_function",  content: { text: fakeFetch },} satisfies Dictionary;export default asyncFunctionContent;

    この場合、fakeFetch 関数はサーバーの応答時間をシミュレートするために遅延を模倣しています。Intlayer は非同期関数を実行し、その結果を text キーのコンテンツとして使用します。

    React コンポーネントで関数ベースのコンテンツを使用する

    React コンポーネントで関数ベースのコンテンツを使用するには、react-intlayer から useIntlayer をインポートし、コンテンツ ID を指定して呼び出す必要があります。以下はその例です。

    **/*.jsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const functionContent = useIntlayer("function_content");  const asyncFunctionContent = useIntlayer("async_function_content");  return (    <div>      <p>{functionContent.text}</p>      {/* 出力: これは関数によってレンダリングされたコンテンツです */}      <p>{asyncFunctionContent.text}</p>      {/* 出力: これはサーバーから取得されたコンテンツです */}    </div>  );};export default MyComponent;

    この場合、fakeFetch関数はサーバーの応答時間をシミュレートするために遅延を模倣しています。Intlayerは非同期関数を実行し、その結果をtextキーのコンテンツとして使用します。

    Reactコンポーネントで関数ベースのコンテンツを使用する

    Reactコンポーネントで関数ベースのコンテンツを使用するには、react-intlayerからuseIntlayerをインポートし、コンテンツIDを渡してコンテンツを取得します。以下は例です:

    **/*.jsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const MyComponent: FC = () => {  const functionContent = useIntlayer("function_content");  const asyncFunctionContent = useIntlayer("async_function_content");  return (    <div>      <p>{functionContent.text}</p>      {/* 出力: これは関数によってレンダリングされたコンテンツです */}      <p>{asyncFunctionContent.text}</p>      {/* 出力: これはサーバーから取得されたコンテンツです */}    </div>  );};export default MyComponent;

    ドキュメント履歴

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

    このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

    ドキュメントへのGitHubリンク
    Intlayerの今後のリリースに関する通知を受け取る