【第1回】すぐ出来るSPA開発(Vue.jsとfirebaseデプロイまで)

# vue.jsによるSPA開発
SPAとは単一のWebページでコンテンツの切り替えを行うものです。
ブラウザによるページ遷移を行わずにコンテンツの切り替えなどを行うことで、ユーザー体験（UX）を大きく向上させることができます。

今回はヘッダー部分までつけたアプリを作り、firebaseにリリースします。
vue-routerを用いることで簡単に作成できます。

#1,Vue.jsのインストール(npmはインストールされている前提で進めています)
 vue.jsのプロジェクトの作成
 専用のcliをインストールしてそれによりプロジェクトを作成します。
 フレームワークの導入コマンドです
 (composer create-projectとかrails newみたいなものです)

 ```sh
 // グローバルにcliをインストール
 npm install -g @vue/cli
 // プロジェクトの作成(今回プロジェクト名はsound-creator)
 vue create sound-creator
```

defaultかmanualかを聞かれますので、Manualを選択してください。
Manualとデフォルトの違いは本文章の最後に載せておくので、よかったら参考にしてみてください。
セットアップの時にrouterとvuexにチェックを入れてください。
あとはお好みでEnter連打しておけば大丈夫です。

<img width="1020" alt="スクリーンショット 2020-04-12 1.38.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/85fd781d-0b6f-4ea2-fee1-dc6fda02bbaa.png">


もしも、こんなエラー(npm install --loglevel error)が出てきたら

```sh
command failed: npm install --loglevel error
```

キャッシュを消してみましょう(vue-cli 4.2.3で確認)

```sh
npm cache clean --force
```

そしてディレクトリを消して再度vue create プロジェクト名　してください。
npm run serveして指定のURL(http://localhost:8080/) にアクセスすれば,

こんな感じで起動します。

<img width="344" alt="スクリーンショット 2020-04-12 12.57.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/4d4ed45f-cf26-332b-e8c5-18e1228fe62f.png">


# 2、デザインをよくする。
１、の状態でとりあえずSPAとしては完成です。
デプロイが気になるという方はここを飛ばして次のデプロイ手順に進んでください。
さすがにこのままだと寂しいのでVuetifyというマテリアルデザインコンポーネントフレームワークを使用して、見た目を整えていきます。
=導入=

```sh
npm install vuetify --save
```

=用法=
main.jsに下記を追記と書き換えします。

```main.js
// 追記
import Vuetify from 'vuetify';
//注意)import Vuetify from 'vuetify';は
//    import App from './App.vue';より上↑に記述
import 'vuetify/dist/vuetify.min.css';
//import 'vuetify/dist/vuetify.min.css';の位置は最下部で大丈夫

Vue.use(Vuetify)

//書き換え
new Vue({
  router,
  store,
  vuetify: new Vuetify(),  ←ここです。
  render: h => h(App),
}).$mount('#app')
```

今回はヘッダをつけてみます。
App.vueを下記のように書き換えます。
v-appで囲んだ領域に対して適用吸うことが可能で、<v-app-bar>がヘッダーになります。
間に入れた文字がヘッダーに反映されます。
また、色などのオプションを指定できます。
今回はサンプルとして、色,dense(ツールバーのコンテンツの高さを48px),dark(ダークテーマ)を使いました。

```App.vue
<template>
  <div id="app">
    <v-app>
      <div>
        <v-app-bar
          color="orange"
          dense
          dark
        >
          Sound-Creator
        </v-app-bar>
      </div>
      <v-content>
        <v-container>
          <router-view/>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>
```

=結果=
<img width="344" alt="スクリーンショット 2020-04-12 13.37.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/44060119-c5d4-2af3-3444-b4c114af92c4.png">

その他のコンポーネントの使い方についても調べてみてください。
今回は導入編なので割愛します。

# 3,デプロイ
静的なホスティングサービスとしてfirebaseを使用します。
##1,導入編
使ってみるを押します
<img width="1318" alt="スクリーンショット 2020-04-12 13.55.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/c664150c-ed93-a105-6941-64f7c1fcf503.png">

次のページでプロジェクトを追加を押します(アナリティクスを使うかなどを聞かれるのでお好みでどうぞ)
準備完了
<img width="1318" alt="スクリーンショット 2020-04-12 13.53.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/d45466fc-c060-a901-92b0-064820082321.png">

##2,デプロイする(初期化作業編)
firebaseへのアップロードはcliにて行います。

```sh
npm install -g firebase-tools
```
完了したら、ログインします
(ブラウザに飛んでなんやかんや聞かれますが、プロジェクトを作成したgoogleアカウントを選択してください。)

```
firebase login
```
次が初期化処理です。
(ここで色々聞かれますが以下の流れを参考にセットアップしてください)

```sh
firebase init
```

流れ
Hostingを選ぶ
<img width="1019" alt="スクリーンショット 2020-04-12 14.02.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/19496ed1-f96e-e2c3-5474-3a7588d16b70.png">
use an existing project
(ここで選択肢にプロジェクトが表示されます。
 ログインユーザーとfirebaseで作成したものが紐づいている場合)
<img width="1018" alt="スクリーンショット 2020-04-12 14.03.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/a3460adb-ca3e-7a76-1044-0e0ec3a74954.png">
puclicディレクトリの選択　dist(npm run buildにより作成されるディレクトリ)
<img width="784" alt="スクリーンショット 2020-04-12 14.07.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/d64d2767-e404-f736-b217-eee8a05cc0e6.png">

##3,デプロイする
ビルドします。
distというディレクトリが作成されます。下記コマンドはvue-cli-service buildと等価です。
package.jsonのscriptに記載がされています。

```sh
npm run build
```

デプロイします。

```sh
firebase deploy
```

これにて完了です。
末尾にあるHosting URLにアクセスしてみてください。
<img width="678" alt="スクリーンショット 2020-04-12 14.24.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/0255a553-48bc-e0f1-ae49-9c0791852f27.png">


第二回は画像の配置とボタンをやります

#4、参考
参考：ManualインストールとDefaultインストールの違い
view(HOMEとabout), store,routerといった基本部分が一コマンドで作成されていることがわかります。
とても便利です。

default
<img width="298" alt="スクリーンショット 2020-04-12 1.31.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/896cec2d-354c-8849-e50a-f6be20d3915e.png">

manual(vuexとvue-router)
<img width="298" alt="スクリーンショット 2020-04-12 1.48.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320677/20f60236-556e-9316-0dd2-9477d7f888a3.png">