\n\n \n \n SvelteはHTMLノードを文字列としてレンダリングします。`{@html}` を使ってレンダリングしてください。\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n PreactはJSXでHTMLノードを直接サポートします。\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n SolidはJSXでHTMLノードを直接サポートします。\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Angularは `[innerHTML]` ディレクティブを使用してHTMLコンテンツをレンダリングします。\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-root\",\n template: ``,\n })\n export class AppComponent {\n content = useIntlayer(\"app\");\n }\n ```\n\n カスタムコンポーネントを提供したりタグを上書きしたりするには `.use()` メソッドを使用します:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## `HTMLProvider`によるグローバル設定\n\nアプリ全体でHTMLレンダリングをグローバルに設定できます。これは、すべてのHTMLコンテンツで利用可能にしたいカスタムコンポーネントを定義するのに最適です。\n\n\n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n CustomLink: ({ children }) => {children},\n }}\n >\n {children}\n \n );\n ```\n\n 独自の HTML レンダラーを使用することもできます:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('react-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。\n\n \n \n \n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n components: {\n p: (props, { slots }) => h(\"p\", { class: \"prose\", ...props }, slots.default?.()),\n CustomLink: (props, { slots }) => h(\"a\", { href: \"/details\", ...props }, slots.default?.()),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n 独自の HTML レンダラーを使用することもできます:\n\n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n renderHTML: async (html) => {\n const { renderHTML } = await import('vue-intlayer/html');\n return renderHTML(html);\n },\n });\n\n app.mount(\"#app\");\n ```\n\n > HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n {\n const { renderHTML } = await import('svelte-intlayer/html');\n return renderHTML(html);\n }}\n >\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n }}\n >\n {children}\n \n );\n ```\n\n 独自の HTML レンダラーを使用することもできます:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('preact-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n ,\n }}\n >\n {props.children}\n \n );\n ```\n\n 独自の HTML レンダラーを使用することもできます:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n {\n const { renderHTML } = await import('solid-intlayer/html');\n return renderHTML(html);\n }}\n >\n {props.children}\n \n );\n ```\n\n > HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。\n\n \n \n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n components: {\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n },\n }),\n ],\n };\n ```\n\n 独自の HTML レンダラーを使用することもできます:\n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n renderMarkdown: async (html) => {\n const { renderMarkdown } = await import('angular-intlayer/html');\n return renderMarkdown(html);\n },\n }),\n ],\n };\n ```\n\n > HTML レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。\n\n \n \n\n---\n\n### 手動レンダリングと高度なツール\n\n生のHTML文字列をレンダリングしたり、コンポーネントのマッピングをより細かく制御したい場合は、次のツールを使用してください。\n\n\n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` フック\n\n 事前設定されたレンダラー関数を取得します。\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\" \n \n \n #### `Hello World\" />\n \n ```\n\n \n \n \n #### `Hello World\" />\n ```\n\n #### `useHTMLRenderer()` フック\n\n ```svelte\n \n\n {@html render(\" \n \n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` フック\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` フック\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n #### `IntlayerHTMLService` サービス\n サービスを使用してHTML文字列をレンダリングします。\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer/html\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderHTML(html);\n }\n }\n ```\n\n \n \n\n---\n\n## オプションリファレンス\n\nこれらのオプションは `HTMLProvider`、`HTMLRenderer`、`useHTMLRenderer`、および `renderHTML` に渡すことができます。\n\n| オプション | 型 | デフォルト | 説明 |\n| :----------- | :-------------------- | :--------- | :----------------------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | HTMLタグまたはカスタムコンポーネント名をコンポーネントにマッピングするオブジェクト。 |\n| `renderHTML` | `Function` | `null` | デフォルトのHTMLパーサを完全に置き換えるカスタムレンダリング関数（Vue/Svelteプロバイダーのみ）。 |\n\n> 注: ReactおよびPreactでは、標準のHTMLタグが自動的に提供されます。これらを上書きしたりカスタムコンポーネントを追加したい場合にのみ、`components`プロップを渡してください。\n","about":"IntlayerでHTMLコンテンツを宣言し、カスタムコンポーネントとともに使用する方法を学びます。このドキュメントに従い、国際化されたプロジェクト内で動的にコンポーネントを置換可能なリッチなHTMLライクコンテンツを埋め込む方法を解説します。","url":"https://intlayer.org/ja/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, カスタムコンポーネント, リッチコンテンツ, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"開発者、コンテンツマネージャー"}}
自動レンダリング（
{myHtmlContent}
;\n };\n ```\n\n {myHtmlContent}
;\n };\n ```\n\n Hello World
\"}\nHello World
\");\n ```\n\n #### `renderHTML()` ユーティリティ\n\n コンポーネント外でのレンダリングのためのスタンドアロンユーティリティ。\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"Hello
\", { components: { p: 'div' } });\n ```\n\nHello World
\")}\n ```\n\n #### `renderHTML()` ユーティリティ\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\n{render(\"
;\n ```\n\n #### `renderHTML()` ユーティリティ\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Hello World
\"}\n{render(\"
;\n ```\n\n #### `renderHTML()` ユーティリティ\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}作成:2026-01-20最終更新:2026-03-24
このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
このページとあなたの好きな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
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() ノード
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>,})}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 レンダラーを動的にインポートすることは、アプリケーションのバンドルサイズを削減するための良い方法です。
手動レンダリングと高度なツール
生の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' } });オプションリファレンス
これらのオプションは HTMLProvider、HTMLRenderer、useHTMLRenderer、および renderHTML に渡すことができます。
テーブルのすべての内容を表示
テーブルをモーダルで開き、すべてのデータを明確に表示
| オプション | 型 | デフォルト | 説明 |
|---|---|---|---|
components | Record<string, any> | {} | HTMLタグまたはカスタムコンポーネント名をコンポーネントにマッピングするオブジェクト。 |
renderHTML | Function | null | デフォルトのHTMLパーサを完全に置き換えるカスタムレンダリング関数（Vue/Svelteプロバイダーのみ）。 |
注: ReactおよびPreactでは、標準のHTMLタグが自動的に提供されます。これらを上書きしたりカスタムコンポーネントを追加したい場合にのみ、componentsプロップを渡してください。