import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "はじめに",
  "children": [{
    "depth": 2,
    "value": "Solid を見る",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid を試す",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid を学ぶ",
    "children": []
  }, {
    "depth": 2,
    "value": "Solid に考える",
    "children": [{
      "depth": 3,
      "value": "1. 宣言型データ",
      "children": []
    }, {
      "depth": 3,
      "value": "2. 消えるコンポーネント",
      "children": []
    }, {
      "depth": 3,
      "value": "3. リード/ライトの分離",
      "children": []
    }, {
      "depth": 3,
      "value": "4. シンプルはイージーに勝る",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web コンポーネント",
    "children": []
  }, {
    "depth": 2,
    "value": "サーバーレンダリング",
    "children": []
  }, {
    "depth": 2,
    "value": "ビルドなしの選択肢",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    strong: "strong",
    h2: "h2",
    ul: "ul",
    li: "li",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "はじめに",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#はじめに",
        children: "#"
      }), "はじめに"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.strong, {
        children: "私たちは新しいドキュメントに取り組んでいます。"
      }), " 新しい初心者向けチュートリアルは", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/welcome",
        children: "こちら"
      }), "チェックできます。また、", jsx(_components.a, {
        href: "http://discord.com/invite/solidjs",
        children: "Discord"
      }), " で私たちの活動に参加してください！"]
    }), "\n", jsxs(_components.h2, {
      id: "solid-を見る",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-を見る",
        children: "#"
      }), "Solid を見る"]
    }), "\n", jsx(_components.p, {
      children: "Solid のコア コンセプトの概要を簡単に説明した動画をご覧ください:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/hw3Bx5vxKl0",
          children: "Solid in 100 seconds"
        })
      }), "\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/J70HXl1KhWE",
          children: "Solid reactivity in 10 minutes"
        })
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "solid-を試す",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-を試す",
        children: "#"
      }), "Solid を試す"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid を使い始める最も簡単な方法は、オンラインで試すことです。", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " の REPL は、アイデアを試すのに最適な方法です。また、いくつかの", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "サンプル"
      }), "を編集できる ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " もあります。"]
    }), "\n", jsxs(_components.p, {
      children: ["また、ターミナルで以下のコマンドを実行して、 ", jsx(_components.a, {
        href: "https://github.com/solidjs/templates",
        children: "Vite テンプレート"
      }), " を使用することもできます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/js my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "または TypeScript 向けに:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/ts my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# or yarn or pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["もしくはプロジェクトに依存関係をインストールできます。Solid を JSX で使用する場合（推奨）、", jsx(_components.code, {
        children: "solid-js"
      }), " NPM ライブラリーと z", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/babel-plugin-jsx-dom-expressions",
        children: "Solid JSX コンパイラー"
      }), " Babel プラグインをインストールする必要があります:"]
    }), "\n", jsx(_components.pre, {
      children: jsx(_components.code, {
        className: "hljs language-sh",
        children: "> npm install solid-js babel-preset-solid\n"
      })
    }), "\n", jsxs(_components.p, {
      children: ["そして、", jsx(_components.code, {
        children: "babel-preset-solid"
      }), " を ", jsx(_components.code, {
        children: ".babelrc"
      }), " か、webpack や rollup の Babel の設定に追加してください:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"presets\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "["
        }), jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: "]"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["TypeScript の場合、Solid の JSX を処理するために ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " を以下のように設定します（詳細は ", jsx(_components.a, {
        href: "https://www.solidjs.com/guides/typescript",
        children: "TypeScript ガイド"
      }), "を参照してください）:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-attr",
          children: "\"compilerOptions\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsx\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"preserve\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsxImportSource\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "solid-を学ぶ",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-を学ぶ",
        children: "#"
      }), "Solid を学ぶ"]
    }), "\n", jsx(_components.p, {
      children: "Solid はアプリケーションの構成要素として機能する、合成可能な小さなピースがすべてです。これらの部品は主に、多くの浅いトップレベル API を構成する関数です。幸いなことに、これらのほとんどについて知らなくても始めることができます。"
    }), "\n", jsx(_components.p, {
      children: "自由に使える構成要素には、主にコンポーネントとリアクティブプリミティブの 2 種類があります。"
    }), "\n", jsx(_components.p, {
      children: "コンポーネントは、props オブジェクトを受け取り、ネイティブの DOM 要素や他のコンポーネントを含む JSX 要素を返す関数です。これらはパスカルケースの JSX 要素として表現できます:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Hello {props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "コンポーネントは、それ自体がステートフルではなく、インスタンスを持たないという点で軽量です。代わりに、DOM 要素やリアクティブプリミティブのファクトリ関数として機能します。"
    }), "\n", jsx(_components.p, {
      children: "Solid のきめ細かいリアクティビティは、Signal、Memo、Effect の 3 つのコアプリミティブで構築されています。これらが一緒になって、ビューを最新の状態に保つための自動追跡同期エンジンを形成します。リアクティブな計算は、同期的に実行されるシンプルな関数でラップされた式の形をしています。"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Solid のリアクティビティ"
      }), "と ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Solid のレンダリング"
      }), "の詳細をご覧いただけます。"]
    }), "\n", jsxs(_components.h2, {
      id: "solid-に考える",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-に考える",
        children: "#"
      }), "Solid に考える"]
    }), "\n", jsx(_components.p, {
      children: "Solid の設計には、Web サイトやアプリケーションを構築する上で、どのような原則や価値観が最適なのかといういくつもの意見が込められています。Solid の背後にある哲学を知っていれば、Solid を習得し、使うことが容易になるでしょう。"
    }), "\n", jsxs(_components.h3, {
      id: "1-宣言型データ",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-宣言型データ",
        children: "#"
      }), "1. 宣言型データ"]
    }), "\n", jsx(_components.p, {
      children: "宣言型データとは、データの動作の記述を宣言に結びつけることです。データの動作のすべての側面を 1 つの場所にパッケージ化することで、簡単に構成できます。"
    }), "\n", jsxs(_components.h3, {
      id: "2-消えるコンポーネント",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-消えるコンポーネント",
        children: "#"
      }), "2. 消えるコンポーネント"]
    }), "\n", jsx(_components.p, {
      children: "更新を考慮せずにコンポーネントを構造化することは難しいです。Solid の更新はコンポーネントから完全に独立しています。コンポーネント関数は一度呼び出されると消滅してしまいます。コンポーネントはコードを整理するために存在し、他の用途はあまりありません。"
    }), "\n", jsxs(_components.h3, {
      id: "3-リードライトの分離",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-リードライトの分離",
        children: "#"
      }), "3. リード/ライトの分離"]
    }), "\n", jsx(_components.p, {
      children: "正確な制御と予測可能性がより良いシステムを作ります。一方通行のフローを強制するための真の不変性は必要ありませんが、どの使用者が書き込んでいいか/いけないかを意識的に決定する能力があればよいのです。"
    }), "\n", jsxs(_components.h3, {
      id: "4-シンプルはイージーに勝る",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-シンプルはイージーに勝る",
        children: "#"
      }), "4. シンプルはイージーに勝る"]
    }), "\n", jsx(_components.p, {
      children: "きめ細やかなリアクティビティのために苦労して得た教訓です。明示的で一貫性のある規約は、より多くの努力が必要な場合でも、それだけの価値があります。目的は、基盤となる最小限のツールを提供することです。"
    }), "\n", jsxs(_components.h2, {
      id: "web-コンポーネント",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-コンポーネント",
        children: "#"
      }), "Web コンポーネント"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid は、Web コンポーネントを第一級市民として持ちたいという願望を持って生まれました。時とともに、その設計は進化し、目標も変わりました。しかし、Solid は依然として Web コンポーネントを作成するための優れた方法です。", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " を使うと Solid の関数コンポーネントを記述、ラップして、小さくてパフォーマンスの高い Web コンポーネントを作成できます。Solid アプリの内部では、Solid Element は Solid の Context API を活用でき、Solid の Portal は Shadow DOM の隔離されたスタイルをサポートします。"]
    }), "\n", jsxs(_components.h2, {
      id: "サーバーレンダリング",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#サーバーレンダリング",
        children: "#"
      }), "サーバーレンダリング"]
    }), "\n", jsx(_components.p, {
      children: "Solid は、真のアイソモーフィックな開発を可能にする動的なサーバーサイドレンダリングソリューションを備えています。Solid の Resource プリミティブを使用することで非同期データのリクエストが簡単にでき、さらに重要なことに、クライアントとブラウザの間で自動的にシリアライズおよび同期されます。"
    }), "\n", jsxs(_components.p, {
      children: ["Solid はサーバー上での非同期レンダリングとストリームレンダリングをサポートしているため、コードを一方的に記述し、それをサーバー上で実行できます。つまり、", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " やコード分割などの機能が Solid でも機能するということです。"]
    }), "\n", jsxs(_components.p, {
      children: ["詳細については、", jsx(_components.a, {
        href: "/guides/server#%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",
        children: "サーバーガイド"
      }), "をご覧ください。"]
    }), "\n", jsxs(_components.h2, {
      id: "ビルドなしの選択肢",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#ビルドなしの選択肢",
        children: "#"
      }), "ビルドなしの選択肢"]
    }), "\n", jsxs(_components.p, {
      children: ["プレーン HTML ファイルや ", jsx(_components.a, {
        href: "https://codepen.io",
        children: "https://codepen.io"
      }), " などの非コンパイル環境で Solid を使用する必要がある場合、Solid のコンパイル時に最適化された JSX 構文ではなく、プレーン JavaScript で ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/html",
        children: [jsx(_components.code, {
          children: "html``"
        }), " Tagged Template Literals"]
      }), " または ", jsxs(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid/h",
        children: ["HyperScript の ", jsx(_components.code, {
          children: "h()"
        }), " 関数"]
      }), "を使用できます。"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), " を使って、ブラウザから直接実行することもできます。例えば:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " { render } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\n\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), " = (", jsx(_components.span, {
            className: "hljs-params"
          }), ") => {\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " [count, setCount] = ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "createSignal"
          }), "(", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), "),\n          timer = ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "setInterval"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "setCount"
          }), "(", jsx(_components.span, {
            className: "hljs-title function_",
            children: "count"
          }), "() + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), "), ", jsx(_components.span, {
            className: "hljs-number",
            children: "1000"
          }), ");\n        ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "onCleanup"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "clearInterval"
          }), "(timer));\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n        ", jsx(_components.span, {
            className: "hljs-comment",
            children: "// もしくは"
          }), "\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "h"
          }), "(", jsx(_components.span, {
            className: "hljs-string",
            children: "\"div\""
          }), ", {}, count);\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "ビルドレス化の利点はトレードオフを伴います:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsxs(_components.li, {
        children: ["式は常にゲッター関数でラップされる必要があり、そうしないとリアクティブになりません。\n次のコードは ", jsx(_components.code, {
          children: "first"
        }), " や ", jsx(_components.code, {
          children: "last"
        }), " の値が変更されても更新されません。テンプレートが内部で作成するエフェクトの中で値にアクセスしないため、依存関係が追跡されないからです:", "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-js",
            children: ["html`", jsxs(_components.span, {
              className: "xml",
              children: [" ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Hello "]
            }), jsxs(_components.span, {
              className: "hljs-subst",
              children: ["${first() + ", jsx(_components.span, {
                className: "hljs-string",
                children: "\" \""
              }), " + last()}"]
            }), jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), " `"]
            }), ";\n", jsx(_components.span, {
              className: "hljs-comment",
              children: "// or"
            }), "\n", jsx(_components.span, {
              className: "hljs-title function_",
              children: "h"
            }), "(", jsx(_components.span, {
              className: "hljs-string",
              children: "\"h1\""
            }), ", {}, ", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello \""
            }), ", ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "first"
            }), "() + ", jsx(_components.span, {
              className: "hljs-string",
              children: "\" \""
            }), " + ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "last"
            }), "());\n"]
          })
        }), "\n", "テンプレートはエフェクト内のゲッターから読み込まれ、依存関係が追跡されるため、", jsx(_components.code, {
          children: "first"
        }), " や ", jsx(_components.code, {
          children: "last"
        }), " が変更されると、以下のように期待通りに更新されます:", "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-js",
            children: ["html`", jsxs(_components.span, {
              className: "xml",
              children: [" ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Hello "]
            }), jsxs(_components.span, {
              className: "hljs-subst",
              children: ["${() => first() + ", jsx(_components.span, {
                className: "hljs-string",
                children: "\" \""
              }), " + last()}"]
            }), jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), " `"]
            }), ";\n", jsx(_components.span, {
              className: "hljs-comment",
              children: "// or"
            }), "\n", jsx(_components.span, {
              className: "hljs-title function_",
              children: "h"
            }), "(", jsx(_components.span, {
              className: "hljs-string",
              children: "\"h1\""
            }), ", {}, ", jsx(_components.span, {
              className: "hljs-string",
              children: "\"Hello \""
            }), ", ", jsx(_components.span, {
              className: "hljs-function",
              children: "() =>"
            }), " ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "first"
            }), "() + ", jsx(_components.span, {
              className: "hljs-string",
              children: "\" \""
            }), " + ", jsx(_components.span, {
              className: "hljs-title function_",
              children: "last"
            }), "());\n"]
          })
        }), "\n", "Solid の JSX はコンパイル時の能力によりこの問題はなく、", jsx(_components.code, {
          children: "<h1>Hello {first() + ' ' + last()}</h1>"
        }), " のような式はリアクティブに動作します。"]
      }), "\n", jsxs(_components.li, {
        children: ["Solid JSX のようにビルド時の最適化が行われないため、各テンプレートが最初に実行されるときにランタイムでコンパイルされるため、アプリの起動速度がわずかに遅くなりますが、多くのユースケースでこのパフォーマンスの低下は気にならない程度になります。", jsx(_components.code, {
          children: "html``"
        }), " テンプレートタグを使用しても、JSX と同様に起動後の処理速度は変わりません。", jsx(_components.code, {
          children: "h()"
        }), " の呼び出しは、実行前にテンプレート全体を静的に解析できないため、常に進行速度が遅くなります。"]
      }), "\n"]
    }), "\n", jsxs(_components.p, {
      children: ["TypeScript でこれらを動作させるには、対応する DOM Expressions ライブラリが必要です。タグ付きテンプレートリテラルは ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " で、HyperScript は ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), " で利用できます。"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=getting-started-d815b230.js.map
