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;

HTML

ロケールごとのファイル

作成:2024-08-11最終更新:2025-06-29

このドキュメントをあなたの好きなAIアシスタントに参照してください

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

このドキュメントは古く、ベース版は次の日付に更新されました: 2025年8月23日.

英語のドキュメントへ

バージョン履歴

"履歴初期化"
v5.5.102025/6/29

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

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

このドキュメントを編集

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

ドキュメントへのGitHubリンク

コピー

ドキュメントのMarkdownをクリップボードにコピー

関数フェッチング

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

関数の宣言

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

**/*.content.ts

コードをコピー

コードをクリップボードにコピー

import type { Dictionary } from "intlayer";

const functionContent = {
  key: "function_content",
  content: {
    text: () => "これは関数によってレンダリングされたコンテンツです",
  },
} satisfies Dictionary;

export default functionContent;

非同期関数のフェッチ

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

**/*.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;

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

**/*.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;

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コンポーネントで関数ベースのコンテンツを使用する

**/*.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;

HTML

ロケールごとのファイル