この記事について
この記事は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をインポートして使用するようにします。
<template>
<ToDoList />
</template>
<script>
import ToDoList from './components/ToDoList.vue'
export default {
name: 'App',
components: {
ToDoList
}
}
</script>
3.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に変更する🤗
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
4.Firebaseにデプロイする
アプリをビルドする🤗
$ npm run build
Firebaseへデプロイする🤗
$ firebase deploy
デプロイ完了したら、Hosting URLが表示されるので確認して終了！！！！🤗