var sections = [
	{
		slug: "%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB",
		title: "はじめに",
		level: 1,
		children: [
			{
				slug: "solid-%E3%82%92%E8%A9%A6%E3%81%99",
				title: "Solid を試す",
				level: 2,
				children: [
				]
			},
			{
				slug: "solid-%E3%82%92%E5%AD%A6%E3%81%B6",
				title: "Solid を学ぶ",
				level: 2,
				children: [
				]
			},
			{
				slug: "solid-%E3%81%AB%E8%80%83%E3%81%88%E3%82%8B",
				title: "Solid に考える",
				level: 2,
				children: [
					{
						slug: "1.-%E5%AE%A3%E8%A8%80%E5%9E%8B%E3%83%87%E3%83%BC%E3%82%BF",
						title: "1. 宣言型データ",
						level: 3,
						children: [
						]
					},
					{
						slug: "2.-%E6%B6%88%E3%81%88%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88",
						title: "2. 消えるコンポーネント",
						level: 3,
						children: [
						]
					},
					{
						slug: "3.-%E3%83%AA%E3%83%BC%E3%83%89%2F%E3%83%A9%E3%82%A4%E3%83%88%E3%81%AE%E5%88%86%E9%9B%A2",
						title: "3. リード/ライトの分離",
						level: 3,
						children: [
						]
					},
					{
						slug: "4.-%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AF%E3%82%A4%E3%83%BC%E3%82%B8%E3%83%BC%E3%81%AB%E5%8B%9D%E3%82%8B",
						title: "4. シンプルはイージーに勝る",
						level: 3,
						children: [
						]
					}
				]
			},
			{
				slug: "web-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88",
				title: "Web コンポーネント",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0",
				title: "サーバーレンダリング",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%AA%E3%81%97%EF%BC%9F",
				title: "コンパイルなし？",
				level: 2,
				children: [
				]
			}
		]
	},
	{
		slug: "%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%93%E3%83%86%E3%82%A3",
		title: "リアクティビティ",
		level: 1,
		children: [
			{
				slug: "%E3%83%97%E3%83%AA%E3%83%9F%E3%83%86%E3%82%A3%E3%83%96%E3%81%AE%E7%B4%B9%E4%BB%8B",
				title: "プリミティブの紹介",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E5%8B%95%E4%BD%9C%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF",
				title: "動作の仕組み",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E8%80%83%E6%85%AE%E3%81%99%E3%81%B9%E3%81%8D%E7%82%B9",
				title: "考慮すべき点",
				level: 2,
				children: [
				]
			}
		]
	},
	{
		slug: "%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0",
		title: "レンダリング",
		level: 1,
		children: [
			{
				slug: "jsx-%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB",
				title: "JSX コンパイル",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E5%B1%9E%E6%80%A7%E3%81%A8%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3",
				title: "属性とプロパティ",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC",
				title: "エントリー",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88",
				title: "コンポーネント",
				level: 2,
				children: [
				]
			},
			{
				slug: "props",
				title: "Props",
				level: 2,
				children: [
				]
			},
			{
				slug: "children",
				title: "Children",
				level: 2,
				children: [
				]
			}
		]
	},
	{
		slug: "%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0",
		title: "サーバーサイドレンダリング",
		level: 1,
		children: [
			{
				slug: "%E3%83%8F%E3%82%A4%E3%83%89%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88",
				title: "ハイドレーションスクリプト",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%8A%E3%82%88%E3%81%B3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%9F%E3%83%B3%E3%82%B0-ssr",
				title: "非同期およびストリーミング SSR",
				level: 2,
				children: [
				]
			},
			{
				slug: "ssr-%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9",
				title: "SSR の注意点",
				level: 2,
				children: [
				]
			},
			{
				slug: "ssr-%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B",
				title: "SSR を始める",
				level: 2,
				children: [
				]
			},
			{
				slug: "%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E7%94%9F%E6%88%90%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B",
				title: "静的サイト生成を始める",
				level: 2,
				children: [
				]
			}
		]
	}
];
var content = "<section class=\"mt-10\"><h1 id=\"%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\">#</a> はじめに</h1><h2 id=\"solid-%E3%82%92%E8%A9%A6%E3%81%99\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#solid-%E3%82%92%E8%A9%A6%E3%81%99\">#</a> Solid を試す</h2><p>Solid を使い始める最も簡単な方法は、オンラインで試すことです。<a href=\"https://playground.solidjs.com\">https://playground.solidjs.com</a> の REPL は、アイデアを試すのに最適な方法です。また、いくつかのサンプルを編集できる <a href=\"https://codesandbox.io/\">https://codesandbox.io/</a> もあります。</p><p>また、ターミナルで以下のコマンドを実行して、シンプルな <a href=\"https://vitejs.dev/\">Vite</a> テンプレートを使用することもできます:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npx degit solidjs/templates/js my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">cd</span><span style=\"color:#24292e\"> my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm i </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm run dev </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"></span></code></pre><p>または TypeScript 向けに:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npx degit solidjs/templates/ts my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">cd</span><span style=\"color:#24292e\"> my-app</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm i </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">&gt;</span><span style=\"color:#24292e\"> npm run dev </span><span style=\"color:#6a737d\"># or yarn or pnpm</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"solid-%E3%82%92%E5%AD%A6%E3%81%B6\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#solid-%E3%82%92%E5%AD%A6%E3%81%B6\">#</a> Solid を学ぶ</h2><p>Solid はアプリケーションの構成要素として機能する、合成可能な小さなピースがすべてです。これらの部品は主に、多くの浅いトップレベル API を構成する関数です。幸いなことに、これらのほとんどについて知らなくても始めることができます。</p><p>自由に使える構成要素には、主にコンポーネントとリアクティブプリミティブの 2 種類があります。</p><p>コンポーネントは、props オブジェクトを受け取り、ネイティブの DOM 要素や他のコンポーネントを含む JSX 要素を返す関数です。これらはパスカルケースの JSX 要素として表現できます:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">function</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">MyComponent</span><span style=\"color:#24292e\">(</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;Hello {props.name}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">MyComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">name</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;Solid&quot;</span><span style=\"color:#24292e\"> /&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p>コンポーネントは、それ自体がステートフルではなく、インスタンスを持たないという点で軽量です。代わりに、DOM 要素やリアクティブプリミティブのファクトリ関数として機能します。</p><p>Solid のきめ細かいリアクティビティは、Signal、Memo、Effect の 3 つのシンプルなプリミティブで構築されています。これらが一緒になって、ビューを最新の状態に保つための自動追跡同期エンジンを形成します。リアクティブな計算は、同期的に実行されるシンプルな関数でラップされた式の形をしています。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">first</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setFirst</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;JSON&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">last</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setLast</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;Bourne&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">createEffect</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> console.</span><span style=\"color:#6f42c1\">log</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">`${</span><span style=\"color:#6f42c1\">first</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">} ${</span><span style=\"color:#6f42c1\">last</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">}`</span><span style=\"color:#24292e\">));</span></span>\n<span class=\"line\"></span></code></pre><p><a href=\"#%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%93%E3%83%86%E3%82%A3\">Solid のリアクティビティ</a>と <a href=\"#%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\">Solid のレンダリング</a>の詳細をご覧いただけます。</p><h2 id=\"solid-%E3%81%AB%E8%80%83%E3%81%88%E3%82%8B\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#solid-%E3%81%AB%E8%80%83%E3%81%88%E3%82%8B\">#</a> Solid に考える</h2><p>Solid の設計には、Web サイトやアプリケーションを構築する上で、どのような原則や価値観が最適なのかといういくつもの意見が込められています。Solid の背後にある哲学を知っていれば、Solid を習得し、使うことが容易になるでしょう。</p><h3 id=\"1.-%E5%AE%A3%E8%A8%80%E5%9E%8B%E3%83%87%E3%83%BC%E3%82%BF\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#1.-%E5%AE%A3%E8%A8%80%E5%9E%8B%E3%83%87%E3%83%BC%E3%82%BF\">#</a> 1. 宣言型データ</h3><p>宣言型データとは、データの動作の記述を宣言に結びつけることです。データの動作のすべての側面を 1 つの場所にパッケージ化することで、簡単に構成できます。</p><h3 id=\"2.-%E6%B6%88%E3%81%88%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#2.-%E6%B6%88%E3%81%88%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88\">#</a> 2. 消えるコンポーネント</h3><p>更新を考慮せずにコンポーネントを構造化することは難しいです。Solid の更新はコンポーネントから完全に独立しています。コンポーネント関数は一度呼び出されると消滅してしまいます。コンポーネントはコードを整理するために存在し、他の用途はあまりありません。</p><h3 id=\"3.-%E3%83%AA%E3%83%BC%E3%83%89%2F%E3%83%A9%E3%82%A4%E3%83%88%E3%81%AE%E5%88%86%E9%9B%A2\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#3.-%E3%83%AA%E3%83%BC%E3%83%89%2F%E3%83%A9%E3%82%A4%E3%83%88%E3%81%AE%E5%88%86%E9%9B%A2\">#</a> 3. リード/ライトの分離</h3><p>正確な制御と予測可能性がより良いシステムを作ります。一方通行のフローを強制するための真の不変性は必要ありませんが、どの使用者が書き込んでいいか/いけないかを意識的に決定する能力があればよいのです。</p><h3 id=\"4.-%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AF%E3%82%A4%E3%83%BC%E3%82%B8%E3%83%BC%E3%81%AB%E5%8B%9D%E3%82%8B\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#4.-%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AF%E3%82%A4%E3%83%BC%E3%82%B8%E3%83%BC%E3%81%AB%E5%8B%9D%E3%82%8B\">#</a> 4. シンプルはイージーに勝る</h3><p>きめ細やかなリアクティビティのために苦労して得た教訓です。明示的で一貫性のある規約は、より多くの努力が必要な場合でも、それだけの価値があります。目的は、基盤となる最小限のツールを提供することです。</p><h2 id=\"web-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#web-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88\">#</a> Web コンポーネント</h2><p>Solid は、Web コンポーネントを第一級市民として持ちたいという願望を持って生まれました。時とともに、その設計は進化し、目標も変わりました。しかし、Solid は依然として Web コンポーネントを作成するための優れた方法です。<a href=\"https://github.com/solidjs/solid/tree/main/packages/solid-element\">Solid Element</a> を使うと Solid の関数コンポーネントを記述、ラップして、小さくてパフォーマンスの高い Web コンポーネントを作成できます。Solid アプリの内部では、Solid Element は Solid の Context API を活用でき、Solid の Portal は Shadow DOM の隔離されたスタイルをサポートします。</p><h2 id=\"%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\">#</a> サーバーレンダリング</h2><p>Solid は、真のアイソモーフィックな開発を可能にする動的なサーバーサイドレンダリングソリューションを備えています。Solid の Resource プリミティブを使用することで非同期データのリクエストが簡単にでき、さらに重要なことに、クライアントとブラウザの間で自動的にシリアライズおよび同期されます。</p><p>Solid はサーバー上での非同期レンダリングとストリームレンダリングをサポートしているため、コードを一方的に記述し、それをサーバー上で実行できます。つまり、<a href=\"https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense\">render-as-you-fetch</a> やコード分割などの機能が Solid でも機能するということです。</p><p>詳細については、<a href=\"#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\">サーバーガイド</a>をご覧ください。</p><h2 id=\"%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%AA%E3%81%97%EF%BC%9F\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%AA%E3%81%97%EF%BC%9F\">#</a> コンパイルなし？</h2><p>JSX が嫌い？ 式をラップするのを手動で作業したり、パフォーマンスが低下したり、バンドルサイズが大きくなっても構わないですか？ 代わりにタグ付きテンプレートリテラルや HyperScript を使って、コンパイルされない環境で Solid アプリを作成することもできます。</p><p><a href=\"https://www.skypack.dev/\">Skypack</a> を使って、ブラウザから直接実行することもできます:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">script</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">type</span><span style=\"color:#24292e\">=</span><span style=\"color:#032f62\">&quot;module&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        createSignal,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        onCleanup,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;https://cdn.skypack.dev/solid-js&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { render } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;https://cdn.skypack.dev/solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> html </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;https://cdn.skypack.dev/solid-js/html&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">App</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">count</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setCount</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#005cc5\">0</span><span style=\"color:#24292e\">),</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">          </span><span style=\"color:#005cc5\">timer</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">setInterval</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">setCount</span><span style=\"color:#24292e\">(</span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">() </span><span style=\"color:#d73a49\">+</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">1</span><span style=\"color:#24292e\">), </span><span style=\"color:#005cc5\">1000</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        </span><span style=\"color:#6f42c1\">onCleanup</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">clearInterval</span><span style=\"color:#24292e\">(timer));</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">html</span><span style=\"color:#032f62\">`&lt;div&gt;${</span><span style=\"color:#24292e\">count</span><span style=\"color:#032f62\">}&lt;/div&gt;`</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      };</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#6f42c1\">render</span><span style=\"color:#24292e\">(App, document.body);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">script</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span></code></pre><p>これらを TypeScript で動作させるには、対応する DOM Expressions ライブラリが必要であることを覚えておいてください。タグ付きテンプレートリテラルは <a href=\"https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions\">Lit DOM Expressions</a> で使用でき、HyperScript は <a href=\"https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions\">Hyper DOM Expressions</a> で使用できます。</p></section><section class=\"mt-10\"><h1 id=\"%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%93%E3%83%86%E3%82%A3\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%93%E3%83%86%E3%82%A3\">#</a> リアクティビティ</h1><p>Solid のデータ管理は、すべての更新を担当する一連の柔軟なリアクティブプリミティブで構築されています。MobX や Vue と非常に似たアプローチをとっていますが、仮想 DOM のために粒度を変えることはありません。Effect や JSX ビューのコードでリアクティブな値にアクセスすると、依存関係が自動的に追跡されます。</p><p>Solid のプリミティブは、主にタプルを返す <code>create</code> を呼び出す形で提供されています。大抵の場合、タプルの最初の要素は読み取り可能なプリミティブで、2 番目の要素はセッターです。読み取り可能な部分のみをプリミティブ名で参照するのが一般的です。</p><p>これは <code>count</code> Signal の変更に基づいて更新される、基本的な自動インクリメントカウンターです。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { createSignal, onCleanup } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { render } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">App</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">count</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setCount</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#005cc5\">0</span><span style=\"color:#24292e\">),</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#005cc5\">timer</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">setInterval</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">setCount</span><span style=\"color:#24292e\">(</span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">() </span><span style=\"color:#d73a49\">+</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">1</span><span style=\"color:#24292e\">), </span><span style=\"color:#005cc5\">1000</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6f42c1\">onCleanup</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">clearInterval</span><span style=\"color:#24292e\">(timer));</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">render</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, document.</span><span style=\"color:#6f42c1\">getElementById</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;app&quot;</span><span style=\"color:#24292e\">));</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"%E3%83%97%E3%83%AA%E3%83%9F%E3%83%86%E3%82%A3%E3%83%96%E3%81%AE%E7%B4%B9%E4%BB%8B\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%83%97%E3%83%AA%E3%83%9F%E3%83%86%E3%82%A3%E3%83%96%E3%81%AE%E7%B4%B9%E4%BB%8B\">#</a> プリミティブの紹介</h2><p>Solid は、Signal、Memo、Effect の 3 つの主要なプリミティブで構成されています。これらのプリミティブの核となるのは、Memo と Effect をラップすることで Signal（と Memo）を追跡するオブザーバーパターンです。</p><p>Signal は最もシンプルなプリミティブです。Signal には値が含まれており、読み書きされたときにインターセプトできるように get と set の関数が用意されています。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">count</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setCount</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#005cc5\">0</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>Effect は、Signal の読み込みをラップし、依存する Signal の値が変更されるたびに再実行する関数です。これは、レンダリングなどの副作用を作成するのに便利です。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6f42c1\">createEffect</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> console.</span><span style=\"color:#6f42c1\">log</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;The latest count is&quot;</span><span style=\"color:#24292e\">, </span><span style=\"color:#6f42c1\">count</span><span style=\"color:#24292e\">()));</span></span>\n<span class=\"line\"></span></code></pre><p>最後に、Memo はキャッシュされた派生値です。Memo は Signal と Effect の両方の特性を持っています。依存する Signal を追跡し、それらが変更されたときにのみ再実行され、Memo 自体も追跡可能な Signal です。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">fullName</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">`${</span><span style=\"color:#6f42c1\">firstName</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">} ${</span><span style=\"color:#6f42c1\">lastName</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">}`</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"%E5%8B%95%E4%BD%9C%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E5%8B%95%E4%BD%9C%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF\">#</a> 動作の仕組み</h2><p>Signal は、サブスクリプションのリストを保持するイベントエミッタです。Signal は、値が変わるたびにサブスクライバーに通知します。</p><p>さらに興味深いのは、これらのサブスクリプションがどのように行われるかということです。Solid は自動的な依存関係追跡を使用しています。データが変更されると自動的に更新されます。</p><p>この秘訣は、ランタイムのグローバルスタックにあります。Effect や Memo が開発者から提供された関数を実行（または再実行）する前に、そのスタックに自分自身をプッシュします。そして、読み込まれた Signal は、スタック上に現在のリスナーがあるかどうかをチェックし、あればそのリスナーをサブスクリプションに追加します。</p><p>このように考えることができます:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">function</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#e36209\">value</span><span style=\"color:#24292e\">) {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">subscribers</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">new</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">Set</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">read</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">listener</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">getCurrentListener</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">if</span><span style=\"color:#24292e\"> (listener) subscribers.</span><span style=\"color:#6f42c1\">add</span><span style=\"color:#24292e\">(listener);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> value;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  };</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">write</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">nextValue</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    value </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> nextValue;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">for</span><span style=\"color:#24292e\"> (</span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">sub</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">of</span><span style=\"color:#24292e\"> subscribers) sub.</span><span style=\"color:#6f42c1\">run</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  };</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> [read, write];</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span></code></pre><p>これで、Signal を更新するたびに、どの Effect を再実行すればよいかがわかります。シンプルで効果的です。実際の実装はもっと複雑ですが、これが、起こっていることの根幹です。</p><p>リアクティビティの仕組みをより詳しく理解するには、以下の記事が役立ちます:</p><p><a href=\"https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf\">A Hands-on Introduction to Fine-Grained Reactivity</a></p><p><a href=\"https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p\">Building a Reactive Library from Scratch</a></p><p><a href=\"https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering\">SolidJS: Reactivity to Rendering</a></p><h2 id=\"%E8%80%83%E6%85%AE%E3%81%99%E3%81%B9%E3%81%8D%E7%82%B9\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E8%80%83%E6%85%AE%E3%81%99%E3%81%B9%E3%81%8D%E7%82%B9\">#</a> 考慮すべき点</h2><p>リアクティビティに対するこのアプローチは、非常にパワフルでダイナミックです。条件付きコードの異なるブランチを実行することで、依存関係がその場で変化することに対応できます。また、何段階もの間接参照でも機能します。追跡スコープ内で実行された関数もすべて追跡されます。</p><p>ただし、注意しなければならない重要な動作とトレードオフがいくつかあります。</p><ol> <li> <p>すべてのリアクティビティは、直接またはゲッター/プロキシの下に隠されているかどうかにかかわらず関数の呼び出しから追跡され、プロパティアクセスによってトリガーされます。つまり、どこでリアクティブオブジェクトのプロパティにアクセスするかが重要になります。</p> </li> <li> <p>制御フローからのコンポーネントやコールバックは、スコープを追跡せず、一度しか実行されません。つまり、コンポーネント内のトップレベルでロジックを実行したり分割代入しても、再実行されないということです。コードのその部分を再評価するためには、他のリアクティブプリミティブや JSX からこれらの Signal、Store、props にアクセスする必要があります。</p> </li> <li> <p>この方法では、同期的にしか追跡できません。Effect で setTimeout があったり、async 関数を使用したりしても、事後に非同期を実行するコードは追跡されません。</p> </li> </ol></section><section class=\"mt-10\"><h1 id=\"%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\">#</a> レンダリング</h1><p>Solid は、JSX、タグ付きテンプレートリテラル、および Solid の HyperScript バリアントの 3 つの形式でテンプレートをサポートしていますが、JSX が主流となっています。その理由は？ JSX は、コンパイルのために作られた優れた DSL です。明確な構文を持ち、TypeScript をサポートし、Babel と連携し、Code Syntax Highlighting や Prettier などのツールをサポートしています。基本的にすべてを無料で提供してくれるツールを使うのは現実的なことでした。コンパイルされたソリューションとして、素晴らしい DX を提供します。こんなに広くサポートされているものを使えるのに、なぜカスタム構文 DSL で苦労しているのですか？</p><h2 id=\"jsx-%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#jsx-%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB\">#</a> JSX コンパイル</h2><p>レンダリングは、JSX テンプレートを最適化されたネイティブな js コードに事前コンパイルすることが伴います。JSX コードは以下のように構成されます:</p><ul> <li>インスタンス化されるたびに複製されるテンプレート DOM 要素</li> <li>firstChild と nextSibling のみを使用する一連の参照宣言</li> <li>作成された要素を更新するためのきめ細かな計算</li> </ul><p>このアプローチは、document.createElement を使って要素をひとつずつ作成するよりもパフォーマンスが高く、コード量も少なくて済みます。</p><h2 id=\"%E5%B1%9E%E6%80%A7%E3%81%A8%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E5%B1%9E%E6%80%A7%E3%81%A8%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3\">#</a> 属性とプロパティ</h2><p>Solid は、属性の大文字小文字を区別しないなど、HTML の慣習を可能な限り反映しようとしています。</p><p>ネイティブ要素の JSX のすべての属性の大部分は、DOM 属性として設定されます。静的な値は、複製されるテンプレートに直接組み込まれます。追加の機能を提供する <code>class</code>、<code>style</code>、<code>value</code>、<code>innerHTML</code> のようないくつかの例外もあります。</p><p>しかし、カスタム要素（ネイティブの組み込みを除く）は動的な場合、プロパティがデフォルトとなります。これは、より複雑なデータ型を扱うためです。これは、標準的なのスネークケースの属性名 <code>some-attr</code> をキャメルケース <code>someAttr</code> に変換することで実現しています。</p><p>しかし、名前空間ディレクティブを使って、この動作を直接制御することは可能です。属性を <code>attr:</code> で強制的に指定したり、プロパティを <code>prop:</code> で強制的に指定できます:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">my-element</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">prop</span><span style=\"color:#24292e\">:</span><span style=\"color:#005cc5\">UniqACC</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{state.value} </span><span style=\"color:#005cc5\">attr</span><span style=\"color:#24292e\">:</span><span style=\"color:#005cc5\">title</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{state.title} /&gt;</span></span>\n<span class=\"line\"></span></code></pre><blockquote> <p><strong>注意:</strong> 静的属性は、複製される html テンプレートの一部として作成されます。固定および動的な式は、JSX のバインディング順に後から適用されます。ほとんどの DOM 要素では問題ありませんが、<code>type='range'</code>を持つ input 要素のように、順序が重要になるものもあります。要素をバインドする際には、この点に注意してください。</p> </blockquote><h2 id=\"%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%82%A8%E3%83%B3%E3%83%88%E3%83%AA%E3%83%BC\">#</a> エントリー</h2><p>Solid をマウントする最も簡単な方法は、'solid-js/web' から render をインポートすることです。<code>render</code> は第一引数に関数、第二引数にマウントコンテナを取り、廃棄メソッドを返します。この <code>render</code> は自動的にリアクティブルートを作成し、マウントコンテナへのレンダリングを処理します。最高のパフォーマンスを得るためには、子のない要素を使用してください。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { render } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">render</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, document.</span><span style=\"color:#6f42c1\">getElementById</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;main&quot;</span><span style=\"color:#24292e\">));</span></span>\n<span class=\"line\"></span></code></pre><blockquote> <p><strong>重要</strong> 第一引数は関数である必要があります。そうしないと、リアクティブシステムを適切に追跡し、スケジュールできません。この単純な不備により、Effects は実行されなくなります。</p> </blockquote><h2 id=\"%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88\">#</a> コンポーネント</h2><p>Solid のコンポーネントは、単なるパスカル（キャピタル）ケースの関数です。最初の引数は props オブジェクトであり、実際の DOM ノードを返します。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Parent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;Hello&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;John&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.greeting}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    {props.children}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>すべての JSX ノードは実際の DOM ノードなので、トップレベルコンポーネントの唯一の責任は、それらを DOM に追加することです。</p><h2 id=\"props\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#props\">#</a> Props</h2><p>React や Vue、Angular やその他のフレームワークと同様に、Solid ではコンポーネントにプロパティを定義して、子コンポーネントにデータを渡すことができます。ここでは、親コンポーネントが文字列 &quot;Hello&quot; を <code>greeting</code> プロパティを介して <code>Label</code> コンポーネントに渡しています。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Parent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;Hello&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;John&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>上の例では、<code>greeting</code> に設定されている値は静的なものですが、動的な値を設定することもできます。例えば:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Parent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setGreeting</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;Hello&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">greeting</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">greeting</span><span style=\"color:#24292e\">()}&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;John&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">section</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  );</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>コンポーネントは、<code>props</code> という引数を介して渡されたプロパティにアクセスできます。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.greeting}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    {props.children}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>他のフレームワークとは異なり、コンポーネントの <code>props</code> に対してオブジェクトの分割代入を使用することはできません。舞台裏では、<code>props</code> オブジェクトが Object のゲッターに依存して、値を遅延取得するためです。分割代入を使用すると、<code>props</code> のリアクティビティが損なわれます。</p><p>この例は、Solid で props にアクセスする「正しい」方法を示しています:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// ここでは、`props.name` が期待通りに更新されます</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">MyComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.name}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p>この例は、Solid での間違った props へのアクセス方法を示しています:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// これはだめ</span></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// ここでは、`props.name` は `name` に分解されるため、更新されません（つまり、リアクティブではない）</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">MyComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> ({ </span><span style=\"color:#e36209\">name</span><span style=\"color:#24292e\"> }) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{name}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p>props オブジェクトは、使っているときは普通のオブジェクトのように見えますが（Typescript ユーザーは props オブジェクトが普通のオブジェクトのように型付けされていることに気づくでしょう）、実際には Signal に似たリアクティブなオブジェクトです。これにはいくつかの意味があります。</p><p>多くの JSX フレームワークとは異なり、Solid の関数コンポーネントは（レンダリングサイクルごとではなく）一度しか実行されないため、以下の例は期待通りには動作しません。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { createSignal } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{value}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">export</span><span style=\"color:#e36209\"> </span><span style=\"color:#d73a49\">default</span><span style=\"color:#e36209\"> </span><span style=\"color:#d73a49\">function</span><span style=\"color:#e36209\"> </span><span style=\"color:#6f42c1\">Form</span><span style=\"color:#e36209\">() </span><span style=\"color:#24292e\">{</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">setValue</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createSignal</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()} /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">input</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">type</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;text&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">oninput</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{(</span><span style=\"color:#e36209\">e</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">setValue</span><span style=\"color:#24292e\">(e.currentTarget.value)} /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  );</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span></code></pre><p>この例では、おそらく <code>BasicComponent</code> が <code>input</code> に入力された現在の値を表示することを望んでいます。しかし、覚えておいてほしいのですが、<code>BasicComponent</code> 関数は、コンポーネントが最初に作成されたときに一度だけ実行されます。このとき（作成時）、<code>props.value</code> は <code>''</code> と等しくなります。これは、<code>BasicComponent</code> の <code>const value</code> が <code>'default'</code> に解決され、更新されないことを意味します。<code>props</code> オブジェクトはリアクティブですが、<code>const value = props.value || 'default';</code> で props にアクセスすることは、Solid の観察可能な範囲外であるため、props が変更されても自動的に再評価されません。</p><p>では、この問題を解決するにはどうすればよいのでしょうか？</p><p>一般的には、Solid が観測できる場所で <code>props</code> にアクセスする必要があります。一般的には、JSX 内部や、<code>createMemo</code>、<code>createEffect</code>、または thunk（<code>() =&gt; ...</code> 訳注: 引数を取らず値を返す関数のこと）の内部を意味します。ここでは、期待通りに動作する 1 つのソリューションを紹介します:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>これは、同等に、関数に巻き上げることができます:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>もうひとつの選択肢として、コストのかかる計算の場合は <code>createMemo</code> を使う方法もあります。例えば:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> props.value </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>あるいはヘルパーを使用する</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  props </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">({ value: </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\"> }, props);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.value}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>注意として、以下の例は動作<strong>しません</strong>:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// だめ</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> { </span><span style=\"color:#e36209\">value</span><span style=\"color:#24292e\">: </span><span style=\"color:#005cc5\">valueProp</span><span style=\"color:#24292e\"> } </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> props;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> valueProp </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// だめ</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">BasicComponent</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">valueProp</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> prop.value;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">value</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">createMemo</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> valueProp </span><span style=\"color:#d73a49\">||</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;default&quot;</span><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6f42c1\">value</span><span style=\"color:#24292e\">()}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>Solid のコンポーネントは、そのパフォーマンスの重要な部分です。Solid の「消える」コンポーネントのアプローチは、遅延 props 評価によって実現されています。props の式をすぐに評価して値を渡すのではなく、子で props にアクセスするまで実行を延期します。そうすることで、最後の瞬間まで実行を延期し、通常は DOM バインディングの中で実行し、パフォーマンスを最大化します。これにより、階層がフラットになり、コンポーネントのツリーを維持する必要がなくなります。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">Component</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">prop1</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;static&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">prop2</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{state.dynamic} /&gt;;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// だいたいこのようにコンパイルされます:</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// コンポーネント本体を分離し、コストのかかる更新を防ぐために、追跡を解除します</span></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">untrack</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6f42c1\">Component</span><span style=\"color:#24292e\">({</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    prop1: </span><span style=\"color:#032f62\">&quot;static&quot;</span><span style=\"color:#24292e\">,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#6a737d\">// 動的な式なので、ゲッターでラップ</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">get</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">prop2</span><span style=\"color:#24292e\">() {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> state.dynamic;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    },</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  })</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">);</span></span>\n<span class=\"line\"></span></code></pre><p>リアクティビティを維持するために、Solid にはいくつかの props ヘルパーがあります:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// デフォルト props</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">props </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">({ name: </span><span style=\"color:#032f62\">&quot;Smith&quot;</span><span style=\"color:#24292e\"> }, props);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// props の複製</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">newProps</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">(props);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// props のマージ</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">props </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">mergeProps</span><span style=\"color:#24292e\">(props, otherProps);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// props を複数の props オブジェクトに分割</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> [</span><span style=\"color:#005cc5\">local</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">others</span><span style=\"color:#24292e\">] </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">splitProps</span><span style=\"color:#24292e\">(props, [</span><span style=\"color:#032f62\">&quot;className&quot;</span><span style=\"color:#24292e\">])</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\"> {</span><span style=\"color:#d73a49\">...</span><span style=\"color:#24292e\">others} </span><span style=\"color:#005cc5\">className</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">cx</span><span style=\"color:#24292e\">(local.className, theme.component)} /&gt;</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"children\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#children\">#</a> Children</h2><p>Solid は React と同様に JSX Children を扱います。単一の子は <code>props.children</code> の単一の値で、複数の子は値の配列で処理されます。通常は、JSX ビューにそれらを渡します。しかし、それらを操作したい場合は、下流の制御フローを解決して Memo を返す <code>children</code> ヘルパーを使用することをお勧めします。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#6a737d\">// 単一の子</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">Label</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">class</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;label&quot;</span><span style=\"color:#24292e\">&gt;Hi, { props.children }&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;&lt;</span><span style=\"color:#22863a\">span</span><span style=\"color:#24292e\">&gt;Josie&lt;/</span><span style=\"color:#22863a\">span</span><span style=\"color:#24292e\">&gt;&lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// 複数の子</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">List</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;{props.children}&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">List</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;First&lt;/</span><span style=\"color:#22863a\">div</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  {state.expression}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;Judith&lt;/</span><span style=\"color:#22863a\">Label</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">List</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// 子の配列を map 処理</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">List</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">each</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{props.children}&gt;{</span><span style=\"color:#e36209\">item</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;{item}&lt;/</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;}&lt;/</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// ヘルパーを使って、子の配列の変更と map 処理</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">List</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> (</span><span style=\"color:#e36209\">props</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6a737d\">// children ヘルパーは値を記憶し、すべての中間的なリアクティビティを解決します</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">memo</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">children</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> props.children);</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6f42c1\">createEffect</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    </span><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">children</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">memo</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    children.</span><span style=\"color:#6f42c1\">forEach</span><span style=\"color:#24292e\">((</span><span style=\"color:#e36209\">c</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> c.classList.</span><span style=\"color:#6f42c1\">add</span><span style=\"color:#24292e\">(</span><span style=\"color:#032f62\">&quot;list-child&quot;</span><span style=\"color:#24292e\">))</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  })</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">each</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{</span><span style=\"color:#6f42c1\">memo</span><span style=\"color:#24292e\">()}&gt;{</span><span style=\"color:#e36209\">item</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;{item}&lt;/</span><span style=\"color:#22863a\">li</span><span style=\"color:#24292e\">&gt;}&lt;/</span><span style=\"color:#22863a\">For</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  &lt;/</span><span style=\"color:#22863a\">ul</span><span style=\"color:#24292e\">&gt;;</span></span>\n<span class=\"line\"></span></code></pre><p><strong>重要:</strong> Solid は子タグを高価な式として扱い、動的なリアクティブ式と同じようにラップします。つまり、<code>prop</code> へのアクセス時に遅延的に評価されます。ビューで使用する前に分割代入したり、複数回アクセスすることには注意してください。これは、Solid には事前に仮想 DOM ノードを作成してから差分を取るような余裕がないため、これらの <code>prop</code> の解決は遅延的かつ慎重に行わなければならないためです。これを行いたい場合は、<code>children</code> ヘルパーを使用すると、それらがメモ化されます。</p></section><section class=\"mt-10\"><h1 id=\"%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0\">#</a> サーバーサイドレンダリング</h1><p>Solid は、JSX テンプレートを超効率的な文字列付加コードにコンパイルすることで、サーバーレンダリングを処理します。これは、babel プラグインまたはプリセットで、<code>generate: &quot;ssr&quot;</code> を渡すことで実現できます。クライアントとサーバーの両方で、ハイドレーションに対応したコードを生成するには、<code>hydratable: true</code> を渡す必要があります。</p><p><code>solid-js</code> と <code>solid-js/web</code> のランタイムは、node 環境で実行する場合には、非リアクティブな対照物と交換されます。他の環境では、<code>node</code> に設定された条件付きエクスポートでサーバーコードをバンドルする必要があります。ほとんどのバンドルツールは、これを行なう方法を持っています。一般的には、エクスポート条件として <code>solid</code> を使用することをお勧めします。また、ライブラリは <code>solid</code> エクスポートでソースを出荷することをお勧めします。</p><p>SSR 用にビルドすると、2 つの別々のバンドルを生成することになるので、若干の設定が必要になります。クライアントのエントリーでは <code>hydrate</code> を使用します:</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { hydrate } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">hydrate</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, document);</span></span>\n<span class=\"line\"></span></code></pre><p><em>注意: ドキュメントルートからレンダリングとハイドレーションを行うことが可能です。これにより、JSX ですべてのビューを記述できます。</em></p><p>サーバーのエントリーでは、Solid が提供する 4 つのレンダリングオプションのいずれかを使用できます。それぞれ、出力とドキュメントの先頭に挿入されるスクリプトタグが生成されます。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToString,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToStringAsync,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToNodeStream,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  renderToWebStream,</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">} </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// 同期文字列レンダリング</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">renderToString</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// 非同期文字列レンダリング</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">await</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">renderToStringAsync</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// Node Stream API</span></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">pipeToNodeWritable</span><span style=\"color:#24292e\">(App, res);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#6a737d\">// Web Stream API （Cloudflare Workers など用）</span></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> { </span><span style=\"color:#005cc5\">readable</span><span style=\"color:#24292e\">, </span><span style=\"color:#005cc5\">writable</span><span style=\"color:#24292e\"> } </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">new</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">TransformStream</span><span style=\"color:#24292e\">();</span></span>\n<span class=\"line\"><span style=\"color:#6f42c1\">pipeToWritable</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#22863a\">App</span><span style=\"color:#24292e\"> /&gt;, writable);</span></span>\n<span class=\"line\"></span></code></pre><p>便利なように <code>solid-js/web</code> は <code>isServer</code> フラグをエクスポートします。これは、ほとんどのバンドラーが、このフラグを持つものをツリーシェイクしたり、このフラグを持つコードでのみ使用されるものをクライアントバンドルからインポートしたりできるので便利です。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { isServer } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">if</span><span style=\"color:#24292e\"> (isServer) {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6a737d\">// サーバーでのみ実行</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">} </span><span style=\"color:#d73a49\">else</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#6a737d\">// ブラウザでのみ実行</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">}</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"%E3%83%8F%E3%82%A4%E3%83%89%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E3%83%8F%E3%82%A4%E3%83%89%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88\">#</a> ハイドレーションスクリプト</h2><p>Solid のランタイムがロードされる前から徐々にハイドレーションさせるためには、特別なスクリプトをページに挿入する必要があります。このスクリプトは、<code>generateHydrationScript</code> で生成して挿入するか、<code>&lt;HydrationScript /&gt;</code> タグを使用して JSX の一部として含めることができます。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { generateHydrationScript } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">app</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">renderToString</span><span style=\"color:#24292e\">(() </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> &lt;</span><span style=\"color:#e36209\">App</span><span style=\"color:#24292e\"> /&gt;);</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">`</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">  &lt;html lang=&quot;en&quot;&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">    &lt;head&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;title&gt;🔥 Solid SSR 🔥&lt;/title&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;meta charset=&quot;UTF-8&quot; /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      &lt;link rel=&quot;stylesheet&quot; href=&quot;/styles.css&quot; /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">      ${</span><span style=\"color:#6f42c1\">generateHydrationScript</span><span style=\"color:#032f62\">()</span><span style=\"color:#032f62\">}</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">    &lt;/head&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">    &lt;body&gt;${</span><span style=\"color:#24292e\">app</span><span style=\"color:#032f62\">}&lt;/body&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">  &lt;/html&gt;</span></span>\n<span class=\"line\"><span style=\"color:#032f62\">`</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span></code></pre><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#d73a49\">import</span><span style=\"color:#24292e\"> { HydrationScript } </span><span style=\"color:#d73a49\">from</span><span style=\"color:#24292e\"> </span><span style=\"color:#032f62\">&quot;solid-js/web&quot;</span><span style=\"color:#24292e\">;</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#d73a49\">const</span><span style=\"color:#24292e\"> </span><span style=\"color:#6f42c1\">App</span><span style=\"color:#24292e\"> </span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\"> () </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> {</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  </span><span style=\"color:#d73a49\">return</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">lang</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;en&quot;</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">head</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">title</span><span style=\"color:#24292e\">&gt;🔥 Solid SSR 🔥&lt;/</span><span style=\"color:#22863a\">title</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">meta</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">charset</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;UTF-8&quot;</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">meta</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">name</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;viewport&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">content</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;width=device-width, initial-scale=1.0&quot;</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">link</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">rel</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;stylesheet&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">href</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;/styles.css&quot;</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">        &lt;</span><span style=\"color:#22863a\">HydrationScript</span><span style=\"color:#24292e\"> /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;/</span><span style=\"color:#22863a\">head</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">      &lt;</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;{</span><span style=\"color:#6a737d\">/*... rest of App*/</span><span style=\"color:#24292e\">}&lt;/</span><span style=\"color:#22863a\">body</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;/</span><span style=\"color:#22863a\">html</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  );</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">};</span></span>\n<span class=\"line\"></span></code></pre><p>クライアントの実行時に利用できないアセットを挿入するドキュメントからハイドレーションする場合、問題が発生する可能性があります。Solid は <code>&lt;NoHydration&gt;</code> コンポーネントを提供しており、このコンポーネントの子は、サーバー上では通常通り動作しますが、ブラウザ上ではハイドレーションされません。</p><pre class=\"shiki\" style=\"background-color:#fff\"><code><span class=\"line\"><span style=\"color:#24292e\">&lt;</span><span style=\"color:#22863a\">NoHydration</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  {manifest.</span><span style=\"color:#6f42c1\">map</span><span style=\"color:#24292e\">((</span><span style=\"color:#e36209\">m</span><span style=\"color:#24292e\">) </span><span style=\"color:#d73a49\">=&gt;</span><span style=\"color:#24292e\"> (</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">    &lt;</span><span style=\"color:#22863a\">link</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">rel</span><span style=\"color:#d73a49\">=</span><span style=\"color:#032f62\">&quot;modulepreload&quot;</span><span style=\"color:#24292e\"> </span><span style=\"color:#005cc5\">href</span><span style=\"color:#d73a49\">=</span><span style=\"color:#24292e\">{m.href} /&gt;</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">  ))}</span></span>\n<span class=\"line\"><span style=\"color:#24292e\">&lt;/</span><span style=\"color:#22863a\">NoHydration</span><span style=\"color:#24292e\">&gt;</span></span>\n<span class=\"line\"></span></code></pre><h2 id=\"%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%8A%E3%82%88%E3%81%B3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%9F%E3%83%B3%E3%82%B0-ssr\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%81%8A%E3%82%88%E3%81%B3%E3%82%B9%E3%83%88%E3%83%AA%E3%83%BC%E3%83%9F%E3%83%B3%E3%82%B0-ssr\">#</a> 非同期およびストリーミング SSR</h2><p>これらのメカニズムは、アプリケーションの動作に関する Solid の知識に基づいて構築されています。先にフェッチしてからレンダリングするのではなく、サーバー上で Suspense と Resource API を使用することで実現しています。Solid は、クライアントと同様に、サーバー上でレンダリングしながらフェッチします。コードや実行パターンも全く同じように書かれています。</p><p>非同期レンダリングは、すべてのサスペンス境界が解決するまで待ってから結果を送信します（静的サイト生成の場合はファイルに書き込みます）。</p><p>ストリーミングは、サーバー上でサスペンスのフォールバックをレンダリングすると同時に、ブラウザに同期コンテンツのフラッシュを開始します。その後、サーバー上で非同期データが終了すると、同じストリームを介してクライアントにデータを送信し、ブラウザがジョブを終了してフォールバックを実際のコンテンツに置き換えることで、サスペンスを解決します。</p><p>この方法の利点:</p><ul> <li>サーバーは非同期データが応答するのを待つ必要がありません。アセットはより早くブラウザにロードされ、ユーザーはより早くコンテンツを見始めることができます。</li> <li>JAMStack のようなクライアントフェッチに比べて、データのロードはサーバー上ですぐに始まり、クライアントの JavaScript がロードされるのを待つ必要はありません。</li> <li>すべてのデータはシリアル化され、サーバーからクライアントに自動的に転送されます。</li> </ul><h2 id=\"ssr-%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#ssr-%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9\">#</a> SSR の注意点</h2><p>Solid のアイソモーフィック SSR ソリューションは、どちらの環境でも同じように動作する単一のコードベースとしてコードを書くことができるという点で非常に強力です。しかし、これによってハイドレーションに期待されることがあります。ほとんどの場合、クライアントでレンダリングされるビューは、サーバーでレンダリングされるビューと同じです。テキストに関しては正確である必要はありませんが、マークアップは構造的に同じであるべきです。</p><p>サーバーでレンダリングされたマーカーを使用して、サーバー上の要素やリソースの位置を一致させます。このため、クライアントとサーバーは同じコンポーネントを使用する必要があります。これは、Solid がクライアントとサーバーで同じようにレンダリングされることを考えると、通常は問題になりません。しかし、現在のところ、クライアントではハイドレーションされないものをサーバーでレンダリングする手段がありません。現在のところ、ページ全体を部分的にハイドレーションさせて、ハイドレーションマーカーを生成しない方法はありません。それはオール・オア・ナッシングです。部分的なハイドレーションは、将来的に検討したいと考えています。</p><p>最後に、すべてのリソースは <code>render</code> ツリーで定義する必要があります。リソースは自動的にシリアライズされてブラウザに取り込まれますが、これは <code>render</code> や <code>pipeTo</code> のメソッドがレンダリングの進行状況を把握しているからです。同様に、サーバーにはリアクティビティがないので、最初のレンダリングで Signal を更新して、ツリーの上位に反映されることを期待してはいけません。サスペンスの境界がある一方で、Solid の SSR は基本的にトップダウンです。</p><h2 id=\"ssr-%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#ssr-%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B\">#</a> SSR を始める</h2><p>SSR の設定には注意が必要です。<a href=\"https://github.com/solidjs/solid/blob/main/packages/solid-ssr\">solid-ssr</a> パッケージにはいくつかの例があります。</p><p>しかし、この経験をよりスムーズにすることを目的とした新しいスターター <a href=\"https://github.com/solidjs/solid-start\">SolidStart</a> が開発されています。</p><h2 id=\"%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E7%94%9F%E6%88%90%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B\" tabindex=\"-1\"><a class=\"header-anchor\" href=\"#%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E7%94%9F%E6%88%90%E3%82%92%E5%A7%8B%E3%82%81%E3%82%8B\">#</a> 静的サイト生成を始める</h2><p><a href=\"https://github.com/solidjs/solid/blob/main/packages/solid-ssr\">solid-ssr</a> には、静的サイトや事前レンダリングされたサイトを生成するためのシンプルなユーティリティが同梱されています。詳しくは README をご覧ください。</p></section>";
var guide = {
	sections: sections,
	content: content
};

export { content, guide as default, sections };
