著者:

作成:2026-01-20最終更新:2026-03-24

このドキュメントをあなたの好きな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リンク

コピー

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

HTMLコンテンツ / IntlayerのHTML

Name: Intlayer
Author: Intlayer

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" },})

`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>);

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, {  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");

HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。

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>

> HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。

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> );

> HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。

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> );

> HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。

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({      renderMarkdown: async (html) => {        const { renderMarkdown } = await import('angular-intlayer/html');        return renderMarkdown(html);      },    }),  ],};

HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。

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

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

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

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);  }}

オプションリファレンス

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

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

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

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

注: ReactおよびPreactでは、標準のHTMLタグが自動的に提供されます。これらを上書きしたりカスタムコンポーネントを追加したい場合にのみ、componentsプロップを渡してください。

Markdown 関数取得

バージョン履歴

HTMLコンテンツ / IntlayerのHTML

HTML コンテンツの宣言

html() ノード

HTML のレンダリング

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

HTMLProviderによるグローバル設定

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

<HTMLRenderer /> コンポーネント

useHTMLRenderer() フック

renderHTML() ユーティリティ

オプションリファレンス

`html()` ノード

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

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

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

`useHTMLRenderer()` フック

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