Vue3とViteでToDoアプリを作ってFirebaseにデプロイする

#この記事について
この記事は2020年12月24日に発売された[WEB+DB PRESS Vol.120](https://gihyo.jp/magazine/wdpress)の
『最新Vue.js 3入門のToDoリストアプリケーションを作って学ぶ』から
実際に<b>ToDoアプリを作成してFirebaseにデプロイ</b>してみた記事です。

先日私の所属する会社では[WEB+DB PRESSとSoftware Design](https://www.fujisan.co.jp/cat800/cat1002/)が定期購読となりました！🤗

#Vite
読み方(ヴィート)
Vue3の開発後期に登場した新しいビルドツール

<b>メリット</b>
・Hot Module Replacement(HMR: コードの変更が即座に反映される)
・ビルドの最適化
・Vueプロジェクトの実行 
etc..
<a href="https://github.com/vitejs/vite" target="_blank"><img width="520" alt="スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/513f46fb-e584-96b4-a0ec-162ec4dfc4b1.png"></a>

#ToDoアプリの完成版はこちら

<ul><b>このアプリでできること</b>
<li>ToDoをリストで確認する</li>
<li>ToDoを追加する</li>
<li>ToDoを完了にする</li>
<li>ToDoをフィルタする</li>
</ul>

https://vue3-todo-list.web.app/

<a href="https://vue3-todo-list.web.app/" target="_blank">
<img width="600" alt="スクリーンショット" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/ba7bc37d-352e-c68c-c301-003fc3504fb1.png">
</a>


#ToDoアプリの作り方

####流れ
1.[プロジェクトの作成](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#1プロジェクトの作成)
2.[App.vueを編集](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#2appvue)
3.[ToDoList.vueを編集](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#3todolistvue)
4.[アプリを起動する](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#4アプリを起動する)

####1.プロジェクトの作成
プロジェクトの作成をします🤗
`vue-todo-list`という名前のプロジェクトを作成します🤗

```terminal:
$ npm init vite-app vue-todo-list
```

`vue-todo-list`というフォルダが作成されるので、
フォルダに移動してパッケージをインストールします🤗

```terminal
$ cd vue-todo-list
$ npm i
```
####2.App.vue
src/App.vueをToDoList.vueをインポートして使用するようにします。

```vue:src/App.vue
<template>
  <ToDoList />
</template>

<script>
import ToDoList from './components/ToDoList.vue'

export default {
  name: 'App',
  components: {
    ToDoList
  }
}
</script>
```

####3.ToDoList.vue
src/components/ToDoList.vueを作成して、必要機能を揃えるコードを一気に書いていきます。

```vue:src/components/ToDoList.vue
<template>
  <div>
    <input v-model="inputValue">
    <button v-on:click="handleClick">
      ToDoを追加
    </button>
    <input 
      v-model="firstValue"
      placeholder="フィルタテキスト"
    >
    <ul>
      <li 
        v-for="todo in filterdTodoItems"
        v-bind:key="todo.id"
        class="todo-item"
        v-bind:class="{'done': todo.done}"
        v-on:click="todo.done = !todo.done">
        <span v-if="todo.done">✔︎</span> 
        {{ todo.text }} 
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    const todoItems = [
      ]
    return {
      inputValue: '',
      todoItems,
      firstValue: '',
    }
  },
  computed: {
    filterdTodoItems() {
      if (!this.firstValue) {
        return this.todoItems
      }
      return this.todoItems.filter((todo) => {
        return todo.text.includes(this.firstValue)
      })
    }
  },
  methods: {
    handleClick() {
      this.todoItems.push({
        id: this.todoItems.length + 1,
        done: false,
        text: this.inputValue
      })
      this.inputValue = ''
    },
  }
}
</script>
<style>
.todo-item.done{
  background-color: #3fb983;
  color: #ffffff;
}
</style>
```

####4.アプリを起動する

```terminal:アプリ起動
npm run dev
```

[http://localhost:3000/](http://localhost:3000/)にアクセスして、問題がなければ終了！！！🤗

#Firebaseにデプロイする
せっかくなので作成したアプリを<b>Firebaseにデプロイ</b>していきたいと思います〜！🤗
####流れ
1.[Firebaseプロジェクトを作成する](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#1firebaseプロジェクトを作成する)
2.[Firebaseにログインする](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#2firebaseにログインする) ※ログイン済みの方は飛ばしてください〜
3.[`firebase.json`を作成する](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#3firebasejsonを作成する)
4.[Firebaseにデプロイする](https://qiita.com/AJIKING/items/a9ca0225e8195e47442d#4firebaseにデプロイする)


####1.Firebaseプロジェクトを作成する
作成したらこんな感じ👇👇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/80f16262-5bc9-f5bf-9969-f8d721f1cbc3.png)

####2.Firebaseにログインする
ログイン済の方は飛ばしてください〜🤗

Firebase CLIをインストールする

```terminal
$ npm install -g firebase-tools
```

Firebase CLIにログインする

```terminal:
$ firebase login
```

以下コマンドを実行して、作成したプロジェクトが表示されたらOK！🤗

```terminal:
$ firebase projects:list
```

公式はこちら👇
<a href="https://firebase.google.com/docs/cli" target="_blank">
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563930/3292cad3-d69e-e849-6160-49f21bdf64f4.png)
</a>



####3.`firebase.json`を作成する
Todoアプリの配下で以下コマンドを実行する🤗
その際に色々質問が来るので、答えたらfirebase.jsonが作成される

```terminal
$ firebase init  
<省略>
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: vue3-todo-list (Vue3-ToDo-List)
i  Using project vue3-todo-list (Vue3-ToDo-List)
<省略>
? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? (y/N) 
<省略>
```

firebase.jsonが作成されたことを確認して、publicが`dist`になっているか確認！🤗
もしくは`dist`に変更する🤗

```json:firebase.json
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

####4.Firebaseにデプロイする

アプリをビルドする🤗

```terminal:
$ npm run build
```

Firebaseへデプロイする🤗

```terminal
$ firebase deploy
```

デプロイ完了したら、Hosting URLが表示されるので確認して終了！！！！🤗