フレームワークを整える
中級jQuery を整える。
＝ $() でつかんでメソッドをつなげる——jQuery の書き味を手を動かして確かめる
jQuery が初めての方は、先に そもそも jQuery とは・どんな場面で使うか をどうぞ。
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここに結果が表示されます。
コンソール
console.log の出力とエラーがここに出ます。
無限ループなど重い処理を書くと、プレビューが固まることがあります。「■ 停止」でプレビューを作り直せます。
そもそも jQuery とは
HTML の要素を探して動かす作業を、短く書ける JavaScript ライブラリ。
jQuery は、Web ページの要素を見つけて、変えて、動かす作業を短いコードで書けるようにした JavaScript ライブラリです。たとえば「このボタンを押したら、この文字を書き換える」といった操作が、数行で書けます。John Resig 氏が作り、2006年に公開されました。
かつてはブラウザごとの動作の違いを吸収してくれる道具として、Web 制作の定番でした。現在のブラウザには同じことができる標準の機能が増えたので、新規の開発で選ばれる機会は減っています。ただし既存のサイトや WordPress のテーマ、古い業務システムには今も多く残っています。
どこで・どんな場面で使うか
-
WordPress のテーマやプラグイン
WordPress は jQuery を同梱しており、既存のテーマやプラグインが jQuery 前提で動いていることがあります。
-
保守中の古い業務システム
何年も前に作られた社内システムの画面は、jQuery で書かれていることが珍しくありません。
-
Web 制作の現場の細かい動き
スライダー、アコーディオン、モーダルなど、ページに動きを足す部品に使われています。
-
Bootstrap の古い版など
一部の古い UI 部品は jQuery に依存しています。読むためには知識が要ります。
-
学習・求人の場面
新規より「保守・改修」の求人で名前が出ます。他の道具に移る前の理解にも役立ちます。
なぜ覚えておくと得か
- 既存コードが読める。今ある jQuery のコードを読み、直せる人は現場で重宝されます。
- 今の標準機能との違いが分かる。jQuery が何を肩代わりしていたかが分かると、標準の書き方も理解しやすくなります。
- 新規開発では別の選択肢も。一から作るなら、標準機能や軽い道具で足りるか先に検討すると安心です。
上の練習場でボタンの操作や文字の書き換えを試し、短いコードで動く感覚をつかんでみてください。
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の「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
続けて整える
データの時点：各ページに記載の版（各プロジェクトの公式リリース）
