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 frameElm = this.rootElm.querySelector(‘.frame’);
const image = this.images[this.currentIndex];

frameElm.innerHTML = `
<div class =”currenImage”>
<img src=”${image}” />
`;
}
} // class 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; this.currentIndex = 0; }	コンストラクタに2つの引数を作りました。ビューアーを表示する要素を示すrootElmと、表示する画像の配列のimagesを受け取れるように。これれらをインスタンス変数としておきます。this.currentIndex = 0で現在何番目の画像が表示されているかの見出しです。初期値を0と代入しておきます。
init() {	initメソッドを作成していきます。
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}” /> `; } } // class photoViewer	テンプレートリテラルを使ってimgとそれを囲むdivを文字列で作成します。それをframeElmのinnerHTMLに代入します。
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();	インスタンス化の際にビューアー埋め込み先の要素と、画像の配列を渡すします。

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