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

ECMAScript6(ES6,ES2015）の記法にてアプリケーションの作り方。

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

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

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

・画像表示から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 image = this.images[this.currentIndex];
frameElm.innerHTML = `
<div class =”currenImage”>
<img src=”${image}” />
<div>`;
}

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();
}
}

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 image = this.images[this.currentIndex];	this.imagesから、this.currentIndexで取り出し、それを変数imageに代入しています。
frameElm.innerHTML = ` <div class =”currenImage”> <img src=”${image}” /> </div> `; } }	テンプレートリテラルを使ってimgとそれを囲むdivを文字列で作成します。それをframeElmのinnerHTMLに代入します。
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();	インスタンス化の際にビューアー埋め込み先の要素と、画像の配列を渡すします。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。