著者:

このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

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

バージョン履歴

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.02026/3/24
"{{framework}}-intlayer から {{framework}}-intlayer/html へのインポートの移動"
v8.5.02026/3/24
"HTMLRenderer / useHTMLRenderer / renderHTML ユーティリティを追加"
v8.0.02026/1/22
"HTML解析サポートを追加"
v8.0.02026/1/20

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

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

このドキュメントを編集

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

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

作成:2026-01-20最終更新:2026-09-27

コピー

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

HTMLコンテンツ / IntlayerのHTML

Intlayer は HTML コンテンツをサポートしており、辞書内にリッチで構造化されたコンテンツを埋め込むことができます。このコンテンツは標準の HTML タグでレンダリングすることも、実行時にカスタムコンポーネントに置き換えることもできます。

HTML コンテンツの宣言

HTML コンテンツは html 関数を使って宣言するか、単に文字列として定義できます。

html 関数を使用して明示的に HTML コンテンツを宣言します。これにより、自動検出が無効になっている場合でも標準タグが正しくマッピングされることが保証されます。

htmlDictionary.content.ts

コードをコピー

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

import { html, type Dictionary } from "intlayer";

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // 設定ファイルで設定可能
content: {
  myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

文字列に一般的なHTMLタグ（例: <p>, <div>, <strong>など）が含まれている場合、Intlayerは自動的にそれを変換します。

htmlDictionary.content.ts

コードをコピー

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

export default {
key: "app",
contentAutoTransformation: true, // 設定ファイルで設定可能
content: {
  myHtmlContent:  "<p>Hello <strong>World</strong></p>",
},
};

ファイルからHTMLコンテンツをインポートします。現在、file()関数は文字列を返し、タグが含まれている場合はHTMLとして自動検出される点に注意してください。

htmlDictionary.content.ts

コードをコピー

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

import { html, file, t } from "intlayer";

export default {
key: "app",
content: {
  content: t({
    en: html(file("./content.en.html")),
    fr: html(file("./content.fr.html")),
  }),
},
};

`html()` ノード

html() 関数は、Intlayer v8 の新機能で、辞書内で HTML コンテンツを明示的に定義できるようにします。Intlayer は多くの場合、HTML コンテンツを自動検出できますが、html() 関数を使用するといくつかの利点があります：

型安全性: html() 関数を使用すると、カスタムコンポーネントに期待されるプロパティを定義でき、エディタでの補完や型チェックが向上します。
明示的な宣言: 自動検出をトリガーする標準的な HTML タグが含まれていない場合でも、文字列が常に HTML として処理されるようにします。
カスタムコンポーネントの定義: html() の第 2 引数に、カスタムコンポーネントとその期待されるプロパティ型を定義して渡すことができます。

typescript

コードをコピー

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

import { html } from "intlayer";

const myContent = html(
  "<MyCustomComponent title='こんにちは'>世界</MyCustomComponent>",
  {
    MyCustomComponent: {
      title: "string",
      children: "node",
    },
  }
);

HTML ノードで .use() メソッドを使用する場合、提供されたコンポーネントは html() 関数で提供された定義（利用可能な場合）と照らし合わせてチェックされます。

HTML のレンダリング

レンダリングは Intlayer のコンテンツシステムで自動的に処理することも、専用のツールを使って手動で処理することもできます。

自動レンダリング（`useIntlayer` を使用）

useIntlayer 経由でコンテンツにアクセスすると、HTML ノードは既にレンダリング可能な状態になっています。

HTML ノードはそのまま JSX としてレンダリングできます。標準的なタグは自動で動作します。

App.tsx

コードをコピー

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

import { useIntlayer } from "react-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

カスタムコンポーネントを提供したりタグを上書きしたりするには .use() メソッドを使用します:

tsx

コードをコピー

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

{myHtmlContent.use({
p: (props) => <p className="prose" {...props} />,
CustomLink: ({ children }) => <a href="/details">{children}</a>,
})}

Vueでは、HTMLコンテンツを組み込みの component を使ってレンダリングできます。

App.vue

コードをコピー

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

<script setup>
import { useIntlayer } from "vue-intlayer";
const { myHtmlContent } = useIntlayer("app");
</script>

<template>
<component :is="myHtmlContent" />
</template>

オーバーライドには .use() を使用します：

vue

コードをコピー

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

<component :is="myHtmlContent.use({ h1: 'h2' })" />

SvelteはHTMLノードを文字列としてレンダリングします。{@html} を使ってレンダリングしてください。

svelte

コードをコピー

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

<script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("app");
</script>

{@html $content.myHtmlContent}

PreactはJSXでHTMLノードを直接サポートします。

App.tsx

コードをコピー

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

import { useIntlayer } from "preact-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

SolidはJSXでHTMLノードを直接サポートします。

App.tsx

コードをコピー

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

import { useIntlayer } from "solid-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

Angularは [innerHTML] ディレクティブを使用してHTMLコンテンツをレンダリングします。

app.component.ts

コードをコピー

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

import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-root",
template: `<div [innerHTML]="content().myHtmlContent"></div>`,
})
export class AppComponent {
content = useIntlayer("app");
}

