jQueryはAIで省力化できる代表格
jQueryは書き方がシンプルながら、イベント管理・DOM操作の組み合わせは複雑になりがちです。AIに「動作の仕様」を伝えるだけで、動くコードがすぐに手に入ります。
プロンプト例（タブUI）
「jQueryを使ったタブ切り替えUIを実装してください。
・クリックしたタブがアクティブになり、対応コンテンツが表示される
・アクティブタブには .is-active クラスを付与
・コンテンツの切り替えは fadeIn/fadeOut（200ms）
・jQuery 3.6 を使用。外部プラグインは使わないでください。
・HTMLマークアップも含めてください。」
よく使うjQuery実装の依頼パターン
- アコーディオン：「クリックで展開・折りたたみするアコーディオン。複数同時展開は不可。slideToggle使用。」
- スムーズスクロール：「アンカーリンクのスムーズスクロール。固定ヘッダー80px分のオフセット付き。」
- スクロールアニメーション：「スクロールで画面内に入った要素に .is-visible を付与するjQueryコード。」
- モーダル：「ボタンクリックで画像モーダルが開閉するjQuery実装。ESCキーでも閉じられるようにする。」
- 入力バリデーション：「フォームの必須チェック・メール形式・電話番号形式のバリデーション（送信前）。」
jQuery導入時のチェックポイント
- プロンプトにjQueryバージョンを明記する（「jQuery 3.6」など）。
- 「プラグインは使わずに実装してください」と指定するとポータブルなコードが得られます。
- $(document).ready() の二重定義・名前空間の競合に注意する。
💡 コツ：「このコードにコメントを日本語でつけてください」と追加依頼すると、コードの理解が深まり次回の自力実装につながります。
