このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
関数フェッチング
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;