【Javascript】クラスを使ってフォトビューワー作ったのでメモ

2022/11/06

ES6から登場したクラスですが、もともとJavaやC#を触ってきた身からすると非常にありがたいです。Javascript版クラスをざっと覚えるためにフォトビューワーを作ってみました。

こんな感じに画像をクリックすると切り替わる（最後まで行ったら最初に戻る）という単純なやつです。

まずはHTML。VSCodeから自動生成されたものにちょっと加えただけです。＜div id="viewer"＞＜/div＞に画像が表示されます。

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="viewer"></div>
    <script src="main.js"></script>
</body>
</html>

次にJavascript側（main.js）です。

class ImageView{
    constructor(images){
        this.images = images;
        this.index = 0;
    }

    init(){
        this.update();
        const viewer = document.getElementById('viewer');
        viewer.addEventListener('click', ()=>{
            this.next();
        });
    }

    next(){
        this.index++;
        if(this.index>=this.images.length) this.index=0;
        console.log(this.index);
        this.update();
    }

    update(){
        const viewer = document.getElementById('viewer');
        const image = this.images[this.index];
        viewer.innerHTML = `<div class="currentImage"><image height='350' src=${image} /></div>`;
    }
}

const images = ['im01.jpg', 'im02.jpg', 'im03.jpg'];
new ImageView(images).init();

- HTML/JavaScript