この記事について

この記事は2020年12月24日に発売されたWEB+DB PRESS Vol.120の
『最新Vue.js 3入門のToDoリストアプリケーションを作って学ぶ』から
実際にToDoアプリを作成してFirebaseにデプロイしてみた記事です。

先日私の所属する会社ではWEB+DB PRESSとSoftware Designが定期購読となりました！🤗

Vite

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

メリット
・Hot Module Replacement(HMR: コードの変更が即座に反映される)
・ビルドの最適化
・Vueプロジェクトの実行
etc..

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

このアプリでできること

ToDoをリストで確認する
ToDoを追加する
ToDoを完了にする
ToDoをフィルタする

ToDoアプリの作り方

流れ

1.プロジェクトの作成
2.App.vueを編集
3.ToDoList.vueを編集
4.アプリを起動する

1.プロジェクトの作成

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

$ npm init vite-app vue-todo-list

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

$ cd vue-todo-list
$ npm i

2.App.vue

src/App.vueをToDoList.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を作成して、必要機能を揃えるコードを一気に書いていきます。

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.アプリを起動する

アプリ起動

npm run dev

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

Firebaseにデプロイする

せっかくなので作成したアプリをFirebaseにデプロイしていきたいと思います〜！🤗

流れ

1.Firebaseプロジェクトを作成する
2.Firebaseにログインする ※ログイン済みの方は飛ばしてください〜
3.firebase.jsonを作成する
4.Firebaseにデプロイする

1.Firebaseプロジェクトを作成する

作成したらこんな感じ👇👇

2.Firebaseにログインする

ログイン済の方は飛ばしてください〜🤗

Firebase CLIをインストールする

$ npm install -g firebase-tools

Firebase CLIにログインする

$ firebase login

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

$ firebase projects:list

公式はこちら👇

3.`firebase.json`を作成する

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

$ 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に変更する🤗

firebase.json

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

4.Firebaseにデプロイする

アプリをビルドする🤗

$ npm run build

Firebaseへデプロイする🤗

$ firebase deploy

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

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