フレームワークを整える
中級jQuery を整える。
＝ $() でつかんでメソッドをつなげる——jQuery の書き味を手を動かして確かめる
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここに結果が表示されます。
CONSOLE
console.log の出力とエラーがここに出ます。
無限ループなど重い処理を書くと、プレビューが固まることがあります。「■ 停止」でプレビューを作り直せます。
jQuery が向いている場面／向かない場面
自分に合うのはどれ？ 選び方を見る →$()で実DOMを直接操作する、ビルド不要・最速で書き始められるライブラリ。
◎ 向いている場面
- ・既存の素のHTML・jQueryサイトに、少しだけ動きを足したいとき
- ・ビルド環境（npm/バンドラ）を用意せず、<script>タグ1本で使いたいとき
- ・古いブラウザ・レガシーな社内システムを触るとき
- ・学習コストを最小にしたいとき（$()の書き味だけ覚えればよい）
△ 向かない場面
- ・状態管理を伴う大きめのWebアプリ（データとUIの同期を手作業で書くことになる）
- ・仮想DOMのような差分更新の仕組みを使いたいとき
このページについて
ここで動くのは本物のブラウザのエンジンです。jQuery 4.0.0（dist/jquery.min.js）を、サンドボックス化した（allow-scripts のみの）iframe の中で読み込んで実行します。
🌐 ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
このツールについて
$() で要素をつかみ、メソッドを繋げて操作する——jQuery の書き味を、実際に手を動かして確かめられます。
$() で要素をつかみ、メソッドを繋げる——jQuery 4 の書き味を実際に動かして確かめる練習場。slideToggle とイベント委任もサンプルで体験できます。
主な機能
- 4サンプル（Hello World・状態とイベント・一覧描画・アコーディオン）
- [email protected] を cdn.jsdelivr.net から読み込み
- HTML/JS の2タブエディタとプレビュー＋console・停止ボタン
- 送信ゼロ
よくある質問
Q. なぜ今 jQuery を練習するのですか？
A. 保守案件や管理画面など、今も広く使われているためです。$() で要素をつかんでメソッドを繋げる書き味は、素の DOM 操作との違いを理解するのにも役立ちます。
Q. CSS のタブが無いのはなぜですか？
A. このページは HTML と JS の2タブです。スタイルは HTML タブ内の style 要素に書けます。
Q. バージョンは変えられますか？
A. [email protected] に固定しています。挙動の差による混乱を避けるためです。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
