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>

      <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>

    <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>

    <div id="nextArtist" v-if="nextArtistFlag">
      <ul v-if="appdata2">
        <li v-for="(data, key) in appdata2">
          {{key}}: {{data}}
        </li>
      </ul>
    </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: '',
          appdata2: '',
          trackdata: '',
          item: '',
          img: [],
          random: [],
          preview: [],
          artist: [],
          selectArtistid: [],
          track: [],
          album: [],
          listFlag: true,
          detailFlag: false,
          nextArtistFlag: 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.album = data.items[self.random[num]].track.album.name; //アルバム名
            self.track = data.items[self.random[num]].track.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.appdata2 = data; //appdataにとってきたデータを代入する
          });
        }
      },
      computed: {
        selectedImg: function() {
          return this.img[this.selectedNum];
        }
      }
    });

  </script>
</body>

</html>

## index.js
//node.jsにインストールするもの
const express = require('express');
const request = require('request');
const cors = require('cors');
const app = express();

// CORSの設定
app.use(cors());

// webフォルダの中身を公開する
app.use(express.static('web'));

// API_1
app.get('/list', (req, res) => { // /listというものが含まれているときに行う反応

    var client_id = ''; //SpotifyのクライアントID
    var client_secret = ''; //Spotifyのクライアントシークレット

    //認証を行う
    var authOptions = {
        url: 'https://accounts.spotify.com/api/token',
        headers: {
            'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
        },
        form: {
            grant_type: 'client_credentials'
        },
        json: true //基本固定
    };

    //取りたい情報は何か、目的のための命令
    request.post(authOptions, function (error, response, body) {
        if (!error && response.statusCode === 200) { //こういう書き方をする

            //アクセストークンを使ってAPIを使いデータを取ってくる
            var token = body.access_token;
            var options = {
                url: 'https://api.spotify.com/v1/playlists/37i9dQZEVXbKXQ4mDTEBXq/tracks',
                headers: {
                    'Authorization': 'Bearer ' + token,
                    'Accept-Language': 'ja;q=1' //日本語表記にする
                },
                json: true
            };

            request.get(options, function (error, response, body) {
                res.json(body);
            });
        }
    });
});

// API_2
app.get('/genre/:artistid', (req, res) => { // /listというものが含まれているときに行う反応

    var client_id = ''; //SpotifyのクライアントID
    var client_secret = ''; //Spotifyのクライアントシークレット


    //認証を行う
    var authOptions = {
        url: 'https://accounts.spotify.com/api/token',
        headers: {
            'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
        },
        form: {
            grant_type: 'client_credentials'
        },
        json: true //基本固定
    };

    //取りたい情報は何か、目的のための命令
    request.post(authOptions, function (error, response, body) {
        if (!error && response.statusCode === 200) { //こういう書き方をする

            //アクセストークンを使ってAPIを使いデータを取ってくる
            var token = body.access_token;
            var options = {
                url: 'https://api.spotify.com/v1/artists/'+req.params.artistid+'/related-artists',
                headers: {
                    'Authorization': 'Bearer ' + token,
                    'Accept-Language': 'ja;q=1' //日本語表記にする
                },
                json: true
            };

            request.get(options, function (error, response, body) {
                res.json(body);
            });
        }
    });
});


//3000というポート番号（サーバー）に表示させる
app.listen(3000, () => console.log('Listening on port 3000'));
	<!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>

	<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>

	<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>

	<div id="nextArtist" v-if="nextArtistFlag">
	<ul v-if="appdata2">
	<li v-for="(data, key) in appdata2">
	{{key}}: {{data}}
	</li>
	</ul>
	</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: '',
	appdata2: '',
	trackdata: '',
	item: '',
	img: [],
	random: [],
	preview: [],
	artist: [],
	selectArtistid: [],
	track: [],
	album: [],
	listFlag: true,
	detailFlag: false,
	nextArtistFlag: 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.album = data.items[self.random[num]].track.album.name; //アルバム名
	self.track = data.items[self.random[num]].track.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.appdata2 = data; //appdataにとってきたデータを代入する
	});
	}
	},
	computed: {
	selectedImg: function() {
	return this.img[this.selectedNum];
	}
	}
	});

	</script>
	</body>

	</html>
	//node.jsにインストールするもの
	const express = require('express');
	const request = require('request');
	const cors = require('cors');
	const app = express();

	// CORSの設定
	app.use(cors());

	// webフォルダの中身を公開する
	app.use(express.static('web'));

	// API_1
	app.get('/list', (req, res) => { // /listというものが含まれているときに行う反応

	var client_id = ''; //SpotifyのクライアントID
	var client_secret = ''; //Spotifyのクライアントシークレット

	//認証を行う
	var authOptions = {
	url: 'https://accounts.spotify.com/api/token',
	headers: {
	'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
	},
	form: {
	grant_type: 'client_credentials'
	},
	json: true //基本固定
	};

	//取りたい情報は何か、目的のための命令
	request.post(authOptions, function (error, response, body) {
	if (!error && response.statusCode === 200) { //こういう書き方をする

	//アクセストークンを使ってAPIを使いデータを取ってくる
	var token = body.access_token;
	var options = {
	url: 'https://api.spotify.com/v1/playlists/37i9dQZEVXbKXQ4mDTEBXq/tracks',
	headers: {
	'Authorization': 'Bearer ' + token,
	'Accept-Language': 'ja;q=1' //日本語表記にする
	},
	json: true
	};

	request.get(options, function (error, response, body) {
	res.json(body);
	});
	}
	});
	});

	// API_2
	app.get('/genre/:artistid', (req, res) => { // /listというものが含まれているときに行う反応

	var client_id = ''; //SpotifyのクライアントID
	var client_secret = ''; //Spotifyのクライアントシークレット


	//認証を行う
	var authOptions = {
	url: 'https://accounts.spotify.com/api/token',
	headers: {
	'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
	},
	form: {
	grant_type: 'client_credentials'
	},
	json: true //基本固定
	};

	//取りたい情報は何か、目的のための命令
	request.post(authOptions, function (error, response, body) {
	if (!error && response.statusCode === 200) { //こういう書き方をする

	//アクセストークンを使ってAPIを使いデータを取ってくる
	var token = body.access_token;
	var options = {
	url: 'https://api.spotify.com/v1/artists/'+req.params.artistid+'/related-artists',
	headers: {
	'Authorization': 'Bearer ' + token,
	'Accept-Language': 'ja;q=1' //日本語表記にする
	},
	json: true
	};

	request.get(options, function (error, response, body) {
	res.json(body);
	});
	}
	});
	});


	//3000というポート番号（サーバー）に表示させる
	app.listen(3000, () => console.log('Listening on port 3000'));