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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "FAQ",
  "children": [{
    "depth": 3,
    "value": "仮想 DOM なしの JSX？　ベーパーウェア（概念だけで実態のないソフト）ですか？　これは不可能だという有名な意見を聞いたことがあります",
    "children": []
  }, {
    "depth": 3,
    "value": "Solid どれほどパフォーマンスが優れていますか？",
    "children": []
  }, {
    "depth": 3,
    "value": "React との互換性、つまり Solid で私の React ライブラリを使う方法はありますか？",
    "children": []
  }, {
    "depth": 3,
    "value": "なぜテンプレートで map を使ってはいけないのですか？　また、<For> と <Index> の違いは何ですか？",
    "children": []
  }, {
    "depth": 3,
    "value": "なぜ props やストアで分割代入が動作しないのですか？",
    "children": []
  }, {
    "depth": 3,
    "value": "onChange イベントハンドラーが時間通りに起動しないのはなぜですか？",
    "children": []
  }, {
    "depth": 3,
    "value": "クラスコンポーネントのサポートを追加してくれますか？　ライフサイクルの方が推論しやすいと思います。",
    "children": []
  }, {
    "depth": 3,
    "value": "7. 私は JSX がとても嫌いなのですが、何か別のテンプレート言語の可能性はありますか？　あ、タグ付きテンプレートリテラル/HyperScript があるんですね。使ってみようかな……。",
    "children": []
  }, {
    "depth": 3,
    "value": "Signal とストアはどのような場合に使用するのですか？　なぜこれらは違うのですか？",
    "children": []
  }, {
    "depth": 3,
    "value": "Vue のように Solid のストアに値を代入できないのはなぜですか。 Svelte、または MobX？　双方向バインディングはどこにありますか？",
    "children": []
  }, {
    "depth": 3,
    "value": "Solid のリアクティビティを単体で使うことはできますか？",
    "children": []
  }, {
    "depth": 3,
    "value": "Solid には、Next.js や Material Components のようなライブラリはありますか？",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h3: "h3",
    p: "p",
    ol: "ol",
    li: "li",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "faq",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#faq",
        children: "#"
      }), "FAQ"]
    }), "\n", jsxs(_components.h3, {
      id: "仮想-dom-なしの-jsxベーパーウェア概念だけで実態のないソフトですかこれは不可能だという有名な意見を聞いたことがあります",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#仮想-dom-なしの-jsxベーパーウェア概念だけで実態のないソフトですかこれは不可能だという有名な意見を聞いたことがあります",
        children: "#"
      }), "仮想 DOM なしの JSX？　ベーパーウェア（概念だけで実態のないソフト）ですか？　これは不可能だという有名な意見を聞いたことがあります"]
    }), "\n", jsx(_components.p, {
      children: "React の更新モデルを持っていなければ可能です。JSX は Svelte や Vue のようなテンプレート言語と同じで、特定の点ではより柔軟性があります。任意の JavaScript を挿入するのは難しい場合もありますが、スプレッド演算子をサポートするのと変わりません。つまり、これはベーパーウェアではなく、最もパフォーマンスが高いことが証明されているアプローチなのです。"
    }), "\n", jsx(_components.p, {
      children: "本当のメリットは、拡張性の高さにあります。私たちは、最適なネイティブ DOM 更新を行うためにコンパイラを用意していますが、React のようなライブラリの自由度はすべて持っています。レンダープロップや高階コンポーネントなど、標準的な技術を使ったコンポーネントを、リアクティブな「フック」とともに記述できるのです。Solid の制御フローの仕組みが気に入らない？　自分で書きましょう。"
    }), "\n", jsxs(_components.h3, {
      id: "solid-どれほどパフォーマンスが優れていますか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-どれほどパフォーマンスが優れていますか",
        children: "#"
      }), "Solid どれほどパフォーマンスが優れていますか？"]
    }), "\n", jsx(_components.p, {
      children: "何か 1 つを挙げることができればいいのですが、実際にはいくつかの重要な設計上の決定が組み合わされています。"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsx(_components.li, {
        children: "明示的なリアクティビティ、つまりリアクティブであるべきものだけを追跡します。"
      }), "\n", jsx(_components.li, {
        children: "初期生成を考慮したコンパイル。Solid はヒューリスティックを使い、適切な表現を組み合わせることで計算回数を減らし、重要な更新の粒度とパフォーマンスを維持しています。"
      }), "\n", jsx(_components.li, {
        children: "リアクティブな式は単なる関数です。これにより、不要なラッパーや同期のオーバーヘッドを取り除いた遅延 props 評価による「消えるコンポーネント」が可能になります。"
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "これらは現在のところ、Solid が競合に対して優位に立つための組み合わせであり、独特な技術です。"
    }), "\n", jsxs(_components.h3, {
      id: "react-との互換性つまり-solid-で私の-react-ライブラリを使う方法はありますか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#react-との互換性つまり-solid-で私の-react-ライブラリを使う方法はありますか",
        children: "#"
      }), "React との互換性、つまり Solid で私の React ライブラリを使う方法はありますか？"]
    }), "\n", jsx(_components.p, {
      children: "いいえ、これからもならないでしょう。API は似ていて、コンポーネントは小さな編集で移動できることが多いのですが、更新モデルは根本的に異なります。React コンポーネントは何度もレンダリングされるため、Hooks 以外のコードは非常に異なって動作します。Solid ではクロージャやフックのルールは不要なだけでなく、ここでは動作しないコードを規定することがあります。"
    }), "\n", jsx(_components.p, {
      children: "一方で、Vue 互換は現在のところ実装の予定はありませんが可能でしょう。"
    }), "\n", jsxs(_components.p, {
      children: ["一方、Solid を React で動作させることも可能です。", jsx(_components.a, {
        href: "https://github.com/solidjs/react-solid-state",
        children: "React Solid State"
      }), "では、React の関数コンポーネント内で Solid の API にアクセスできるようになります。", jsx(_components.a, {
        href: "https://github.com/Sawtaytoes/reactjs-solidjs-bridge",
        children: "reactjs-solidjs-bridge"
      }), " は Solid コンポーネント内で React コンポーネントをレンダリングしたり、その逆を行うことができ、アプリを徐々に移植する際に便利です。"]
    }), "\n", jsxs(_components.h3, {
      id: "なぜテンプレートで-map-を使ってはいけないのですかまたfor-と-index-の違いは何ですか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#なぜテンプレートで-map-を使ってはいけないのですかまたfor-と-index-の違いは何ですか",
        children: "#"
      }), "なぜテンプレートで ", jsx(_components.code, {
        children: "map"
      }), " を使ってはいけないのですか？　また、", jsx(_components.code, {
        children: "<For>"
      }), " と ", jsx(_components.code, {
        children: "<Index>"
      }), " の違いは何ですか？"]
    }), "\n", jsxs(_components.p, {
      children: ["配列が静的なものであれば、map を使っても問題はないでしょう。しかし、Signal やリアクティブなプロパティをループする場合、", jsx(_components.code, {
        children: "map"
      }), " は非効率です。何らかの理由で配列が変更されると、map 全体が再実行され、すべてのノードが再作成されることになるからです。"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "<For>"
      }), " と ", jsx(_components.code, {
        children: "<Index>"
      }), " はどちらも、これよりも賢いループソリューションを提供します。これらはレンダリングされた各ノードと配列の要素を結びつけており、配列の要素が変更されると、対応するノードだけが再レンダリングされます。"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "<Index>"
      }), " はインデックスによってこれを行います。つまり各ノードが配列のインデックスに対応します。", jsx(_components.code, {
        children: "<For>"
      }), " は値によってこれを行います。つまり各ノードが配列内のデータの一部に対応します。このため、コールバックでは ", jsx(_components.code, {
        children: "<Index>"
      }), " がアイテムの Signal を出力します。各アイテムのインデックスは固定とみなされますが、そのインデックスのデータは変更可能です。一方、", jsx(_components.code, {
        children: "<For>"
      }), " は、インデックスに対する Signal を与えます。各アイテムの内容は固定とみなされますが、要素は配列内で移動可能です。"]
    }), "\n", jsxs(_components.p, {
      children: ["例えば配列の 2 つの要素が入れ替わった場合、 ", jsx(_components.code, {
        children: "<For>"
      }), " は対応する 2 つの DOM ノードを再配置し、その過程で ", jsx(_components.code, {
        children: "index()"
      }), " Signal を更新します。", jsx(_components.code, {
        children: "<Index>"
      }), " は DOM ノードを再配置しませんが、2 つの DOM ノードの ", jsx(_components.code, {
        children: "item()"
      }), " Signal を更新し、再レンダリングを行います。"]
    }), "\n", jsxs(_components.p, {
      children: ["この違いについての詳細なデモは、Ryan のストリームの", jsx(_components.a, {
        href: "https://www.youtube.com/watch?v=YxroH_MXuhw&t=2164s",
        children: "この部分"
      }), "を参照してください。"]
    }), "\n", jsxs(_components.h3, {
      id: "なぜ-props-やストアで分割代入が動作しないのですか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#なぜ-props-やストアで分割代入が動作しないのですか",
        children: "#"
      }), "なぜ props やストアで分割代入が動作しないのですか？"]
    }), "\n", jsxs(_components.p, {
      children: ["props と Store オブジェクトでは、リアクティビティはプロパティアクセスで追跡されます。リアクティブなコンテキストで ", jsx(_components.code, {
        children: "props.whatever"
      }), " を呼び出すと、そのコンテキストを追跡してプロパティが変更されたときにそれを更新するように Solid に指示されます。分割代入をするとオブジェクトから値を分離してその時点の値を取得するので、リアクティビティは失われます。"]
    }), "\n", jsxs(_components.h3, {
      id: "onchange-イベントハンドラーが時間通りに起動しないのはなぜですか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#onchange-イベントハンドラーが時間通りに起動しないのはなぜですか",
        children: "#"
      }), jsx(_components.code, {
        children: "onChange"
      }), " イベントハンドラーが時間通りに起動しないのはなぜですか？"]
    }), "\n", jsxs(_components.p, {
      children: ["一部のフレームワークでは、入力の ", jsx(_components.code, {
        children: "onChange"
      }), " イベントが、キーを押すたびに発生するように変更されています。しかし、これは ", jsx(_components.code, {
        children: "onChange"
      }), " イベントの", jsx(_components.a, {
        href: "https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onchange",
        children: "ネイティブな動作方法"
      }), "ではありません。これは、input への「コミットされた」変更を反映することを意図しており、通常は input がフォーカスを失ったときに発生します。入力の値に対するすべての変更を処理するには、", jsx(_components.code, {
        children: "onInput"
      }), " を使用します。"]
    }), "\n", jsxs(_components.h3, {
      id: "クラスコンポーネントのサポートを追加してくれますかライフサイクルの方が推論しやすいと思います",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#クラスコンポーネントのサポートを追加してくれますかライフサイクルの方が推論しやすいと思います",
        children: "#"
      }), "クラスコンポーネントのサポートを追加してくれますか？　ライフサイクルの方が推論しやすいと思います。"]
    }), "\n", jsx(_components.p, {
      children: "クラスコンポーネントをサポートするつもりはありません。Solid におけるコンポーネントのライフサイクルは、リアクティブシステムのスケジューリングに結びついており、人為的なものです。クラスを作ることはできますが、事実上、render 関数を含むイベントハンドラー以外のコードはすべてコンストラクタで実行されます。これは、データの粒度を小さくするための言い訳のための構文に過ぎません。"
    }), "\n", jsx(_components.p, {
      children: "ライフサイクルではなく、データとその振る舞いをまとめてください。これは何十年にもわたって機能してきたリアクティブなベストプラクティスです。"
    }), "\n", jsxs(_components.h3, {
      id: "7-私は-jsx-がとても嫌いなのですが何か別のテンプレート言語の可能性はありますかあタグ付きテンプレートリテラルhyperscript-があるんですね使ってみようかな",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#7-私は-jsx-がとても嫌いなのですが何か別のテンプレート言語の可能性はありますかあタグ付きテンプレートリテラルhyperscript-があるんですね使ってみようかな",
        children: "#"
      }), "7. 私は JSX がとても嫌いなのですが、何か別のテンプレート言語の可能性はありますか？　あ、タグ付きテンプレートリテラル/HyperScript があるんですね。使ってみようかな……。"]
    }), "\n", jsx(_components.p, {
      children: "やめてください。ここでやめておきましょう。Svelte がテンプレートを使って最適化された DOM 命令を作成するのと同じように、私たちは JSX を使っています。タグ付きテンプレートリテラルや HyperScript のソリューションは、それ自体はとても素晴らしいものかもしれませんが、ビルド不可の要件のような現実的な理由がない限りあらゆる面で劣っています。バンドルが大きくなり、パフォーマンスが低下し、値のラップを手動で行う必要があります。"
    }), "\n", jsx(_components.p, {
      children: "選択肢があるのは良いことですが、Solid の JSX はここでは本当に最適なソリューションです。テンプレート DSL も制限が多いとはいえ素晴らしいですが、JSX は無料で多くのことを提供してくれます。既存のパーサー、シンタックスハイライト、Prettier、コード補完、そして最後に TypeScript です。"
    }), "\n", jsx(_components.p, {
      children: "他のライブラリもこれらの機能のサポートを追加してきましたが、それは膨大な努力を必要とし、まだ不完全で、常にメンテナンスに頭を悩ませています。これは本当に現実的なスタンスを取っています。"
    }), "\n", jsxs(_components.h3, {
      id: "signal-とストアはどのような場合に使用するのですかなぜこれらは違うのですか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#signal-とストアはどのような場合に使用するのですかなぜこれらは違うのですか",
        children: "#"
      }), "Signal とストアはどのような場合に使用するのですか？　なぜこれらは違うのですか？"]
    }), "\n", jsx(_components.p, {
      children: "ストアはネストした値を自動的にラップするので、深いデータ構造やモデルのようなものに最適です。それ以外のほとんどの用途では、Signal は軽量で、素晴らしい働きをします。"
    }), "\n", jsxs(_components.p, {
      children: ["これらを 1 つのものとしてまとめたいところですが、プリミティブをプロキシすることはできません。関数は最もシンプルなインターフェイスで、あらゆるリアクティブな式（状態のアクセスを含む）をトランスポート上で 1 つにまとめることができるため、ユニバーサルな API を提供します。Signal や状態に好きな名前をつけることができ、最小限の機能にとどめることができます。エンドユーザーに ", jsx(_components.code, {
        children: ".get()"
      }), " ", jsx(_components.code, {
        children: ".set()"
      }), " の入力を強要したり、さらに悪いことに ", jsx(_components.code, {
        children: ".value"
      }), " の入力を強要したりすることは絶対に避けたいことです。少なくとも、前者は簡潔にするためにエイリアスを付けることができますが、後者は関数を呼び出すための最も簡潔な方法に過ぎません。"]
    }), "\n", jsxs(_components.h3, {
      id: "vue-のように-solid-のストアに値を代入できないのはなぜですか-svelteまたは-mobx双方向バインディングはどこにありますか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#vue-のように-solid-のストアに値を代入できないのはなぜですか-svelteまたは-mobx双方向バインディングはどこにありますか",
        children: "#"
      }), "Vue のように Solid のストアに値を代入できないのはなぜですか。 Svelte、または MobX？　双方向バインディングはどこにありますか？"]
    }), "\n", jsx(_components.p, {
      children: "リアクティビティは強力なツールですが、同時に危険なツールでもあります。MobX はこのことを理解していて、Strict モードと Actions を導入して、更新が発生する場所や時間を制限しています。データのコンポーネントツリー全体を扱う Solid では、React から何かを学べることが明らかになりました。同じ契約を持つための手段を提供する限り、実際にイミュータブルである必要はありません。"
    }), "\n", jsx(_components.p, {
      children: "状態を更新する能力を渡せるかどうかは、状態を渡すかどうかを決めるよりも間違いなく重要です。だから、それを分離できることは重要であり、読み取りがイミュータブルである場合にのみ可能です。また、細かく更新できるのであれば、不変性のコストを払う必要はありません。幸いなことに、ImmutableJS と Immer の間には大量の先行技術があります。皮肉なことに、Solid はミュータブルな内部とイミュータブルなインターフェイスを持つ逆 Immer のように振る舞います。"
    }), "\n", jsxs(_components.h3, {
      id: "solid-のリアクティビティを単体で使うことはできますか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-のリアクティビティを単体で使うことはできますか",
        children: "#"
      }), "Solid のリアクティビティを単体で使うことはできますか？"]
    }), "\n", jsxs(_components.p, {
      children: ["もちろんです。単体のパッケージは提供していませんが、コンパイラなしの Solid をインストールし、リアクティブプリミティブを使用することは簡単です。きめ細かいリアクティビティの利点の 1 つは、ライブラリに依存しないことです。それどころか、ほとんどすべてのリアクティブライブラリがこの方法で動作します。それが ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), " に影響を与えたものであり、その基礎となる ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions",
        children: "DOM Expressions library"
      }), " が純粋にリアクティブシステムからレンダラーを作るきっかけとなりました。"]
    }), "\n", jsxs(_components.p, {
      children: ["試しにいくつか挙げてみましょう: ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid",
        children: "Solid"
      }), "、", jsx(_components.a, {
        href: "https://github.com/mobxjs/mobx",
        children: "MobX"
      }), "、", jsx(_components.a, {
        href: "https://github.com/knockout/knockout",
        children: "Knockout"
      }), "、", jsx(_components.a, {
        href: "https://github.com/sveltejs/svelte",
        children: "Svelte"
      }), "、", jsx(_components.a, {
        href: "https://github.com/adamhaile/S",
        children: "S.js"
      }), "、", jsx(_components.a, {
        href: "https://github.com/Riim/cellx",
        children: "CellX"
      }), "、", jsx(_components.a, {
        href: "https://github.com/ds300/derivablejs",
        children: "Derivable"
      }), "、", jsx(_components.a, {
        href: "https://github.com/luwes/sinuous",
        children: "Sinuous"
      }), "、そして最近では ", jsx(_components.a, {
        href: "https://github.com/vuejs/vue",
        children: "Vue"
      }), " などです。リアクティブなライブラリを作るには、例えば ", jsx(_components.a, {
        href: "https://github.com/Polymer/lit-html",
        children: "lit-html"
      }), " のようにレンダラーにタグ付けするよりもはるかに多くのことが必要ですが、感触をつかむには良い方法です。"]
    }), "\n", jsxs(_components.h3, {
      id: "solid-にはnextjs-や-material-components-のようなライブラリはありますか",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-にはnextjs-や-material-components-のようなライブラリはありますか",
        children: "#"
      }), "Solid には、Next.js や Material Components のようなライブラリはありますか？"]
    }), "\n", jsxs(_components.p, {
      children: ["制作中です！　もしエコシステム構築に興味があれば、私たちの ", jsx(_components.a, {
        href: "https://discord.com/invite/solidjs",
        children: "Discord"
      }), " で既存のエコシステムの取り組みに参加したり、独自のエコシステムを立ち上げたりできます。"]
    })]
  });
}
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=faq-e7188a96.js.map
