クラス化の方法（コンストラクター）

コンストラクター関数...新しくオブジェクトを作成するための雛形となる関数

```javascript

//function A() {
//    this.prop = 0;
//}

 const obj = new A();

 ※newで作成したオブジェクトを「インスタンス or インスタンスオブジェクト」という →  const obj
 ※newでオブジェクトを作成することを「インスタンス化」という → new A();


  //雛形
    //関数とコンストラクター関数の分けるポイントしてコンストラクターはPer ..と大文字
    function Person(name,age) { 
    this.name = name;  //格納したいプロパティー
    this.age = age;  //格納したいプロパティー
}









  //具体例
    // DOM グローバル変数として取得
const target = document.getElementById( 'target' );  //写真を入れるための変数取得
const start_btn = document.getElementById( 'start_btn' );  //startボタンのId=start_btnを取得する
const main = document.getElementById('main'); //idのmainタグを取得
const slot = document.getElementById('slot').firstElementChild;  //idのslotタグを取得 slotの下の子要素imgを取得する
const stop_btn = document.getElementById( 'stop_btn');  //stopボタンのId=stop_btnを取得する
const slot_count = document.getElementById( 'slot_count');  //回した回数を表示するためのIDを取得している
const travel_title = document.querySelector('.footer-title').firstElementChild; //配列ではなく１つで取得できる。した子要素を取得する

//クラス化
class ImgSlot {
  constructor(img_list) {


    //メンバ変数・・・クラスの中で使う変数①〜⑥
    const _this = this; //①自分自身を指す  
    this.img_list = img_list; //②
    this.count = 0; //③あなたがルーレットをまわした回数は0回です。の「０回」を取得するために作成
    this.num = -1; //④グローバル関数
    this.img_max_count = img_list.length - 1; //⑤
    this.timer_id = 0;  //⑥識別の番号


     //関数①〜⑤
    // 無名関数で回す クリックした場合 
    //①スタートボタン
    start_btn.addEventListener( 'click', (e) => { //ボタン(タグ id=bt)をクリックした後の動きを書く・・
      // console.log(e); //引数よう
      start_btn.disabled = true;  //disabledはstartボタンを押したと同時にstartボタンをクリックしても１が増えないようにする属性
      stop_btn.disabled = false; 
      this.count++;  //1ずつ足すため文字列
      slot_count.innerText = this.count;  //slot_countに0回を入れるために作成
      main.classList.add('hidden');  //mainタグにhiddenのcssを入れfukuoka.jpgを隠す
      slot.classList.remove('hidden'); //slotで取得した上のfukuoka.jpgを写真が表示されている状態にする　上のhidden→removeで元の状態に戻す //下記から関数の実行のため、名前は重要！                                    
      this.timer_id = setInterval(() => { //識別の番号
        _this.orderImg();
        // randomImg(travelList);  //写真がランダムになるように関数を 
      }, 500);  //1秒ごとに写真を変える
      // console.log(timer_id);
    });

    //②　ストップボタン
    stop_btn.addEventListener("click", async  () => {
      stop_btn.disabled = true; 
      // console.log('stop!');
      await this.stop1();
      await this.stop2();
      this.stop3();
    });
  }
    
  //下記がメソッド〜〜〜〜 
  // 関数を入れる
  //③ランダム関数
  randomImg(){
    const rand = Math.floor(Math.random() * this.img_list.length);  // ランダムに選ばれたイラスト画像を変数randに入れる。
    console.log(rand);  //2,3配列は取れている
    // console.log(travelList[rand].image);  
    slot.setAttribute('src', this.img_list[rand].image);  //指定した要素上に新しい属性を追加、または既存の属性の値を変更.element.setAttribute(name(属性の名前を文字列）, value（属性に設定したい値）);
    travel_title.innerText = this.img_list[rand].title;  //travel_titleの要素を取得して、取得した要素にランダム関数を入れる
  }

  // ④順番に画像が遷移するように
  orderImg() {  //orderImgに格納
    if (this.num >= this.img_max_count) {  //もし、travelListより多くなったら、０にする
      this.num = 0;
    } else {
      this.num++; //他は1枚ずつプラスする。
    }
    slot.setAttribute('src', this.img_list[this.num].image);  //random_listを空にする
    travel_title.innerText = this.img_list[this.num].title;  //travel_titleの要素を取得して、取得した要素にランダム関数を入れる
  };


  //⑤　プロミス
  stop1() {
    const _this = this;
    // ストップし、setInterval300で再始動、２秒後停止して、setInterval700で再始動
    return new Promise((resolve) => {
      console.log('func1');
      clearInterval(this.timer_id);
       // 300で再始動
       this.timer_id = setInterval( () => {
        _this.orderImg();
      }, 300);
      // ２秒後、700で再始動
      setTimeout(function () {
        clearInterval(this.timer_id);
        this.timer_id = setInterval( () => {
          _this.orderImg();  //1枚ずつスライドする
        }, 700);
        resolve();
      }, 1000);
    })
  }
  
  
  stop2(){
    return new Promise((resolve) => {
      console.log('func2');
      // ３秒後、停止
      setTimeout( () => {
        clearInterval(this.timer_id);
        resolve();
      }, 2000);
    })
  }
  
  
  stop3(){
    const _this = this;
    console.log('func3');
    setTimeout(() => {
      _this.randomImg(this.img_list);
      start_btn.disabled = false;
    }, 700);
  }
}


//クラス外①〜②　


//時間設定①
// 時間設定 start
// https://www.ipentec.com/document/javascript-get-current-datetime#:~:text=JavaScript%E3%81%A7%E7%8F%BE%E5%9C%A8%E3%81%AE%E6%99%82%E5%88%BB%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AF,%E8%A6%81%E7%B4%A0%E3%82%92%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82
let now = new Date();
function LoadProc() {
  let target = document.getElementById("DateTimeDisp");
  let Year = now.getFullYear();
  let Month = now.getMonth()+1;
  let Date = now.getDate();
  let Hour = now.getHours();
  let Min = now.getMinutes();
  let Sec = now.getSeconds();
  target.innerHTML = Year + "年" + Month + "月" + Date + "日" + Hour + ":" + Min + ":" + Sec;
}
// 時間設定 end


//② 配列
// [],{}配列とオブジェクトの中に囲まれているので、取り出し方に注意する。
// 題材リスト
const travelList = [
  {
    title: "福岡(中洲)",
    image: "travelImg/fukuoka.jpg"
  },
  {
    title: "北海道(美瑛の畑)",
    image: "travelImg/hokkai.jpg" 
  },
  {
    title: "出雲（稲佐の浜)",
    image: "travelImg/izumo.jpg" 
  },
  {
    title: "熊本（熊本城）",
    image: "travelImg/kumamoto.jpg" 
  },
  {
    title: "和歌山（友ケ島）",
    image: "travelImg/wakayama.jpg" 
  }
]


//クラスの実行！！
const img_slot = new ImgSlot(travelList);



```