ECMAScript6(ES6,ES2015）の書き方でアプリケーションを作る➃

ここで作ろうとしているアプリケーションは次のようなものです。

・複数の画像登録ができる仕組みのもので画像を1枚ずつ表示させることができる。

・「前」「次」ボタンで前後の画像に移動できる。

・画像表示から4秒経過すると自動で次の画像になる。

・登録された最後の画像にまで行くと、その次は最初に戻る。

画像表示から4秒経過すると自動で次の画像になる。
登録された最後の画像にまで行くと、その次は最初に戻る。

フォトビューアー

HTML

<h3>フォトビューアー</h3>
<div id=”photoViewer”>
<div class=”frame”></div>
<div class=”actions”>
<button class=”prevButton”>前</button>
<button class=”nextButton”>次</button>
</div>
</div><!–photoViewer–>

JavaScript

class photoViewer {
constructor(rootElm, images){
this.rootElm = rootElm;
this.images = images;
this.currentIndex = 0;
}

init(){
const nextButtonElm = this.rootElm.querySelector(‘.nextButton’);
nextButtonElm.addEventListener(‘click’,() =>{
this.next();
});
const prevButtonElm = this.rootElm.querySelector(‘.prevButton’);
prevButtonElm.addEventListener(‘click’, () =>{
this.prev();
});
this.updatePhoto();
}

updatePhoto() {
const frameElm = this.rootElm.querySelector(‘.frame’);
const imageIndex = this.currentIndex +1;
const image = this.images[this.currentIndex];

frameElm.innerHTML = `
<div>
<p>${imageIndex}枚目　4秒後に次へ</p>
<img src=”${this.images[this.currentIndex]}” />
</div>
`;
this.startTimer();
} //updatePhoto

startTimer(){
if(this.timerKey){
clearTimeout(this.timerKey);
}

this.timerKey = setTimeout(() => {
this.next();
}, 4000);
} //startTimer

next(){
const lastIndex = this.images.length -1;
if(lastIndex === this.currentIndex){
this.currentIndex = 0;
}else {
this.currentIndex++
}
this.updatePhoto();
}

prev(){
const lastIndex = this.images.length -1;
if(this.currentIndex === 0){
this.currentIndex = lastIndex;
}else {
this.currentIndex–;
}
this.updatePhoto();
}
} // photoViewer

const images = [
‘https://fakeimg.pl/250×150/81DAF5’,
‘https://fakeimg.pl/250×150/F781F3’,
‘https://fakeimg.pl/250×150/81F7D8’
]
new photoViewer(document.getElementById(‘photoViewer’),images).init();

解説

class photoViewer {	photoViewerというクラスを作ります。
constructor(rootElm, images){ this.rootElm = rootElm; this.images = images;	コンストラクタに2つの引数を作りました。ビューアーを表示する要素を示すrootElmと、表示する画像の配列のimagesを受け取れるように。これれらをインスタンス変数としておきます。
this.currentIndex = 0; }	現在何番目の画像が表示されているかの見出しです。初期値を0と代入しておきます。
init() {	initメソッドを作成していきます。
const nextButtonElm = this.rootElm.querySelector(‘.nextButton’);	「次」ボタン処理。nextButtonクラス要素をthis.rootElm内の要素から取得し、変数nextButtonElmに代入しています。
nextButtonElm.addEventListener(‘click’,() =>{	クリックイベントを仕掛け、イベントハンドラはアロー関数で作成しています。
this.next(); });	実装は後に書いているnextメソッドを呼び出しています。
const prevButtonElm = this.rootElm.querySelector(‘.prevButton’);	「前」ボタン処理。prevButtonクラス要素をthis.rootElm内の要素から取得し、変数prevButtonElmに代入しています。
prevButtonElm.addEventListener(‘click’, () =>{	クリックイベントを仕掛け、イベントハンドラはアロー関数で作成しています。
this.prev(); });	実装は後に書いているprevメソッドを呼び出しています。
this.updatePhoto(); }	初期画面のためにupdatePhotoメソッドを呼び出してinitメソッドを終わりにしています。
updatePhoto() {	前章でinitメソッドに入っていた中身をupdatePhotoメソッドを作成して全ての処理を移しています。
const frameElm = this.rootElm.querySelector(‘.frame’);	インスタンス変数であるthis.rootElmの値を利用してflameクラスを取得し、それを変数frameElmに代入しています。
const imageIndex = this.currentIndex +1;	配列のインデクスをそのまま表示すると0から始まってしまうので、1を足しています。
frameElm.innerHTML = ` <div> <p>${imageIndex}枚目　4秒後に次へ</p> <img src=”${this.images[this.currentIndex]}” /> </div> `; this.startTimer(); }	テンプレートリテラルを使ってimgとそれを囲むdivを文字列で作成します。それをframeElmのinnerHTMLに代入します。そして画像表示の責務があるstartTimerメソッドを最後に呼びます。
startTimer(){	一定時間後に処理を繰り返すstartTimerメソッドを作ります。
if(this.timerKey){ clearTimeout(this.timerKey); }	timeoutID（ここではthis.timerkey)をclearTimeoutに指定することで、動作予定のsetTimeoutを止めることができます。
this.timerKey = setTimeout(() => { this.next(); }, 4000); } //startTimer	setTimeout関数を使い、一定時間後に動かしたい処理の入っている関数と動作の間隔を記述します。それをtimeoutIDとしてインスタンス変数this.timerkeyとします。setTimeout関数は、一定時間後に処理を実行し、繰り返さずに1回だけ実行する機能です。
next(){ const lastIndex = this.images.length -1;	nextメソッドを作ります。配列にある画像の最後、それを変数lastIndexに代入しています。
if(lastIndex === this.currentIndex){ this.currentIndex = 0;	もし、currentIndexが画像の最後のインデクスだったら、0に変更する。
}else { this.currentIndex++ } this.updatePhoto(); }	最後のインデクスでなければ、画像を進めることができ、これをupdatePhotoメソッドに表示する。
prev(){ const lastIndex = this.images.length -1;	prevメソッドを作ります。配列にある画像の最後、それを変数lastIndexに代入しています。
if(this.currentIndex === 0){ this.currentIndex = lastIndex;	もし、currentIndexが0だったら、画像の最後のインデクスにする。
}else { this.currentIndex–; } this.updatePhoto(); } }	もし、currentIndexが0でなければ、画像を前に戻すことができ、これをupdatePhotoメソッドに表示する。
const images = [ ‘https://fakeimg.pl/250×150/81DAF5’, ‘https://fakeimg.pl/250×150/F781F3’, ‘https://fakeimg.pl/250×150/81F7D8’ ]	画像の配列を渡します。
new photoViewer(document.getElementById(‘photoViewer’),images).init();	インスタンス化の際にビューアー埋め込み先の要素と、画像の配列を渡すします。

レベルアップにプロからの学びを。