createResourceの廃止：非同期処理のネイティブ化
リリース候補版となったSolid 2.0は、非同期操作を根本的に作り直し、リアクティブグラフの第一級市民として統合しました。これによりSolid 1のcreateResourceプリミティブが不要となり、createMemoなどの計算処理が直接Promiseを返せるようになりました。フレームワークは非同期値をネイティブに理解・管理できるようになり、fetchUserのようなデータソースをリアクティブなフローに統合する方法が簡素化されました。
createResourceの削除により、データ取得ロジックが簡素化され、コンポーネントコードが整理されます。Solid 1では開発者がcreateResourceの出力を管理する必要があり、リソース値にアクセスする際にnullやundefinedのチェックが散見されていました。Solid 2ではPromiseを直接返すため、リアクティブグラフがデータの準備状況を管理します。これによりチェックが不要となり、コンポーネントは定義済みの値のみを扱うことが可能になります。
境界（Boundary）プリミティブも新しい非同期モデルに合わせて再設計され、開発者とユーザーの両方の体験を向上させています。SuspenseはLoading境界に置き換わり、初期データがない場合にのみフォールバックを表示します。ErrorBoundaryはErroredとなり、名称変更とともに内部的な再設計が行われました。また、SuspenseListはRevealに変更されました。
この洗練された境界アプローチにより、ユーザー体験が大幅に向上します。Promise消費時にUIをブロックする他のフレームワークとは異なり、Solid 2ではグラフ作成時にPromiseを消費し、値が「読み取られる」場所でのみブロックが発生します。これにより、すべてのリクエスト完了を待つのではなく、個々のデータが準備でき次第、UIが即座に更新されます。isPendingはUIを破棄することなく、後続のデータ取得を追跡します。
劇的にクリーンになった開発者体験
Solid 2.0は、データのミューテーションとエフェクトに関する開発者体験を大幅に洗練させました。新しいミューテーションフローとしてactionプリミティブが導入され、更新のライフサイクルが明確に定義されます。createOptimisticやcreateOptimisticStoreと組み合わせることで、UIの自動ロールバックが可能になります。ローカルでの楽観的更新は一時的なものであり、API呼び出しが失敗した場合にはUIがサーバーの正当な状態に自動的に戻ります。
直接的なミューテーションがデフォルトの動作となるため、ストア管理が簡素化されます。この変更によりproduce関数が不要となり、createMutableは非推奨となりました。開発者はストアのドラフトを直接変更できます。なお、特定のレガシーなユースケースのためにstorePathヘルパーは引き続き利用可能です。
createEffectは大幅にリファクタリングされ、2つの異なる関数に分割されました。1つ目は依存関係を定義する追跡フェーズ（compute）、2つ目は計算された値を受け取って副作用を実行する非追跡フェーズ（apply）です。このアーキテクチャの変更によりonヘルパーが不要となり、deferオプションをエフェクト上で直接設定できるようになりました。
エフェクトのクリーンアップも進化しました。apply関数はクリーンアップロジックを直接返すようになり、リソース管理が効率化されました。onMountはonSettledに置き換わりました。これはスコープ内のすべての非同期操作が解決した後にのみ実行され、同様にクリーンアップ関数を返します。createComputedプリミティブは削除され、その機能はcreateMemoまたは新しい分割されたエフェクトでカバーされます。
JSXの大幅な簡素化
Solid 2.0はJSX構文を大幅に簡素化し、フレームワーク固有の慣用句を削減しました。classList propは完全に削除され、class propで文字列、オブジェクト、配列を直接受け取れるようになりました。これにより、手動での文字列結合や配列操作を必要とせず、より直感的で動的な条件付きスタイリングが可能になります。
属性の処理もネイティブなHTMLに近づきました。以前は明示的な属性やブール値プロパティのバインディングに使用されていたattr:やbool:プレフィックスは不要になりました。この変更により属性宣言が標準化され、一般的なHTML属性に対するSolid固有の構文が削減されました。
on:やonCapture:といったイベントハンドリングのネームスペースは削除されました。イベントはonClickやonInputのような標準的なcamelCaseのpropsを使用して管理されるようになり、従来のWeb開発パターンに準拠しています。また、use:ディレクティブはスタック可能なref callbacksに置き換わり、カスタム要素の動作やライフサイクルフックに対して、より柔軟で構成可能な手法を提供します。
リストレンダリングも簡素化されました。専用のIndexコンポーネントは廃止され、その非キー付きリスト機能は<For keyed={false}>に統合されました。さらに、回数に基づいたレンダリングを効率化する新しいRepeatコンポーネントが導入され、指定した回数だけJSXブロックをレンダリングする宣言的な方法が提供されます。これらの変更やその他の詳細については、Solid 2.0 RC: The Big <Reveal> - SolidJSのブログ記事をご覧ください。
この記事が気に入ったら、毎朝同じようなものをメールで受け取れます。
1日1通 · 2クリックで解除 · サードパーティのトラッキングなし
メタフレームワークを終わらせたコンパイラ
Solid 2には、高性能なOxcプロジェクトを基盤とした新しいRust製コンパイラが組み込まれています。この再設計されたツールチェーンは、フレームワークのビルドパフォーマンスを大幅に向上させます。内部ベンチマークによると、コンパイル速度はSolid 1の従来のJavaScriptベースのコンパイラと比較して20倍から350倍以上高速化しており、開発サイクルの短縮とプロジェクトビルドの効率化に直結します。
アップデートされたViteプラグインには強力な「start mode」が導入され、開発者にすぐに使える完全なアプリケーションビルドを提供します。このモードは、クライアントサイドレンダリングと包括的なサーバーサイドレンダリング（SSR）の両方をサポートしています。サーバー関数などの主要機能がフレームワークのツールに直接統合されているため、個別のパッケージが不要になり、さまざまなデプロイターゲットに向けたプロジェクト設定が効率化されます。
この統合された強力なツールにより、独立したメタフレームワークであるSolidStartは不要となりました。サーバー関数やサービングレイヤーを含むSolidStartの確立された規約は、Solidコアまたはそのコンパイラプラグインに直接吸収されました。この戦略的な動きにより開発エコシステムが統合され、SolidStartの実証済みのアーキテクチャパターンとフルスタック機能がメインのフレームワークに直接組み込まれることで、全体的な開発者体験が簡素化されます。
よくある質問
Solid 2.0における最大の変更点は何ですか？
最大の革新は、非同期操作をリアクティブグラフのファーストクラス機能にしたことです。これにより、計算処理が直接Promiseを返せるようになり、createResourceのような特別なプリミティブが不要になりました。
SolidStartは廃止されるのですか？
はい、SolidStartは独立したメタフレームワークとしての提供を終了します。サーバーサイドレンダリングやサーバー関数といった主要機能は、新しい「start mode」を通じて、Solid 2.0のViteプラグインに直接統合されました。
Solid 2ではcreateResourceを使わずにどのようにデータフェッチを行いますか？
createMemoのような計算処理で、直接Promiseを返すことができるようになりました。リアクティブシステムが非同期状態を自動的に認識して処理するため、データフェッチのロジックやコンポーネントのコードが簡素化されます。
Solid 2はビルドが高速化されていますか？
はい、大幅に高速化されています。Solid 2ではRustで記述された新しいコンパイラツールチェーンが導入されており、ベンチマークでは20倍以上、一部のテストでは最大355倍の速度向上が示されています。
Solid 2ではSuspenseの代わりは何になりますか？
Suspense境界はLoadingに置き換わりました。Loadingは初期データ取得時のみフォールバックをレンダリングし、その後の取得については既存のUIをアンマウントすることなくisPendingで追跡可能です。