このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見る関数フェッチング
Intlayerでは、コンテンツモジュール内で同期または非同期の関数を宣言できます。アプリケーションのビルド時に、Intlayerはこれらの関数を実行して関数の結果を取得します。返り値はJSONオブジェクトか、文字列や数値のような単純な値でなければなりません。
警告: 関数フェッチングは現在、JSONコンテンツ宣言およびリモートコンテンツ宣言ファイルでは利用できません。
関数の宣言
以下は、単純な同期関数でコンテンツをフェッチする例です。
import type { Dictionary } from "intlayer";const functionContent = { key: "function_content", content: { text: () => "これは関数によってレンダリングされたコンテンツです", },} satisfies Dictionary;export default functionContent;
この例では、textキーに文字列を返す関数が含まれています。このコンテンツは、react-intlayerのようなIntlayerのインタープリターパッケージを使用して、Reactコンポーネント内でレンダリングできます。
非同期関数のフェッチ
同期関数に加えて、Intlayerは非同期関数もサポートしており、外部ソースからデータを取得したり、モックデータでデータ取得をシミュレートしたりすることが可能です。
以下は、サーバーフェッチをシミュレートする非同期関数の例です:
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 を指定して呼び出す必要があります。以下はその例です。
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を渡してコンテンツを取得します。以下は例です:
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リンク