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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "他のライブラリとの比較",
  "children": [{
    "depth": 2,
    "value": "React",
    "children": [{
      "depth": 4,
      "value": "移行のためのアドバイス:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Vue",
    "children": [{
      "depth": 4,
      "value": "移行のためのアドバイス:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Svelte",
    "children": [{
      "depth": 4,
      "value": "移行のためのアドバイス:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Knockout.js",
    "children": [{
      "depth": 4,
      "value": "移行のためのアドバイス:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Lit & LighterHTML",
    "children": [{
      "depth": 4,
      "value": "移行のためのアドバイス:",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "S.js",
    "children": []
  }, {
    "depth": 2,
    "value": "RxJS",
    "children": []
  }, {
    "depth": 2,
    "value": "その他",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    h4: "h4",
    code: "code"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "他のライブラリとの比較",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#他のライブラリとの比較",
        children: "#"
      }), "他のライブラリとの比較"]
    }), "\n", jsxs(_components.p, {
      children: ["このセクションでは、多少の偏りは避けられませんが、Solid のソリューションが他のライブラリと比較してどのような位置にあるかを理解することが重要だと思っています。これはパフォーマンスの話ではありません。パフォーマンスについての決定的な情報は、", jsx(_components.a, {
        href: "https://github.com/krausest/js-framework-benchmark",
        children: "JS Framework Benchmark"
      }), " をご覧ください。"]
    }), "\n", jsxs(_components.h2, {
      id: "react",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#react",
        children: "#"
      }), "React"]
    }), "\n", jsx(_components.p, {
      children: "React は Solid に大きな影響を与えました。React の単方向フローや、Hooks API における読み取りと書き込みの明示的な分離は、Solid の API に影響を与えました。フレームワークではなく、単なる「レンダリングライブラリ」であるという目的以上のものです。Solid は、アプリケーション開発におけるデータ管理のアプローチ方法について強い意見を持っていますが、その実行を制約しようとはしません。"
    }), "\n", jsx(_components.p, {
      children: "しかし、Solid は React の設計思想に沿うものであると同時に、根本的に異なる仕組みを持っています。React は仮想 DOM を使用し、Solid は使用しません。React の抽象化はトップダウンのコンポーネント分割で、レンダリングメソッドが繰り返し呼び出され、差分が発生します。一方 Solid は、各テンプレートを一度だけ全体的にレンダリングし、リアクティブグラフを構築した後、細かな変更に関連する命令を実行します。"
    }), "\n", jsxs(_components.h4, {
      id: "移行のためのアドバイス",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#移行のためのアドバイス",
        children: "#"
      }), "移行のためのアドバイス:"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid の更新モデルは、React や、React + MobX とは全く異なります。関数コンポーネントを ", jsx(_components.code, {
        children: "render"
      }), " 関数と考えるのではなく、", jsx(_components.code, {
        children: "constructor"
      }), " と考えてください。"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid では、プロパティとストアは", jsx(_components.a, {
        href: "https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy",
        children: "プロキシ・オブジェクト"
      }), "であり、追跡とリアクティブの更新のためにプロパティアクセスに依存しています。分割代入や初期のプロパティアクセスにより、これらのプロパティのリアクティビティが失われたり、誤ったタイミングでトリガーされたりすることがあるので注意が必要です。"]
    }), "\n", jsx(_components.p, {
      children: "Solid のプリミティブにはフックルールのような制限がないので、自由にネストできます。"
    }), "\n", jsx(_components.p, {
      children: "リストの行に明示的なキーがなくても、「キー付き」の動作が可能です。"
    }), "\n", jsxs(_components.p, {
      children: ["React では、入力フィールドが変更されるたびに ", 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: "ネイティブな動作方法"
      }), "ではありません。Solid では、", jsx(_components.code, {
        children: "onInput"
      }), " を使用して値の変更をサブスクライブします。"]
    }), "\n", jsxs(_components.p, {
      children: ["最後に、仮想 DOM が存在しないので、", jsx(_components.code, {
        children: "React.Children"
      }), " や ", jsx(_components.code, {
        children: "React.cloneElement"
      }), " のような仮想 DOM の命令的 API は Solid にはありません。DOM 要素を直接作成したり変更したりするのではなく、宣言的に意図を表現しましょう。"]
    }), "\n", jsxs(_components.h2, {
      id: "vue",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#vue",
        children: "#"
      }), "Vue"]
    }), "\n", jsx(_components.p, {
      children: "Solid は設計面では Vue の影響を特に受けていませんが、アプローチとしては同等です。どちらもリアクティブなシステムでプロキシを使用し、読み取りベースの自動追跡を行っています。しかし、似ているのはそこまでです。Vue の細かい依存関係の検出は、より細かい仮想 DOM とコンポーネントシステムに供給されるだけですが、Solid は DOM を直接更新することでその粒度を維持しています。"
    }), "\n", jsx(_components.p, {
      children: "Vue は簡単さを重視し、Solid は透明性を重視しています。Vue 3 での Vue の新しい方向性は、Solid のアプローチとより一致しています。これらのライブラリが今後どのように進化していくかによって、時間が経てばもっと一致するかもしれません。"
    }), "\n", jsxs(_components.h4, {
      id: "移行のためのアドバイス-1",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#移行のためのアドバイス-1",
        children: "#"
      }), "移行のためのアドバイス:"]
    }), "\n", jsxs(_components.p, {
      children: ["もう 1 つの最新リアクティブライブラリである Vue 3 からの移行は、なじみ深いものになるでしょう。Solid のコンポーネントは、Vue の ", jsx(_components.code, {
        children: "setup"
      }), " 関数の最後にテンプレートをタグ付けするのとよく似ています。状態の派生を計算でオーバーラッピングすることに注意して、関数を試してみてください。リアクティビティが広く行き渡っています。Solid のプロキシは意図的に読み取り専用となっています。試す前にこきおろすのはやめましょう。"]
    }), "\n", jsxs(_components.h2, {
      id: "svelte",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#svelte",
        children: "#"
      }), "Svelte"]
    }), "\n", jsx(_components.p, {
      children: "Svelte は、Solid もある程度採用しているプリコンパイルされた消えるフレームワークの先駆者です。どちらのライブラリも真にリアクティブであり、非常に小さな実行コードバンドルを生成できますが、小さなデモでは Svelte が勝っています。Solid は、宣言の際により多くの明示性を要求し、コンパイラによる暗黙の分析への依存度を下げていますが、これが Solid の優れたパフォーマンスの一因となっています。また、Solid はランタイムに多くの情報を保持しているため、大規模なアプリケーションでの拡張性に優れています。Solid の RealWorld デモの実装は、Svelte の実装よりも 25％ 小さいです。"
    }), "\n", jsx(_components.p, {
      children: "どちらのライブラリも開発者がより少ないコードを書けるようにすることを目的としていますが、そのアプローチは全く異なります。Svelte 3 は、局所的な変化への対応を容易にするための最適化に焦点を当てており、プレーンなオブジェクトインタラクションと双方向バインディングに重点を置いています。対して Solid は、CQRS とイミュータブルなインターフェイスを意図的に採用することで、データフローに焦点を当てています。Svelte のテンプレート構文は間違いなく簡潔ですが、Solid では機能的なテンプレート構成により、多くの場合、Svelte よりも少ないコードで開発を行うことができます。"
    }), "\n", jsxs(_components.h4, {
      id: "移行のためのアドバイス-2",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#移行のためのアドバイス-2",
        children: "#"
      }), "移行のためのアドバイス:"]
    }), "\n", jsx(_components.p, {
      children: "開発者体験は、いくつかの点で類似していますが、それは非常に異なる経験です。Solid のコンポーネントは安価なので、数を増やすことをためらう必要はありません。"
    }), "\n", jsxs(_components.h2, {
      id: "knockoutjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#knockoutjs",
        children: "#"
      }), "Knockout.js"]
    }), "\n", jsx(_components.p, {
      children: "このライブラリは、Knockout のおかげで成り立っています。細かい依存関係の検出のために、Knockout のモデルを近代化することが、このプロジェクトの動機でした。Knockout は 2010 年にリリースされ、Microsoft Explorer を IE6 までサポートしていますが、Solid の多くは IE をまったくサポートしていません。"
    }), "\n", jsx(_components.p, {
      children: "Knockout のバインディングは、ランタイムに読み込まれる HTML の文字列に過ぎません。これらのバインディングは、クローンのコンテキスト（$parent など）に依存します。一方、Solid はテンプレートに JSX やタグ付きテンプレートリテラルを使用し、JavaScript の API を選択しています。"
    }), "\n", jsx(_components.p, {
      children: "最大の違いは、Solid が変更をバッチ処理することで同期性を確保しているのに対し、Knockout は deferUpdates で遅延マイクロタスクキューを使用していることでしょう。"
    }), "\n", jsxs(_components.h4, {
      id: "移行のためのアドバイス-3",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#移行のためのアドバイス-3",
        children: "#"
      }), "移行のためのアドバイス:"]
    }), "\n", jsx(_components.p, {
      children: "Knockout に慣れている人には、Solid のプリミティブは奇妙に見えるかもしれません。読み取り/書き込みの分離は意図的なもので、ただ人生を困難にするためではありません。State/Action (Flux) メンタルモデルの採用を検討してください。これらのライブラリは似ているように見えますが、異なるベストプラクティスを推進しています。"
    }), "\n", jsxs(_components.h2, {
      id: "lit--lighterhtml",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#lit--lighterhtml",
        children: "#"
      }), "Lit & LighterHTML"]
    }), "\n", jsx(_components.p, {
      children: "これらのライブラリは非常に似ており、Solid にも影響を与えています。ほとんどの場合、Solid のコンパイルされたコードは、DOM の初期レンダリングを実行するために非常に似た方法を使用しています。テンプレート要素を複製したりコメントプレースホルダーの使用は、Solid とこれらのライブラリに共通するものです。"
    }), "\n", jsx(_components.p, {
      children: "最大の違いは、これらのライブラリが仮想 DOM を使用していない一方で、レンダリングをトップダウンで同じように扱い、正常な状態を維持するためコンポーネント分割を必要とすることです。これに対して Solid は、きめ細かなリアクティブグラフを使って、変更された部分だけを更新し、最初のレンダリングでのみこの手法を共有しています。このアプローチは、ネイティブ DOM ならではの初期速度を利用しており、更新に対しても最もパフォーマンスの高いアプローチとなっています。"
    }), "\n", jsxs(_components.h4, {
      id: "移行のためのアドバイス-4",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#移行のためのアドバイス-4",
        children: "#"
      }), "移行のためのアドバイス:"]
    }), "\n", jsxs(_components.p, {
      children: ["これらのライブラリはかなりミニマムで、その上に構築するのも簡単です。ただし、", jsx(_components.code, {
        children: "<MyComp/>"
      }), " は単なる HTMLElement（配列や関数）ではないことに注意してください。自分のものは JSX テンプレートの中に入れておくようにしましょう。ほとんどの場合、ホイスティングは機能しますが、これは HTMLElement のファクトリではなく、レンダリングライブラリであると考えるのがベストです。"]
    }), "\n", jsxs(_components.h2, {
      id: "sjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#sjs",
        children: "#"
      }), "S.js"]
    }), "\n", jsx(_components.p, {
      children: "このライブラリは、Solid のリアクティブ設計に最も大きな影響を与えました。Solid は数年前から S.js を内部で使用していましたが、機能セットの違いから別々の道を歩むことになりました。S.js は、これまでで最も効率的なリアクティブライブラリの 1 つです。デジタル回路のように同期したタイムステップですべてをモデル化し、MobX のような複雑なメカニズムを多用することなく一貫性を確保しています。Solid のリアクティビティは、最終的には S と MobX のハイブリッドのようなものです。これにより、多くのリアクティブライブラリ（Knockout、MobX、Vue）よりも高いパフォーマンスが得られる一方で、開発者のメンタルモデルは簡単に保つことができます。最終的には S.js の方がリアクティブライブラリとしての性能は高いのですが、その差は最も過酷な合成ベンチマーク以外ではほとんど気になりません。"
    }), "\n", jsxs(_components.h2, {
      id: "rxjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rxjs",
        children: "#"
      }), "RxJS"]
    }), "\n", jsx(_components.p, {
      children: "RxJS はリアクティブライブラリです。Solid は Observable データという似たようなアイデアを持っていますが、オブザーバーパターンのはるかに異なる応用を使用しています。Signal は Observable の制限された形のようなものですが（次のものだけ）、自動的な依存関係検出のパターンは RxJS の 100 以上の演算子を凌駕しています。Solid もこのようなアプローチを取ることができましたし、実際に初期のバージョンのライブラリには同様の演算子が含まれていましたが、ほとんどの場合、計算で独自の変換ロジックを書く方が簡単です。Observable がコールドスタート、ユニキャスト、プッシュベースであるのに対し、クライアント上の多くの問題はホットスタート、マルチキャストであり、Solid のデフォルトの動作となります。"
    }), "\n", jsxs(_components.h2, {
      id: "その他",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#その他",
        children: "#"
      }), "その他"]
    }), "\n", jsx(_components.p, {
      children: "Angular や他のいくつかの人気のあるライブラリは、この比較では注目に値しません。これらのライブラリを使用した経験がないため、適切な比較ができないのです。一般的に、Solid は大規模なフレームワークとの共通点が少なく、正面から比較することは非常に困難です。"
    })]
  });
}
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=comparison-f3ec8931.js.map