カスタムコンポーネントを提供したりタグを上書きしたりするには .use() メソッドを使用します:

typescript

コードをコピー

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

content().myHtmlContent.use({
p: { class: "prose" },
CustomLink: { href: "/details" },
})

Remix 3 では、HTML ノードは HTML 文字列に解決されます。Remix JSX の innerHTML プロパティ、または html-template ビューの html.raw を使用して挿入します。

src/views/home.tsx

コードをコピー

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

import { useIntlayer } from "remix-intlayer";

export const HomePage = () => () => {
const { myHtmlContent } = useIntlayer("app");

return <div innerHTML={myHtmlContent.value} />;
};

src/views/home.ts

コードをコピー

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

import { html } from "remix/html-template";
import { useIntlayer } from "remix-intlayer";

export const renderHomePage = () => {
const { myHtmlContent } = useIntlayer("app");

return html.raw`<div>${myHtmlContent.value}</div>`;
};

タグをオーバーライドしたりカスタムコンポーネントをマッピングするには、.use() メソッドを使用します。オーバーライドは HTML 文字列を返す関数です:

tsx

コードをコピー

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

<div
innerHTML={myHtmlContent.use({
  p: ({ children }) => `<p class="prose">${children}</p>`,
  CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
})}
/>

Astro では、HTML ノードは HTML 文字列に解決されます。テンプレート内の set:html ディレクティブ、またはクライアントの <script> 内の innerHTML を使用して挿入します。

src/pages/index.astro

コードをコピー

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

---
import { useIntlayer } from "astro-intlayer";

const { myHtmlContent } = useIntlayer("app");
---

<div set:html={myHtmlContent.value} />

src/components/Content.astro

コードをコピー

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

<div id="content"></div>

<script>
import { useIntlayer } from "astro-intlayer";

const { myHtmlContent } = useIntlayer("app");

document.querySelector("#content")!.innerHTML = myHtmlContent.value;
</script>

astro

コードをコピー

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

<div
set:html={myHtmlContent.use({
  p: ({ children }) => `<p class="prose">${children}</p>`,
  CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
})}
/>

`HTMLProvider`によるグローバル設定

アプリ全体でHTMLレンダリングをグローバルに設定できます。これは、すべてのHTMLコンテンツで利用可能にしたいカスタムコンポーネントを定義するのに最適です。

AppProvider.tsx

コードをコピー

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

import { HTMLProvider } from "react-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
    CustomLink: ({ children }) => <a href="/details">{children}</a>,
  }}
>
  {children}
</HTMLProvider>
);

独自の HTML レンダラーを使用することもできます:

AppProvider.tsx

コードをコピー

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

import { HTMLProvider } from "react-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('react-intlayer/html');
    return renderHTML(html);
  }}
>
  {children}
</HTMLProvider>
);

main.ts

コードをコピー

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

import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
components: {
  p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
  CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),
},
});

app.mount("#app");

独自の HTML レンダラーを使用することもできます:

main.ts

コードをコピー

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

import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
renderHTML: async (html) => {
  const { renderHTML } = await import('vue-intlayer/html');
  return renderHTML(html);
},
});

app.mount("#app");

App.svelte

コードをコピー

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

<script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

<HTMLProvider
components={{
  p: MyCustomP,
}}
>
<slot />
</HTMLProvider>

独自の HTML レンダラーを使用することもできます:

App.svelte

コードをコピー

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

<script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
</script>

<HTMLProvider
renderHTML={async (html) => {
  const { renderHTML } = await import('svelte-intlayer/html');
  return renderHTML(html);
}}
>
<slot />
</HTMLProvider>

AppProvider.tsx

コードをコピー

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

import { HTMLProvider } from "preact-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {children}
</HTMLProvider>
);

独自の HTML レンダラーを使用することもできます:

AppProvider.tsx

コードをコピー

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

