JavaScriptスライダーの作り方 - 初心者が1時間で実装できる基本から応用まで

こんにちは、とまだです。

JavaScriptでスライダーを作ろうとして、「コードが長すぎて何をしているのかわからない」「ライブラリの使い方が複雑すぎる」と悩んでいませんか？

実は私も最初、スライダー実装で3日間も悩みました。プログラミングスクールで教えていた時も、多くの受講生が「スライダーがうまく動かない」と相談してきたんです。

でも大丈夫です。今回は、JavaScriptスライダーの仕組みを「紙芝居」に例えながら、誰でも1時間で基本的なスライダーが作れるように解説していきます。

JavaScriptスライダーとは？紙芝居で理解する基本概念

JavaScriptスライダーって、難しそうに聞こえますよね。

でも実は、子どもの頃に見た紙芝居と同じ仕組みなんです。

紙芝居を思い出してください。

• 複数の絵が重なっています
• 今見ている絵を後ろに送ると次の絵が見えます
• 一定のタイミングで切り替えます

JavaScriptスライダーもまったく同じです。

// スライダーの基本的な考え方
const slides = ["画像1", "画像2", "画像3"];
let currentSlide = 0; // 今見ている画像の番号

ここで、slidesが紙芝居の束、currentSlideが今見ている紙芝居の番号にあたります。

画像を切り替えるときは、この番号を変えるだけ。とてもシンプルな仕組みですよね。

なぜスライダーが必要なのか？3つの大きなメリット

「画像を並べて表示すればいいのに、なぜわざわざスライダーにするの？」

そう思うかもしれません。

実はスライダーには、Webサイトを魅力的にする3つの大きなメリットがあるんです。

1. 限られたスペースを有効活用できる

スマートフォンで見るとき、画面は小さいですよね。

すべての画像を並べると、スクロールが大変です。でもスライダーなら、1つの場所で複数の画像を見せられます。

これは、テレビのチャンネルと同じです。1つの画面で、ボタンを押すだけで違う番組が見られる。効率的ですよね。

2. 注目を集めやすい

動きがあるものに、人は自然と目が行きます。

スライダーで画像が切り替わると、訪問者の視線を引きつけられるんです。

お店の看板で、電光掲示板が目立つのと同じ原理です。

3. ストーリーを伝えやすい

複数の画像を順番に見せることで、物語のように情報を伝えられます。

例えば、商品の使い方を順番に説明したり、イベントの様子を時系列で見せたり。

紙芝居で物語を語るように、スライダーで情報を効果的に伝えられるんです。

スライダーの仕組みを3ステップで理解する

スライダーの動きを、もう少し詳しく見ていきましょう。

基本的な仕組みは、たった3つのステップで成り立っています。

ステップ1：画像を準備する

まず、切り替えたい画像をすべて用意します。

これは、紙芝居の絵を全部用意するのと同じです。HTMLでは、こんな感じで並べます。

<div class="slider">
  <img src="image1.jpg" class="slide active">
  <img src="image2.jpg" class="slide">
  <img src="image3.jpg" class="slide">
</div>

activeクラスがついている画像だけを表示する、というルールにします。

ステップ2：表示・非表示を切り替える

CSSで、activeクラスがない画像は隠します。

.slide {
  display: none; /* 隠す */
}
.slide.active {
  display: block; /* 表示 */
}

これで、1枚だけが見える状態になりました。

ステップ3：JavaScriptで切り替える

あとは、JavaScriptでactiveクラスを付け替えるだけです。

今の画像からactiveを外して、次の画像にactiveをつける。これを繰り返せば、スライダーの完成です。

初心者でも30分で作れる！シンプルなスライダー実装

では、実際に動くスライダーを作ってみましょう。

難しく考える必要はありません。たった20行程度のコードで、基本的なスライダーが作れます。

HTML構造（土台を作る）

<div class="slider-container">
  <div class="slider">
    <img src="image1.jpg" class="slide active">
    <img src="image2.jpg" class="slide">
    <img src="image3.jpg" class="slide">
  </div>
  <button onclick="nextSlide()">次へ</button>
