Spotify + Vue.jsで気になるアーティストの人気を調べるぞ！　Home画面編

どうも**jack**です。
お久しぶりです。
あれから色々ありまして今はVue.jsとDjangoを使って開発しています。
現場でせっかくVue.jsを使っているので何か自分でも作ってみたいなぁと。

どうせなら何かAPIを叩いてデータを引っ張って来たいなぁといことで題名のものを作ってみたいなとなりました！

私の開発環境は以下となっています。

- vue@2.6.11
- macOS


既にVue.jsはインストールされているものとしています。
では早速・・・

```console
vue create my-cli
```
ド定番でプロジェクト名はmy-cliでいきましょう！
そしてディレクトリを移動してbootstrapをインストールしていきます。

``` console
npm install vue bootstrap-vue bootstrap
```

そんでもってMain.jsも書き換えちゃいましょう。えいっ！

```javascript:src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import BootstrapVue from 'bootstrap-vue' // こいつ

Vue.use(BootstrapVue) // こいつ
Vue.config.productionTip = false;

import 'bootstrap/dist/css/bootstrap.css' // こいつ
import 'bootstrap-vue/dist/bootstrap-vue.css' // こいつ

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");
```

では、早速動かして見ましょう！！！

```console
npm run serve
```

例のあの画面が出たのではないでしょうか？
まじこのシステム作った人すげえええ

ただ、メニューの選択を少しいじりたい衝動に駆られたので変えちゃいましょう。
ついでにいらないものも削除！！！えいっ！！！

```vuejs:scr/App.vue
<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <router-link class="navbar-brand" to="/">Home</router-link>|
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <router-link class="nav-link" to="/about">Search</router-link>
          </li>
        </ul>
      </div>
    </nav>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>
```
すると画面的にはこんな感じ。
<img width="1440" alt="スクリーンショット 2020-04-27 22.03.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/58296a81-d12d-af1c-27b7-0a7863c032d2.png">

なんか寂しい。。。
次はホーム画面をかえていきましょう。
と言っても「お気に入りのアーティストを検索してみよう！」くらいしか書かないのですが（泣）

ここでお引越しを行います。
理由としてviewディレクトリにあったりcomponentにあったりややこしいのが好かんからです。
ということでsrc/viewsディレクトリ配下にある下記ファイルをcomponentに移動します。

```console
Home.vue
About.vue
```
```
./src
├── App.vue
├── assets
├── components
│   ├── About.vue
│   ├──Home.vue
│   └── HelloWorld.vue
├── main.js
└── router
    └── index.js
```

そしてindex.jsを下記に書き換えちゃいます。

```javascript:src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: About
  }
];

const router = new VueRouter({
  routes
});

export default router;
```

そしてHome.vueの不要なコードを削除して下記のようにします。
それと同時にHelloWorld.vueは削除です。

```vuejs:src/component/Home.vue
<template>
  <div class="home">
  </div>
</template>

<script>

export default {
  name: "Home",

};
</script>
```

うん、すっきり。
<img width="1440" alt="スクリーンショット 2020-04-28 21.46.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/104d4dff-02a7-6523-3d5e-f2c986bb3042.png">

でも、まだURLがAboutのままなのでこれをsearchに変更します。
それに伴いAbout.vueもSearch.vueに変更！！

```javascript:src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import Search from "../components/Search.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/search",
    name: "Search",
    component: Search
  }
];

const router = new VueRouter({
  routes
});

export default router;
```

```vuejs:src/App.vue
<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <router-link class="navbar-brand" to="/">Home</router-link>|
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <router-link class="nav-link" to="/search">Search</router-link> //ここ変えた 
          </li>
        </ul>
      </div>
    </nav>
    <router-view />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

</style>
```

これでURL変更完了です！！！
Home画面は今はこんな感じで！
後で頑張れたら頑張るから。

```vuejs:Home.vue
<template>
  <div class="home">
    <h2>search my favorite music</h2>
  </div>
</template>

<script>

export default {
  name: "Home",

};
</script>
```
<img width="1440" alt="スクリーンショット 2020-04-28 22.20.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274224/3a03b996-2f98-e7a3-2958-b0d565bcd86d.png">

simple is ok!!!

では続きはsearch画面編で！！