関数の取得
関数の宣言
Intlayerを使用すると、コンテンツモジュール内でコンテンツ関数を宣言できます。これらの関数は同期または非同期である可能性があります。アプリケーションがビルドされると、Intlayerはこれらの関数を実行して関数の結果を取得します。戻り値はJSONオブジェクトまたは文字列や数値のような単純な値である必要があります。
以下は、コンテンツを取得するシンプルな同期関数の例です：
typescript
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: {
6 text: () => "このコンテンツは関数によってレンダリングされます",
7 },
8} satisfies DeclarationContent;
9
10export default functionContent;この例では、textキーには文字列を返す関数が含まれています。このコンテンツは、Intlayerのインタープリタパッケージであるreact-intlayerを使用して、Reactコンポーネント内でレンダリングできます。
非同期関数の取得
同期関数に加えて、Intlayerは非同期関数をサポートしており、外部ソースからデータを取得したり、モックデータを使ってデータ取得をシミュレートしたりすることができます。
以下は、サーバー取得をシミュレートする非同期関数の例です：
typescript
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // サーバーからの取得をシミュレートするために200ms待つ
6 return await setTimeout(200).then(() => "サーバーから取得したコンテンツです");
7};
8
9const asyncFunctionContent = {
10 key: "async_function",
11 content: { text: fakeFetch },
12} satisfies DeclarationContent;
13
14export default asyncFunctionContent;この場合、fakeFetch関数はサーバーの応答時間をシミュレートするために遅延を模倣します。Intlayerは非同期関数を実行し、結果をtextキーのコンテンツとして使用します。
Reactコンポーネントでの関数ベースのコンテンツの使用
Reactコンポーネントで関数ベースのコンテンツを使用するには、react-intlayerからuseIntlayerをインポートし、コンテンツIDを指定して呼び出す必要があります。以下はその例です：
javascript
1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4 const functionContent = useIntlayer("function_content");
5 const asyncFunctionContent = useIntlayer("async_function_content");
6
7 return (
8 <div>
9 <p>{functionContent.text}</p>
10 {/* 出力: このコンテンツは関数によってレンダリングされます */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* 出力: サーバーから取得したコンテンツです */}
13 </div>
14 );
15};
16
17export default MyComponent;このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。
ドキュメントへのGitHubリンク