import { HTMLProvider } from "preact-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('preact-intlayer/html');
    return renderHTML(html);
  }}
>
  {children}
</HTMLProvider>
);

AppProvider.tsx

コードをコピー

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

import { HTMLProvider } from "solid-intlayer/html";

export const AppProvider = (props) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {props.children}
</HTMLProvider>
);

独自の HTML レンダラーを使用することもできます:

AppProvider.tsx

コードをコピー

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

import { HTMLProvider } from "solid-intlayer/html";

export const AppProvider = (props) => (
<HTMLProvider
  renderHTML={async (html) => {
    const { renderHTML } = await import('solid-intlayer/html');
    return renderHTML(html);
  }}
>
  {props.children}
</HTMLProvider>
);

app.config.ts

コードをコピー

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

import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    components: {
      p: { class: "prose" },
      CustomLink: { href: "/details" },
    },
  }),
],
};

独自の HTML レンダラーを使用することもできます:

app.config.ts

コードをコピー

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

import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    renderHTML: async (html) => {
      const { renderHTML } = await import('angular-intlayer/html');
      return renderHTML(html);
    },
  }),
],
};

Remix にはプロバイダーを保持するコンポーネントツリーがないため、設定はサーバー起動時にシングルトンとして一度だけインストールされます。useHTMLRenderer() によって返されるレンダラーを設定します。useIntlayer によって返される html ノードはそのままレンダリングされます。ノードごとに .use() でタグをオーバーライドします。

src/router.ts

コードをコピー

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

import { installIntlayerHTML } from "remix-intlayer/html";

installIntlayerHTML({
renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
});

Astro にはプロバイダーを保持するコンポーネントツリーがないため、設定はミドルウェア（サーバー）およびクライアント <script>（ブラウザ）でシングルトンとして一度だけインストールされます。useHTMLRenderer() によって返されるレンダラーを設定します。useIntlayer によって返される html ノードはそのままレンダリングされます。ノードごとに .use() でタグをオーバーライドします。

src/middleware.ts

コードをコピー

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

import { installIntlayerHTML } from "astro-intlayer/html";
import { defineMiddleware } from "astro:middleware";

// サーバー起動時に1回実行されます。Intlayerミドルウェア自体は、
// このファイルより前にインテグレーションによって登録されます。
installIntlayerHTML({
renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
});

export const onRequest = defineMiddleware((_context, next) => next());

手動レンダリングと高度なツール

生のHTML文字列をレンダリングしたり、コンポーネントのマッピングをより細かく制御したい場合は、次のツールを使用してください。

`<HTMLRenderer />` コンポーネント

特定のコンポーネントを使用してHTMLの文字列をレンダリングします。

tsx

コードをコピー

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

import { HTMLRenderer } from "react-intlayer/html";

<HTMLRenderer components={{ p: MyCustomP }}>
{"<p>Hello World</p>"}
</HTMLRenderer>

`useHTMLRenderer()` フック

事前設定されたレンダラー関数を取得します。

tsx

コードをコピー

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

import { useHTMLRenderer } from "react-intlayer/html";

const renderHTML = useHTMLRenderer({
components: { strong: (props) => <strong {...props} className="text-red-500" /> }
});

return renderHTML("<p>Hello <strong>World</strong></p>");

`renderHTML()` ユーティリティ

コンポーネント外でのレンダリングのためのスタンドアロンユーティリティ。

tsx

コードをコピー

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

import { renderHTML } from "react-intlayer/html";

const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

`<HTMLRenderer />` コンポーネント

vue

コードをコピー

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

<script setup>
import { HTMLRenderer } from "vue-intlayer/html";
</script>

<template>
<HTMLRenderer content="<p>Hello World</p>" />
</template>

`<HTMLRenderer />` コンポーネント

svelte

コードをコピー

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

<script lang="ts">
import { HTMLRenderer } from "svelte-intlayer/html";
</script>

<HTMLRenderer value="<p>Hello World</p>" />

`useHTMLRenderer()` フック

svelte

コードをコピー

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

<script lang="ts">
import { useHTMLRenderer } from "svelte-intlayer/html";
const render = useHTMLRenderer();
</script>

{@html render("<p>Hello World</p>")}

`renderHTML()` ユーティリティ

svelte

コードをコピー

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

<script lang="ts">
import { renderHTML } from "svelte-intlayer/html";
</script>

{@html renderHTML("<p>Hello World</p>")}

`<HTMLRenderer />` コンポーネント

tsx

コードをコピー

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

import { HTMLRenderer } from "preact-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

