【動画レポート】JavaScriptプログラミング――スライドショーを作ってみよう

この記事では、動画「JavaScript入門 #2 / スライドショーを作ってみよう」をレポートします。

今回の動画は、「JavaScript入門 #1 / 基本的な考え方とプログラミングの方法」に続く第2回ということで、前回学んだことをベースに、Web画面上で実行するスライドショーを作っていきます。

講師は前回に引き続き、株式会社Studio947の狩野祐東さん。今回もコードを一つひとつ解説してくださり、とても分かりやすい内容となっています。

■POINT

・変数と定数の使い分け

変数は、letで始まり、代入した値を書き換えられる。定数は、constで始まり、一度代入すると書き換えられない。そのため、間違って内容を変更してしまうミスも避けられる

・属性値の取得と書き換え

HTMLタグに含まれる各種属性は、値を取得したり書き換えたりすることができる。たとえば<img>タグのsrc属性を書き換えると、表示する画像を切り替えることできる

・document.querySelectorAll()の働き

セレクタに適合する要素をすべて取得する。()内にthumbが入っている場合は、thumbクラス内のすべての要素を取得。また、このときまとめて取得された要素のことをノードリストと呼ぶ

 

【講師プロフィール】
狩野 祐東さん
アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後、会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。主な著書に『確かな力が身につくJavaScript「超」入門』『いちばんよくわかるHTML5&CSS3デザインきちんと入門』『スラスラわかるHTML&CSSのきほん』（SBクリエイティブ）『WordPressデザインレシピ集』『HTML5&CSS3デザインレシピ集』（技術評論社）など。

  大きな画像と小さな画像を表示させる　　　

前回はクラス属性を書き換えてボックスの色を変更しましたが、今回は<img>タグのsrc属性取得・書き換えを行い、小さな画像であるサムネイルをクリックすると大きな画像も同じものに切り替わるといったスライドショーのプログラムを作成していきます。

▲今回作るスライドショーの概要

 

サンプルのソースコードファイルと画像を用意していただいたため、すぐにプログラミングに入ることができます。

画像はJPEG形式の写真が3種類。大きな画像もサムネイルも同じ画像ファイルを使うため、この3種類を切り替えるプログラムを作成します。

テキストエディタでソースファイルを開きます。基本的なHTMLとCSSがすでに記述されています。今回は複雑なCSSを使うことになるので、その辺がすでに記述済みなのは、嬉しいと感じる方も多いのではないでしょうか。

さっそく大きな画像とサムネイル表示のためのクラス定義と、実際に表示するためのタグを記述していきます。

 

▲大きな画像表示のための<div class="bigimg">とサムネイルのための <div class="thumb">要素を定義していく。<div class="bigimg">に含まれるimgタグに後半でid属性を追記する予定とのこと

ブラウザで表示を確認すると、次のような表示になります。出来上がった気持ちになってしまいますが、プログラミングはこれから。

▲画像が表示されたが、まだサムネイルをクリックしても何も起きない。これでHTMLの部分は完成。後はここにJavaScriptでプログラムを追加していく

前回同様、HTMLファイル中に<script>タグを追加していきます。それぞれのサムネイル画像がクリックされたときにclickイベントの処理を記述していきますが、3つのサムネイル表示それぞれに指定するのではなく、JavaScriptの繰り返し機能を組み合わせて記述していきます。

  変数と定数　　　

まずは、要素の一括取得から。

▲今回は、前回登場しなかった定数（const thumbs）を使う

このプログラムでは定数というものを使っています。

const thumbs = document.querySelectorAll('.thumb');

上記プログラムでは、クラス属性thumbの要素を一括取得（右辺）し、定数thumbsに代入（左辺）しているそうです。

なお、この定数を読み出すには、次のように定数名を書くだけでOK。この点は変数と同じですね。

console.log(thumbs);

ちなみに上記はconsole.logに、定数thumbsの値をそのまま出力するもの。では、変数と定数はどう使い分けるのでしょう。

▲変数と定数の違いについて。定数は後から内容を変更せず、あらかじめ代入した値を参照するような目的で使う。書き換えができないので、間違って内容を変更してしまうミスも避けられる

  属性の取得と書き換え　　　

また、右辺の

document.querySelectorAll('.thumb')

は、セレクタに適合する要素すべてを取得しています。

▲document.querySelectorAll('.thumb')の働き。thumbクラス内のすべての要素（それぞれのthumbクラスの要素）を取得している

このとき、まとめて取得された要素のことをノードリスト（NodeList）と呼びます。まとめて取得しても、それぞれにイベントを設定するには、各要素に個別に処理をしなければならないそうです。そのため、この後、繰り返し機能を使います。

たとえば、

for( let item of thumbs ){
   console.log(item);
}

とすることで定数thumbsの要素を順に変数itemに読み出し、これをコンソールに出力できるそうです。

▲コンソールには結果としてすべての要素が出力されるので分かりにくいが、実際はitemに一つひとつ要素が代入され、その都度コンソールへの出力という処理を行っている。これをリストの要素数だけ繰り返している

繰り返しを使って取得したすべての要素に、clickイベントを設定します。

▲取得した要素（<div class="thumb">）にclickイベントを設定する

リスト中にある

element.currentTarget.children[0].src；

のchildren[0]とは、要素のうちの0番目のもの、すなわちCSSで記述した<div class="thumb">～</div>に含まれる0番目（0から数え始める）項目という意味で、<img src="～" alt>の部分になります（今回はimgタグの1つしかないので分かりやすいですね）。そして最後に.srcを付けているのでsrc属性を指しています。

つまり、この段階で、クリックされたサムネイルの要素（elementで抜き出している）のsrc属性が、定数imgに保存されていることになります。

後は、取得した画像を使ってdivクラスbigimgの中のimgタグにあるsrc属性を、定数imgで書き換えます。

ここで、プログラムで操作するために、<div class="bigimg">の中にある<img>に、id属性photoを追加しておきます。

▲プログラムで利用するためにimgタグにid属性photoを追記する

そして、第1回でも使ったdocument.querySelector()を使い、<img src="..." id="photo”>のsrc属性の値を、定数imgで上書きしています。

document.querySelector('photo').src = img

 

▲id属性がphotoになっているimgタグのsrc属性を書き換えることで大きな画像が、クリックされたサムネイルのものと同じになる

これでスライドショーが出来上がりました。

今回も、プログラミングを実際に行い、さらにコンソール出力でプログラムの動作を逐一確認しながら動かし、最後に何をやったのかを解説で振り返るという、とても丁寧かつ理解しやすい構成で、頭の中にスッと入ってきました。スライドショーが実際に出来たときには、プログラムの動作が頭の中に思い浮かび、思わず「なるほど！」と感動した方も多いのではないでしょうか。

まだ動画を見られていない方は、ぜひ「基本的な考え方とプログラミングの方法」からご視聴ください。

▼動画「JavaScript入門 #1 / 基本的な考え方とプログラミングの方法」
https://www.r-staffing.co.jp/engineer/entry/20200925_1
▼動画「JavaScript入門 ♯2 / スライドショーを作ってみよう」
https://www.r-staffing.co.jp/engineer/entry/20201030_1