HTML/CSSはある程度書けるようになったけど、「JavaScriptってなんか難しそう……」と感じている方は多いと思います。そんな方にまずおすすめしたいのが jQuery（ジェイクエリー） です。
jQueryを使えば、「ボタンをクリックしたら何かが動く」「スクロールに合わせて要素が現れる」といったよく見るWebの動きを、少ないコードでスッキリ書けるようになります。この記事では導入から基本の書き方、よく使うメソッド、そして実際に手を動かして練習できるサンプルまで、順を追って解説していきます。
jQueryとは何か？
jQueryはJavaScriptのライブラリ（あらかじめ便利な機能をまとめたツール集）です。本来JavaScriptで書くと少し長くなってしまう処理を、jQueryを使うとずっとシンプルに書けるのが最大の特徴です。
たとえば、ある要素を非表示にしたいとき、素のJavaScriptだとこう書きます。
javascript
document.getElementById('box').style.display = 'none';jQueryで書くと、こうなります。
javascript
$('#box').hide();短くてわかりやすいですよね。HTML/CSSをすでに知っている方なら「CSSセレクター」の書き方に近いので、感覚的に理解しやすいのもjQueryのメリットです。
jQueryの導入方法（CDN）
jQueryを使うには、まずHTMLファイルに1行読み込ませる必要があります。一番手軽な方法が CDN（コンテンツデリバリーネットワーク） を使う方法です。ファイルのダウンロードは不要で、以下のコードを貼り付けるだけですぐに使えます。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryの練習</title>
</head>
<body>
<!-- ここにHTMLコンテンツを書く -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>ポイントは、jQueryの読み込みを </body> の直前に置くこと、そして自分で書くJSファイル（ここでは script.js）よりも上に書くことです。jQueryを先に読み込んでおかないと、あとに書いたコードが正しく動きません。
jQueryの基本の書き方
jQueryのコードは、次の形が基本になります。
javascript
$(セレクター).メソッド();$() の中にCSSセレクターを書いて「どの要素を操作するか」を指定し、そのあとに「何をするか」を .メソッド名() で書く、というシンプルな構造です。
また、jQueryのコードは「HTMLが読み込み終わってから実行する」というルールがあるので、基本的に以下のように書きます。
javascript
$(function() {
// ここにjQueryのコードを書く
});これは「ページの読み込みが完了したら中身を実行してね」という意味のおまじないだと思っておけばOKです。
よく使うメソッド一覧
jQueryには便利なメソッドがたくさんありますが、まずは以下のものを覚えておけば多くの場面で対応できます。
| メソッド | 何をするか |
|---|---|
.hide() | 要素を非表示にする |
.show() | 要素を表示する |
.toggle() | 表示・非表示を切り替える |
.addClass() | クラスを追加する |
.removeClass() | クラスを削除する |
.toggleClass() | クラスの追加・削除を切り替える |
.css() | CSSを直接変更する |
.text() | テキストの内容を取得・変更する |
.val() | フォームの入力値を取得・変更する |
.on('click', ...) | クリックイベントを設定する |
.fadeIn() | フェードインで表示する |
.fadeOut() | フェードアウトで非表示にする |
.slideDown() | 下方向にスライドして表示する |
.slideUp() | 上方向にスライドして非表示にする |
実践サンプルで練習しよう
実際にコードを書きながら動かしてみるのが一番の近道です。いくつかサンプルを紹介するので、ぜひ手元で試してみてください。
サンプル① ボタンで要素を表示・非表示
クリックのたびに要素が出たり消えたりするシンプルなトグル動作です。
html
<button id="toggleBtn">表示 / 非表示</button>
<div id="box" style="background: #f0f0f0; padding: 20px; margin-top: 10px;">
ここが表示・非表示になります
</div>javascript
$(function() {
$('#toggleBtn').on('click', function() {
$('#box').toggle();
});
});toggle() は show() と hide() を交互に実行してくれるメソッドです。ボタンを1回押すたびに表示状態が切り替わります。
サンプル② クラスを追加してスタイルを変える
ボタンを押したときに、CSSのクラスを追加・削除してスタイルを変える方法です。直接CSSを書き換えるよりも、クラスで管理するほうが後からメンテナンスしやすくなります。
html
<button id="colorBtn">色を変える</button>
<p id="text">このテキストの色が変わります</p>css
.highlight {
color: #e63946;
font-weight: bold;
}javascript
$(function() {
$('#colorBtn').on('click', function() {
$('#text').toggleClass('highlight');
});
});サンプル③ フェードインで要素をふんわり表示
よくある「スクロールしたら要素がふわっと出てくる」のような表現に使えるフェードインです。
html
<button id="fadeBtn">フェードイン</button>
<div id="fadeBox" style="display:none; background:#d4e09b; padding:20px; margin-top:10px;">
フェードインで登場！
</div>javascript
$(function() {
$('#fadeBtn').on('click', function() {
$('#fadeBox').fadeIn(600); // 600はアニメーションの速度（ミリ秒）
});
});数字の 600 はアニメーションの時間（ミリ秒）です。大きくするとゆっくり、小さくすると速く表示されます。'slow' や 'fast' という文字列でも指定できますよ。
よくあるミスと対処法
初心者がつまずきやすいポイントもセットで確認しておきましょう。
jQueryが動かない場合、まず確認すること
NG例として多いのが、jQueryの読み込みより前に自分のスクリプトを書いてしまうケースです。
html
<!-- NG：自分のスクリプトが先になっている -->
<script src="script.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>html
<!-- OK：jQueryを先に読み込む -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="script.js"></script>また、セレクターの書き間違いも多いミスのひとつです。IDには #、クラスには . を忘れずにつけましょう。
javascript
// NG：#や.が抜けている
$('box').hide();
// OK
$('#box').hide();まとめ
jQueryは「HTMLを操作する」「クリックに反応させる」「アニメーションをつける」といった動きを、初心者でも比較的短いコードで実現できるライブラリです。
今回紹介した内容を振り返ると、まず $(function(){}) の中にコードを書くこと、$(セレクター).メソッド() という基本構造を覚えること、そしてサンプルコードを自分でアレンジしながら動かしてみることが上達の近道です。
最初は「動いた！」という体験を積み重ねていくのがいちばんです。ぜひ今日のサンプルをコピーして、少しずつ書き換えながら試してみてください。