`useHTMLRenderer()` フック

tsx

コードをコピー

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

import { useHTMLRenderer } from "preact-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

`renderHTML()` ユーティリティ

tsx

コードをコピー

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

import { renderHTML } from "preact-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

`<HTMLRenderer />` コンポーネント

tsx

コードをコピー

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

import { HTMLRenderer } from "solid-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

`useHTMLRenderer()` フック

tsx

コードをコピー

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

import { useHTMLRenderer } from "solid-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

`renderHTML()` ユーティリティ

tsx

コードをコピー

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

import { renderHTML } from "solid-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

`IntlayerHTMLService` サービス

サービスを使用してHTML文字列をレンダリングします。

typescript

コードをコピー

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

import { IntlayerHTMLService } from "angular-intlayer/html";

export class MyComponent {
constructor(private markdownService: IntlayerHTMLService) {}

renderHTML(html: string) {
  return this.markdownService.renderHTML(html);
}
}

`useHTMLRenderer()` フック

installIntlayerHTML() によって事前設定されたレンダラー関数を取得します。HTML 文字列を返します。

tsx

コードをコピー

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

import { useHTMLRenderer } from "remix-intlayer/html";

const renderHTML = useHTMLRenderer();

return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;

`renderHTML()` ユーティリティ

グローバル設定を無視するスタンドアロンユーティリティ。

tsx

コードをコピー

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

import { renderHTML } from "remix-intlayer/html";

const html = renderHTML("<p>Hello</p>");

`useHTMLRenderer()` フック

installIntlayerHTML() によって事前設定されたレンダラー関数を取得します。HTML 文字列を返します。

astro

コードをコピー

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

---
import { useHTMLRenderer } from "astro-intlayer/html";

const renderHTML = useHTMLRenderer();
---

<div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />

`renderHTML()` ユーティリティ

グローバル設定を無視するスタンドアロンユーティリティ。

astro

コードをコピー

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

---
import { renderHTML } from "astro-intlayer/html";

const html = renderHTML("<p>Hello</p>");
---

<div set:html={html} />

オプションリファレンス

これらのオプションは HTMLProvider、HTMLRenderer、useHTMLRenderer、および renderHTML に渡すことができます。

テーブルのすべての内容を表示

テーブルをモーダルで開き、すべてのデータを明確に表示

オプション	型	デフォルト	説明
`components`	`Record<string, any>`	`{}`	HTMLタグまたはカスタムコンポーネント名をコンポーネントにマッピングするオブジェクト。
`renderHTML`	`Function`	`null`	デフォルトのHTMLパーサーを完全に置き換えるカスタムレンダリング関数（Vue、Svelte、Remix、Astroプロバイダー）。

Markdown 関数取得

HTMLコンテンツ / IntlayerのHTML

HTML コンテンツの宣言

html() ノード

HTML のレンダリング

自動レンダリング（useIntlayer を使用）

HTMLProviderによるグローバル設定

手動レンダリングと高度なツール

<HTMLRenderer /> コンポーネント

useHTMLRenderer() フック

renderHTML() ユーティリティ

<HTMLRenderer /> コンポーネント

<HTMLRenderer /> コンポーネント

useHTMLRenderer() フック

renderHTML() ユーティリティ

<HTMLRenderer /> コンポーネント

useHTMLRenderer() フック

renderHTML() ユーティリティ

<HTMLRenderer /> コンポーネント

useHTMLRenderer() フック

renderHTML() ユーティリティ

IntlayerHTMLService サービス

useHTMLRenderer() フック

renderHTML() ユーティリティ

useHTMLRenderer() フック

renderHTML() ユーティリティ

オプションリファレンス

`html()` ノード

自動レンダリング（`useIntlayer` を使用）

`HTMLProvider`によるグローバル設定

`<HTMLRenderer />` コンポーネント

`useHTMLRenderer()` フック

`renderHTML()` ユーティリティ

`<HTMLRenderer />` コンポーネント

`<HTMLRenderer />` コンポーネント

`useHTMLRenderer()` フック

`renderHTML()` ユーティリティ

`<HTMLRenderer />` コンポーネント

`useHTMLRenderer()` フック

`renderHTML()` ユーティリティ

`<HTMLRenderer />` コンポーネント

`useHTMLRenderer()` フック

`renderHTML()` ユーティリティ

`IntlayerHTMLService` サービス

`useHTMLRenderer()` フック

`renderHTML()` ユーティリティ

`useHTMLRenderer()` フック

`renderHTML()` ユーティリティ