solidjs-v2

SolidJS 2.0

参照対象：[email protected] および @solidjs/[email protected]。

バージョンを確認する

Solid 2 を指定した単独の質問では、検証済みの参照対象を使用してください。 プロジェクトの編集では、インストール済みの solid-js のバージョン（ロックファイル／パッケージのメタデータ）を確認し、メジャーバージョン 2 にこのスキルを適用してください。移行を求められていない限り、1.x プロジェクトの規約を維持してください。 バージョンが異なる場合は、これらの参照情報よりインストール済みの型定義を優先してください。

Solid v2 のモデルを使用する

• コンポーネントはマウントごとに一度だけ実行されます。 JSX、メモ、エフェクトの計算コールバックは読み取りを追跡します。props は props.name のように保持し、追跡スコープ内で読み取ってください。
• 変化する UI の値はシグナルまたはストアに保持します。 アクセサーは、購読するためにリアクティブな状態を読み取る必要があります。通常の let／Map を関数でラップしても、その代入はリアクティブになりません。描画に使わない管理用データには通常の変数を使用してください。
• JSX コンパイラーが追跡とゲッターを提供します。 <Counter value={count()} /> と書き、子コンポーネントでは props.value を読み取ってください。この式は値であり、追加のコールバックではありません。手動で構築したオプションオブジェクトでは、呼び出し先の型に合ったゲッターまたはアクセサーを使用してください。 値の型に従ってください。シグナル／メモのアクセサーは呼び出し、ストアのフィールドは直接読み取り、リストの描画には配列の値を渡します。JSX は <span>{label()}</span> のような式を追跡します。子にコールバックを指定するのは、For など、型で明示的に要求されているコンポーネントに限ります。keyed={row => row.id} の場合、For は行アクセサー（row()）を渡します。デフォルトの For は生の行（row.name）を渡します。
• 状態は派生させます。 読み取り専用の派生状態には createMemo を使用し、書き込み可能な派生値には createSignal(() => props.initial) を使用してください。セッターとアクションは、ハンドラー、エフェクトの apply コールバック、または onSettled から呼び出してください。
• 書き込みはマイクロタスクでコミットされます。 命令型の呼び出し元で次の行までに状態または DOM を更新する必要がある場合は、flush() を使用してください。
• エフェクトには必須の 2 つのフェーズがあります。 createEffect(compute, apply, options?) は compute 内で追跡し、apply は追跡なしで実行され、クリーンアップまたは undefined を返します。compute のエラーを処理するには、2 番目の引数を { effect, error } に置き換えてください。
• 非同期処理は計算内に記述します。 メモまたは派生ストアから Promise／AsyncIterable を返してください。描画するコンシューマーは Loading 内に配置し、エラーは Errored で処理してください。
• 非同期のクライアント側ミューテーションにはアクションを使用します。 楽観的な書き込み → サーバー処理を yield → 再取得を確認するには yield refresh(source)、またはライブの確認応答を待つには yield until(predicate) を使用してください。楽観的オーバーレイは成功時も失敗時も終了し、永続する状態は確認処理によって設定します。アクションの Promise は呼び出し元で処理してください。スナップショットによって行が置き換わる場合は、表示中の編集内容を別の楽観的状態に保持し、完了するまで最新の確認済み行の上にその編集内容を描画してください。保存中のインジケーターは楽観的フラグを読み取ります。SSR は非同期ソースを消費します。
• ストアではドラフトを使用します。 solid-js から createStore をインポートし、const [state, setState] = createStore(initial) でセッターを取得してください。コールバックの波括弧内で変更し、意図的にルートを置き換える場合に限り値を返してください。
• DOM には @solidjs/web を使用します。 JSX の型と jsxImportSource を使用し、小文字の HTML 属性、class の配列／オブジェクト、コールバック形式の ref を使ってください。

タスクに合ったパターンを選ぶ

以下のリンクから該当するファイルを開き、例と注意事項を含む関連セクションを読んでください。リンクは、プロジェクトの作業ディレクトリではなく、この SKILL.md を基準に解決してください。シンボルを検索する場合は、このスキルのフォルダー内で rg --hidden を使用してください。ワークスペース全体の検索では隠し .agents／.codex フォルダーが除外され、API のドキュメントが存在しないと誤解するおそれがあります。

短い API に関する質問でも、この確認が必要です。複合パターンの場合は、ローカルリンクをたどってください。実装に着手する前に、読み取る状態、その状態を変更するイベント、そしてそのライフタイムを管理するコンポーネント／リクエストを特定してください。選んだパターンでこれらの動作と完了／失敗時の処理を網羅できたら、調査を終えてください。検索結果が空でも、API が存在しない証拠にはなりません。

タスク	参照先
編集可能な props、派生値、サブスクリプション、永続化、DOM のタイミング、診断	リアクティビティ
データの取得／レンダリング、楽観的な保存、進行状況の表示、再取得またはライブエコーによる書き込みの確認	非同期処理とアクション
レコードの更新、サーバーデータのマージ、行の選択、ネストされたライブビューの公開、snapshot/deep	ストア
リスト／分岐のレンダリング、コンポーネントの読み込み、SSR ストリーミング、属性、イベント、refs	制御フローと DOM
インポート、TypeScript、コンテキスト、テストのセットアップ	TypeScript のセットアップ
キャッシュ優先のクエリ、変化するソケットサブスクリプション、選択された行、共有／リクエストごとの状態	パターン
createX と useX の命名	規約
サーバー関数、リクエストローカル／拡張、トランスポート、バリデーション、シングルフライト、JavaScript 不使用のフォーム	サーバー関数
実験的なサーバーコンポーネントとクライアントスロット	サーバーコンポーネント

結果を検証する

正規の例を応用し、インポート、型、所有関係、キャンセル処理を維持してください。要求された実装に必要なヘルパーも含めてください。使用例でも、提示されているインターフェースを使ってください。実装がタスクの範囲外にある場合は、アプリケーション固有のサービスをパラメーターとして受け取ってください。呼び出し側が示唆する API も含め、API に関する厳密な主張には公開済みのシグネチャを使用してください。契約が不明または未検証の場合は、作り上げずにその旨を明記してください。追加のアサーションも確認し、ソースの条件と例外を維持してください。呼び出し／型の正確な形をコピーしてから、名前とデータを適用してください。実行可能な例は、JSX とインポートを含め、有効な TypeScript でなければなりません。 複数ファイルにまたがる例では、各コンシューマーが使用する共有型をインポートしてください。

型チェックで検証できるのはシグネチャです。順序、クリーンアップ、保留中の状態、ハイドレーションの動作は、実行時アサーションで確認してください。プロジェクトのテスト環境を使い、失敗や破棄も含め、要求された状態遷移をテストしてください。既存のスモークテストが網羅するのは、アサーションで確認している範囲だけです。最後の説明は、実装した動作、実際に実行したチェック、残っている不確実性に限ってください。テストしていない主張には、未検証と明記してください。