JavaScript

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

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

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

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

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

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

まずは画像を1枚だけ表示してみましょう。

フォトビューアー

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 {
init() {
const rootElm = document.getElementById('photoViewer');
const frameElm = rootElm.querySelector('.frame');
const image = 'https://fakeimg.pl/250x150/81DAF5';

frameElm.innerHTML = `
<div class ="currenImage">
<img src="${image}" />
`;
}
}

解説

class photoViewer {	photoViewerというクラスを作ります。
init() {	initializeの略名でinitというメソッドを作ります。
const rootElm = document.getElementById('photoViewer');	親要素のid、photoViewerを取得し、変数rootElmに代入します。
const frameElm = rootElm.querySelector('.frame');	そのrootElmを親として、frameクラスが指定されている要素を取得し変数frameElmに代入します。
const image = 'https://fakeimg.pl/250x150/81DAF5';	外部サービス（http::fakeimg.pl/）を使ってダミー画像を取得します。
frameElm.innerHTML = ` <div class ="currenImage"> <img src="${image}" /> `;	テンプレートリテラルを使ってimgとそれを囲むdivを文字列で作成します。それをframeElmのinnerHTMLに代入します。
new photoViewer().init();	newでインスタンス化したオブジェクトに対して、そのあとすぐにinitメソッドを呼び出しています。このような短縮させた書き方もできます。

お疲れ様でした。今回はここまでにしましょう。ゆっくりマイペースで継続しましょう。

わからないことはプロフェッショナルから学ぶのが一番 | The best way to learn what you don't know is from professionals.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー