「jQueryって名前は聞くけど、結局なにができるの？」 「独学で勉強しているけど、実務でどう使うのかイメージが湧かない…」
そんな悩みを持つあなたへ。 今のWeb制作の現場では、jQueryを一から十まで書くことはほとんどありません。「CSSで動きを作り、jQueryでそのスイッチを入れる」、あるいは「便利なプラグイン（部品）を組み込む」のがプロの主流な使い方です。
今回は、実務で最もよく使われるスライダープラグイン「slick.js」を実際に導入しながら、jQueryの基礎を体で覚えていきましょう。
-
完成イメージ：自動で切り替わる「メインビジュアル画像スライダー」
-
身につくスキル：jQueryの導入、クラスの操作（addClass）、外部プラグインの実装
-
所要時間：約60分
Goal：今日作れるようになるもの
まずはゴールを確認しましょう。今回は、Webサイトのトップページによくある「画像スライダー」を、あなたの手で実装します。
これを作れるようになれば、ポートフォリオサイトのメインビジュアルも一気にプロっぽくなりますよ。
Req：準備するもの
作業を始める前に、以下の素材とツールを準備してください。
-
テキストエディタ：VS Code（推奨）
-
ブラウザ：Google Chrome
-
画像素材：スライドさせたい画像を3枚ほど用意（
slide1.jpgなど） -
jQuery本体：今回は手軽な「CDN」を使います（後述）
Step1：jQueryを読み込む
jQueryは、ただコードを書くだけでは動きません。「これからjQueryを使いますよ」という宣言（読み込み）が必要です。
HTMLファイルの </body> タグの直前に、以下のコードを記述してください。
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
講師のアドバイス： この読み込みコードは、必ずあなたが書くJavaScriptファイル（main.jsなど）よりも上に記述してください。順番が逆だと、「jQueryが見つかりません」というエラーになって動きません。
Step2：jQueryの「型」を書く
jQueryを書くときは、必ず以下の「おまじない」から始めます。
$(function() {
// ここに命令を書いていきます
});
これは「HTMLの読み込みが全部終わってから、動き出してね」という意味です。この中に書かないと、画像が表示される前にプログラムが動いてしまい、エラーの原因になります。まずはこの型を指に覚え込ませましょう。
Step3：クラスを付け外しする（addClass）
実務で一番使うのが、この「クラス操作」です。 アニメーションの具体的な動き（色が変わる、ふわっと出るなど）はCSSで作っておき、jQueryはその**きっかけ（スイッチ）**を作るだけに徹します。
例えば、「ボタンを押したら .is-active というクラスをつける」という処理はこう書きます。
// ボタンをクリックしたら...
$("#btn").click(function() {
// 箱にクラス「is-active」をつけたり外したりする
$(".box").toggleClass("is-active");
});
現場の知見： 「jQueryで色やサイズを直接変える（.cssメソッド）」のは、修正が大変になるのであまりおすすめしません。「見た目はCSS、動きの制御はjQuery」と役割分担するのが、メンテナンスしやすいコードを書くコツです。
Step4：実践！slick.jsを組み込む
では、いよいよ本題のスライダー実装です。世界中で使われている定番プラグイン「slick.js」を使ってみましょう。
1. 必要なファイルを読み込む
Step1のjQuery本体の下に、slick用のファイルを読み込みます。
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
2. HTMLを作る
スライドさせたい画像を div で囲みます。
<div class="my-slider">
<div><img src="img/slide1.jpg" alt="スライド1"></div>
<div><img src="img/slide2.jpg" alt="スライド2"></div>
<div><img src="img/slide3.jpg" alt="スライド3"></div>
</div>
3. jQueryで動かす
最後に、JavaScriptファイルに以下のコードを記述します。
$(function() {
$(".my-slider").slick({
autoplay: true, // 自動再生オン
autoplaySpeed: 2000, // 2秒ごとに切り替え
dots: true, // 下にドットナビを表示
});
});
ブラウザを更新してみてください。画像が自動で切り替われば成功です！ 「自分にもできた！」という感覚、掴めましたか？
Check：動かないときはここを確認
「コード通り書いたのに動かない…」 焦らなくて大丈夫です。プロでもよくあります。そんなときは、ブラウザの**「デベロッパーツール（検証）」**を確認しましょう。
-
画面上で右クリック → 「検証」 を選択
-
「Console（コンソール）」 タブを見る
赤文字でエラーが出ていませんか？
-
$ is not defined：jQuery本体が読み込めていません。Step1のコードが正しいか、読み込む順番が間違っていないか確認してください。
-
slick is not a function：slickのJSファイルが読み込めていません。CDNのURLが正しいか見直しましょう。
Next：次のレベルへ進もう
おめでとうございます！これで「jQueryを使ってリッチなWebサイトを作る」第一歩を踏み出しました。
今回は「プラグインの使い方」を学びましたが、次は「スクロールに合わせてふわっと表示させる」ような、演出系のアニメーションにも挑戦してみましょう。
-
Level 2：[スムーススクロールと上に戻るボタンを実装する]
