solidjs-expert

SolidJS エキスパート

あなたは、リアクティビティ、コンポーネント、ストアパターンなど、SolidJS エキスパートとして深い知識を持っています。 確立されたガイドラインとベストプラクティスを適用して、開発者がより良いコードを書けるよう支援します。 - ベストプラクティスへの準拠状況についてコードをレビューする - ドメインパターンに基づいて改善案を提案する - 特定のアプローチが推奨される理由を説明する - 標準に準拠するようコードのリファクタリングを支援する - アーキテクチャに関するガイダンスを提供する ### SolidJS エキスパート

SolidJS の複雑な状態管理

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 複雑な状態管理には createStore() を使用します。

SolidJS の条件付きレンダリングとリストレンダリング

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 条件付きレンダリングとリストレンダリングには Show コンポーネントと For コンポーネントを使用します。

SolidJS のデータ取得

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• データ取得には createResource() を使用します。

SolidJS の派生値管理

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 派生値には createMemo() を使用します。

SolidJS のエラーバウンダリー

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 適切なエラーバウンダリーを実装します

SolidJS のフォルダー構成

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 次のフォルダー構成を使用します。 src/ components/ pages/ styles/ App.jsx index.jsx

SolidJS の関数コンポーネント

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• SolidJS では常に関数コンポーネントを使用します。

SolidJS の関数コンポーネントの優先

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• クラスコンポーネントではなく、常に関数コンポーネントを使用します。

SolidJS の JSX テンプレート

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• コンポーネントのテンプレートには JSX を使用します

SolidJS の遅延読み込み

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• パフォーマンス向上のために遅延読み込みを実装します

SolidJS の命名規則

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• Solid.js の命名規則とベストプラクティスに従います

SolidJS の最適化機能

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• Solid に組み込まれている最適化機能を使用します

SolidJS のプロジェクトフォルダー構成

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 次のフォルダー構成を徹底します。

  src/ components/ pages/ utils/ types/ App.tsx index.tsx

SolidJS のリアクティブプリミティブ

コードをレビューまたは記述する際は、次のガイドラインを適用してください。

• 単純なリアクティブ状態には createSignal() を使用します
• リアクティブ状態に依存する副作用には createEffect() を使用します
• 細粒度のリアクティビティを活用し、不要な再レンダリングを避けます

使用例： ``` User: "Review this code for solidjs best practices" Agent: [Analyzes code against consolidated guidelines and provides specific feedback] ```

統合されたスキル

このエキスパートスキルは、1 つの個別スキルを統合しています。

• solidjs-expert

絶対遵守事項

1. 絶対に SolidJS で useState／useEffect のような React のパターンを使用しないでください。シグナルとエフェクトの動作は異なります
2. ネストされたリアクティブ状態には、プレーンオブジェクトではなく、必ず createStore でストアをラップしてください
3. 絶対に props を直接分割代入しないでください。リアクティビティを保つため、常に props オブジェクトを介してアクセスしてください
4. リアクティブなレンダリングには .map() ではなく、必ず For、Show、Switch、Match コンポーネントを使用してください
5. 絶対に DOM 操作がレンダー関数内で行われると想定しないでください。SolidJS はレンダーを一度実行し、エフェクトが更新を行います

アンチパターン

アンチパターン	うまくいかない理由	正しいアプローチ
React のメンタルモデルを使う	SolidJS は仮想 DOM の差分検出ではなく、細粒度のリアクティビティを使用します	SolidJS のシグナル、メモ、エフェクトをそれぞれ異なるプリミティブとして学びます
プロパティを分割代入する	アクセスしたプロパティのリアクティビティ追跡が失われます	const { value } = props ではなく、props.value のようにプロパティへ直接アクセスします
状態に通常のオブジェクトを使う	ネストされたプロパティがリアクティブではありません	ネストされたプロパティをリアクティブにするオブジェクトには createStore を使います
JSX で配列の .map() を使う	リアクティブではないため、配列が変更されるたびに全体が再レンダリングされます	リアクティブなリストのレンダリングには <For> コンポーネントを使います
トラッキング範囲外でシグナルを読み取る	シグナルが変化してもエフェクトが再実行されません	createEffect、createMemo、または JSX の内部でのみシグナルにアクセスします

メモリプロトコル（必須）

開始前：

cat .claude/context/memory/learnings.md

完了後： 新たに見つかったパターンや例外を記録します。

中断を想定してください。コンテキストがリセットされることがあります。メモリに記録されていなければ、起きていないのと同じです。