yochn/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <!-- HTML -->
  <div id="app">

    <div id="list" v-if="listFlag">
      <button @click="getAPIdata()">APIデータの取得</button>

      <!-- cdジャケット写真9個並べる -->
      <ul v-if="appdata" id="appdata">
        <div v-for="n in 9">
          <div :id="img[n-1]" style="text-align: center">
            <img v-bind:src="img[n-1]" width="350px" @click="goDetail(n-1)">
            <iframe height="50" width="350" :src="preview[n-1]" frameborder="0"></iframe>
          </div>
        </div>
      </ul>
    </div>

    <!-- 選択したcdの詳細表示 -->
    <div id="detail" v-if="detailFlag">
      <img v-bind:src="selectedImg" width="500px">
      <ul v-if="trackdata" id="trackdata">
        アーティスト名：{{artist}}<br>
        曲名：{{track}}<br>
        アルバム／シングル名：{{album}}<br>
        アーティストid：{{selectArtistid}}
      </ul>
      <button @click="backList()">戻る</button>
      <button @click="nextList()">次へ</button>
    </div>

    <!-- 選択したcdの類似アーティストのid表示 -->
    <div id="nextArtist" v-if="nextArtistFlag">
      <ul v-if="genredata">
        <div v-for="n in 9">
          アーティストid：{{genreid[n-1]}}
        </div>
      </ul>
      <button @click="nextsong()">cdジャケット表示</button>
    </div>

    <!-- 類似アーティストのトップソング表示 -->
    <div id="nextsong" v-if="nextsongFlag">
      <ul v-if="nextdata" id="nextdata">
        <div v-for="n in 9">
          <div :id="nextimg[n-1]" style="text-align: center">
            <img v-bind:src="nextimg[n-1]" width="350px" @click="gonextDetail(n-1)">
            <iframe height="50" width="350" :src="nextpreview[n-1]" frameborder="0"></iframe>
          </div>
        </div>
      </ul>
      <button @click="backnextList2()">戻る</button>
    </div>

    <!-- 選択した類似アーティストcdの詳細表示 -->
    <div id="nextdetail" v-if="nextdetailFlag">
      <img v-bind:src="selectnextImg" width="500px">
      <ul v-if="nexttrackdata" id="nexttrackdata">
        アーティスト名：{{artist}}<br>
        曲名：{{track}}<br>
        アルバム／シングル名：{{album}}<br>
        アーティストid：{{selectArtistid}}
      </ul>
      <button @click="backnextList()">戻る</button>
    </div>

  </div>

  <!-- JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <script>
    let app = new Vue({
      el: '#app',
      data: function() {
        return {
          appdata: '',
          trackdata: '',
          genredata: '',
          nextdata: [],
          nexttrackdata: '',
          item: '',
          img: [],
          random: [],
          preview: [],
          artist: [],
          selectArtistid: [],
          track: [],
          album: [],
          genreid: [],
          nextimg: [],
          nextpreview: [],
          listFlag: true,
          detailFlag: false,
          nextArtistFlag: false,
          nextsongFlag: false,
          nextdetailFlag: false,
          selectedNum: 0
        }
      },
      methods: {
        //ボタンを押すとAPIでとったデータを表示する
        getAPIdata: function() {
          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          fetch('./list').then(function(res) { // /listというものに対する命令
            return res.json(); //responseをjson形式で返す
          }).then(function(data) {
            self.appdata = data; //appdataにとってきたデータを代入する
            self.item = data.items;
            for (let i = 0; i < 9; i++) {
              while (true) {
                self.randoms = Math.floor(Math.random() * self.item.length);
                if (!self.random.includes(self.randoms)) {
                  self.random.push(self.randoms);
                  break;
                }
              }
            }
            for (let i = 0; i < 9; i++) {
              self.addURL = data.items[self.random[i]].track.album.images[0].url;
              self.img.push(self.addURL);
            }
            for (let i = 0; i < 9; i++) {
              self.preURL = data.items[self.random[i]].track.preview_url;
              self.preview.push(self.preURL);
            }
          });
        },
        goDetail: function(num) {
          this.selectedNum = num;
          this.listFlag = false;
          this.detailFlag = true;

          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          fetch('./list').then(function(res) { // /listというものに対する命令
            return res.json(); //responseをjson形式で返す
          }).then(function(data) {
            self.trackdata = data; //trackdataにとってきたデータを代入する
            self.item = data.items;
            self.artist = data.items[self.random[num]].track.album.artists[0].name; //アーティスト名
            self.track = data.items[self.random[num]].track.name; //曲名
            self.album = data.items[self.random[num]].track.album.name; //アルバム名
            self.selectArtistid = data.items[self.random[num]].track.album.artists[0].id; //アーティストID
          });
        },
        backList: function() {
          this.listFlag = true;
          this.detailFlag = false;
        },
        nextList: function() {
          this.detailFlag = false;
          this.nextArtistFlag = true;

          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          fetch('./genre/' + self.selectArtistid).then(function(res) { // /listというものに対する命令
            return res.json(); //responseをjson形式で返す
          }).then(function(data) {
            self.genredata = data; //appdata2にとってきたデータを代入する
            for (let i = 0; i < 9; i++) {
              self.addid = data.artists[i].id;
              self.genreid.push(self.addid);
            }
          });
        },
        nextsong: function() {
          this.nextArtistFlag = false;
          this.nextsongFlag = true;

          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          for (i = 0; i < 9; i += 1) {
            fetch('./next/' + self.genreid[i]).then(function(res) { // /listというものに対する命令
              return res.json(); //responseをjson形式で返す
            }).then(function(data) {
              self.nextdata = data; //appdata2にとってきたデータを代入する
              self.nextimgURL = data.tracks[0].album.images[0].url;
              self.nextimg.push(self.nextimgURL);
              self.nextpreURL = data.tracks[0].preview_url;
              self.nextpreview.push(self.nextpreURL);
              //console.log(self.nextdata);
            });
          }
        },
        gonextDetail: function(num) {
          this.selectedNum = num;
          this.nextsongFlag = false;
          this.nextdetailFlag = true;

          const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
          fetch('./next/' + self.genreid[num]).then(function(res) { // /listというものに対する命令
            return res.json(); //responseをjson形式で返す
          }).then(function(data) {
            self.nexttrackdata = data; //trackdataにとってきたデータを代入する
            self.artist = data.tracks[0].artists[0].name; //アーティスト名
            self.track = data.tracks[0].name; //曲名
            self.album = data.tracks[0].album.name; //アルバム名
            self.selectArtistid = data.tracks[0].artists[0].id; //アーティストID
            console.log(self.artist);
          });
        },
        backnextList: function() {
          this.nextsongFlag = true;
          this.nextdetailFlag = false;
        },
        backnextList2: function() {
          this.nextsongFlag = false;
          this.nextArtistFlag = true;
        }
      },
      computed: {
        selectedImg: function() {
          return this.img[this.selectedNum];
        },
        selectnextImg: function(){
          return this.nextimg[this.selectedNum];
        }
      }
    });

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
	<!-- HTML -->
	<div id="app">

	<div id="list" v-if="listFlag">
	<button @click="getAPIdata()">APIデータの取得</button>

	<!-- cdジャケット写真9個並べる -->
	<ul v-if="appdata" id="appdata">
	<div v-for="n in 9">
	<div :id="img[n-1]" style="text-align: center">
	<img v-bind:src="img[n-1]" width="350px" @click="goDetail(n-1)">
	<iframe height="50" width="350" :src="preview[n-1]" frameborder="0"></iframe>
	</div>
	</div>
	</ul>
	</div>

	<!-- 選択したcdの詳細表示 -->
	<div id="detail" v-if="detailFlag">
	<img v-bind:src="selectedImg" width="500px">
	<ul v-if="trackdata" id="trackdata">
	アーティスト名：{{artist}}<br>
	曲名：{{track}}<br>
	アルバム／シングル名：{{album}}<br>
	アーティストid：{{selectArtistid}}
	</ul>
	<button @click="backList()">戻る</button>
	<button @click="nextList()">次へ</button>
	</div>

	<!-- 選択したcdの類似アーティストのid表示 -->
	<div id="nextArtist" v-if="nextArtistFlag">
	<ul v-if="genredata">
	<div v-for="n in 9">
	アーティストid：{{genreid[n-1]}}
	</div>
	</ul>
	<button @click="nextsong()">cdジャケット表示</button>
	</div>

	<!-- 類似アーティストのトップソング表示 -->
	<div id="nextsong" v-if="nextsongFlag">
	<ul v-if="nextdata" id="nextdata">
	<div v-for="n in 9">
	<div :id="nextimg[n-1]" style="text-align: center">
	<img v-bind:src="nextimg[n-1]" width="350px" @click="gonextDetail(n-1)">
	<iframe height="50" width="350" :src="nextpreview[n-1]" frameborder="0"></iframe>
	</div>
	</div>
	</ul>
	<button @click="backnextList2()">戻る</button>
	</div>

	<!-- 選択した類似アーティストcdの詳細表示 -->
	<div id="nextdetail" v-if="nextdetailFlag">
	<img v-bind:src="selectnextImg" width="500px">
	<ul v-if="nexttrackdata" id="nexttrackdata">
	アーティスト名：{{artist}}<br>
	曲名：{{track}}<br>
	アルバム／シングル名：{{album}}<br>
	アーティストid：{{selectArtistid}}
	</ul>
	<button @click="backnextList()">戻る</button>
	</div>

	</div>

	<!-- JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<script>
	let app = new Vue({
	el: '#app',
	data: function() {
	return {
	appdata: '',
	trackdata: '',
	genredata: '',
	nextdata: [],
	nexttrackdata: '',
	item: '',
	img: [],
	random: [],
	preview: [],
	artist: [],
	selectArtistid: [],
	track: [],
	album: [],
	genreid: [],
	nextimg: [],
	nextpreview: [],
	listFlag: true,
	detailFlag: false,
	nextArtistFlag: false,
	nextsongFlag: false,
	nextdetailFlag: false,
	selectedNum: 0
	}
	},
	methods: {
	//ボタンを押すとAPIでとったデータを表示する
	getAPIdata: function() {
	const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
	fetch('./list').then(function(res) { // /listというものに対する命令
	return res.json(); //responseをjson形式で返す
	}).then(function(data) {
	self.appdata = data; //appdataにとってきたデータを代入する
	self.item = data.items;
	for (let i = 0; i < 9; i++) {
	while (true) {
	self.randoms = Math.floor(Math.random() * self.item.length);
	if (!self.random.includes(self.randoms)) {
	self.random.push(self.randoms);
	break;
	}
	}
	}
	for (let i = 0; i < 9; i++) {
	self.addURL = data.items[self.random[i]].track.album.images[0].url;
	self.img.push(self.addURL);
	}
	for (let i = 0; i < 9; i++) {
	self.preURL = data.items[self.random[i]].track.preview_url;
	self.preview.push(self.preURL);
	}
	});
	},
	goDetail: function(num) {
	this.selectedNum = num;
	this.listFlag = false;
	this.detailFlag = true;

	const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
	fetch('./list').then(function(res) { // /listというものに対する命令
	return res.json(); //responseをjson形式で返す
	}).then(function(data) {
	self.trackdata = data; //trackdataにとってきたデータを代入する
	self.item = data.items;
	self.artist = data.items[self.random[num]].track.album.artists[0].name; //アーティスト名
	self.track = data.items[self.random[num]].track.name; //曲名
	self.album = data.items[self.random[num]].track.album.name; //アルバム名
	self.selectArtistid = data.items[self.random[num]].track.album.artists[0].id; //アーティストID
	});
	},
	backList: function() {
	this.listFlag = true;
	this.detailFlag = false;
	},
	nextList: function() {
	this.detailFlag = false;
	this.nextArtistFlag = true;

	const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
	fetch('./genre/' + self.selectArtistid).then(function(res) { // /listというものに対する命令
	return res.json(); //responseをjson形式で返す
	}).then(function(data) {
	self.genredata = data; //appdata2にとってきたデータを代入する
	for (let i = 0; i < 9; i++) {
	self.addid = data.artists[i].id;
	self.genreid.push(self.addid);
	}
	});
	},
	nextsong: function() {
	this.nextArtistFlag = false;
	this.nextsongFlag = true;

	const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
	for (i = 0; i < 9; i += 1) {
	fetch('./next/' + self.genreid[i]).then(function(res) { // /listというものに対する命令
	return res.json(); //responseをjson形式で返す
	}).then(function(data) {
	self.nextdata = data; //appdata2にとってきたデータを代入する
	self.nextimgURL = data.tracks[0].album.images[0].url;
	self.nextimg.push(self.nextimgURL);
	self.nextpreURL = data.tracks[0].preview_url;
	self.nextpreview.push(self.nextpreURL);
	//console.log(self.nextdata);
	});
	}
	},
	gonextDetail: function(num) {
	this.selectedNum = num;
	this.nextsongFlag = false;
	this.nextdetailFlag = true;

	const self = this; //fetch内ではthisが使えないので先に定数として設定しておく
	fetch('./next/' + self.genreid[num]).then(function(res) { // /listというものに対する命令
	return res.json(); //responseをjson形式で返す
	}).then(function(data) {
	self.nexttrackdata = data; //trackdataにとってきたデータを代入する
	self.artist = data.tracks[0].artists[0].name; //アーティスト名
	self.track = data.tracks[0].name; //曲名
	self.album = data.tracks[0].album.name; //アルバム名
	self.selectArtistid = data.tracks[0].artists[0].id; //アーティストID
	console.log(self.artist);
	});
	},
	backnextList: function() {
	this.nextsongFlag = true;
	this.nextdetailFlag = false;
	},
	backnextList2: function() {
	this.nextsongFlag = false;
	this.nextArtistFlag = true;
	}
	},
	computed: {
	selectedImg: function() {
	return this.img[this.selectedNum];
	},
	selectnextImg: function(){
	return this.nextimg[this.selectedNum];
	}
	}
	});

	</script>
	</body>

	</html>