</div>

スライダーの箱（container）の中に、画像を入れて、ボタンを置くだけです。

CSS（見た目を整える）

.slider-container {
  width: 500px;
  height: 300px;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
}

.slide.active {
  opacity: 1;
}

opacity（透明度）を使って、ふわっと切り替わる効果をつけました。

JavaScript（動きをつける）

let currentSlide = 0;
const slides = document.querySelectorAll('.slide');

function nextSlide() {
  // 今の画像を非表示に
  slides[currentSlide].classList.remove('active');
  
  // 次の画像番号を計算
  currentSlide = (currentSlide + 1) % slides.length;
  
  // 次の画像を表示
  slides[currentSlide].classList.add('active');
}

このコードのポイントは、%（余りを求める演算子）を使っているところです。

例えば、3枚の画像があるとき：

• 0番目 → 1番目
• 1番目 → 2番目
• 2番目 → 0番目（最初に戻る）

という動きを、1行で実現できるんです。

よくあるつまずきポイントと解決法

スライダーを作っていると、必ずといっていいほど遭遇する問題があります。

私も最初は同じところでつまずきました。でも、原因がわかれば簡単に解決できます。

1. 画像が重なって全部見えてしまう

原因：CSSのposition: absoluteを忘れている

画像を同じ場所に重ねるには、position: absoluteが必要です。これがないと、画像が縦に並んでしまいます。

紙芝居も、絵を重ねないと意味がないですよね。それと同じです。

2. ボタンを押しても反応しない

原因：JavaScriptが読み込まれる前にHTMLが実行されている

解決法は簡単です。JavaScriptを</body>タグの直前に置くか、こんなコードを追加します。

document.addEventListener('DOMContentLoaded', function() {
  // ここにスライダーのコードを書く
});

これは「HTMLの準備ができたら実行して」という意味です。

3. 最後の画像の次がエラーになる

原因：配列の範囲を超えてアクセスしようとしている

3枚の画像なら、番号は0, 1, 2までです。3番目にアクセスしようとするとエラーになります。

先ほどの%演算子を使えば、自動的に0に戻るので安心です。

自動再生機能を追加する（応用編）

基本的なスライダーができたら、自動で切り替わる機能も追加してみましょう。

これも、実はとても簡単です。

// 3秒ごとに自動で切り替える
setInterval(nextSlide, 3000);

たった1行追加するだけで、自動再生スライダーの完成です。

setIntervalは、指定した時間ごとに処理を繰り返す命令です。3000は3000ミリ秒、つまり3秒という意味です。

テレビのチャンネルが勝手に切り替わるようなものですね。

まとめ：スライダーは怖くない！次のステップへ

JavaScriptスライダーの基本、理解できましたか？

最初は複雑に見えても、仕組みを理解すれば紙芝居のようにシンプルだということがわかったと思います。

今回学んだことをまとめると：

• スライダーは画像を切り替えるだけのシンプルな仕組み
• HTML、CSS、JavaScriptそれぞれに明確な役割がある
• よくあるエラーも原因がわかれば簡単に解決できる

でも、これはあくまで基本中の基本です。

実際のWebサイトでは、スワイプ対応やレスポンシブデザイン、アクセシビリティなど、考慮すべきことがたくさんあります。

もし、もっと本格的にJavaScriptを学びたいと思ったら、Learning Nextのカリキュラムがおすすめです。

DOM操作の基礎から、実践的なアプリケーション作成まで、段階的に学べます。特に、つまずきやすいポイントには豊富な練習問題を用意しているので、確実にスキルが身につきます。

月額2000円程度で、JavaScriptだけでなくReactやTypeScriptまで学び放題。プログラミングスクールよりもずっとお得に、自分のペースで学習できます。

今日作ったスライダーを、もっとカッコよくカスタマイズしてみませんか？

あなたの挑戦を、応援しています！