Vue.jsでTodoアプリを作ってみよう

kenpapa

2021年12月14日 20:07

Vue.jsというユーザインターフェース構築のためのJavaScriptフレームワークがあります。

非常に人気のあるフレームワークなので、興味のある方もいらっしゃると思います。

そこで、本記事ではVue.jsで簡単なTodoアプリを一から作成する手順を紹介しようと思います。

Vue.jsでのアプリ開発がどのようなものかをざっと理解していただければと思います。

今回作成するTodoアプリは下図のような追加と削除ができるだけの簡単なものです。

Vue.jsでアプリ開発を行う上で知っておいていただきたいことは、アプリを小さい部品（コンポーネント）の集合として考えて開発を行うことができるという点です。

今回のTodoアプリは下図のようにApp、TodoForm、TodoListの３つのコンポーネントで構成されています。

実行環境

Vue.jsにはVue CLIというVue.jsでアプリ開発を行う際にいろいろと支援してくれる便利なツールがありますので、ここでもそのツールを使ってTodoアプリを作ることにします。

下記にVue CLIのサイトのリンクを貼っておきます。

本記事ではVue CLIが既にインストールされている状態から始めることにします。

実行手順

大きな流れは次の通りです。

１．プロジェクトの作成
２．Appコンポーネントの作成
３．TodoFormコンポーネントの作成
４．TodoListコンポーネントの作成
５．実行

１．プロジェクトの作成

「vue create mytodo」を実行します。

Default（Vue 3）を選択します。

mytodoという名前のプロジェクトが自動で作成され、プロジェクトの中には下図のようにフォルダやファイルが存在しています。

Screenshot from 2021-12-10 17-02-07 (コピー)

Vue CLIを使ってアプリ開発を行う場合は、プロジェクトの中に存在する自動生成されたファイルを変更したり、新しくフォルダやファイルを作成したりしながら開発を進めることになります。

２．Appコンポーネントの作成

既存のApp.vueを下記のように変更します。

App.vue

<template>
 <TodoForm v-on:add="addTodo"></TodoForm>
 <TodoList v-bind:todos="todos" v-on:delete="deleteTodo"></TodoList>
</template>

<script>
import TodoForm from './components/TodoForm';
import TodoList from './components/TodoList';

let nextId = 0;

export default {
 data () {
   return {
     todos: []
   }
 },
 components: {
   TodoForm,
   TodoList
 },
 methods: {
   addTodo (newTodo) {
     nextId = nextId + 1;
     this.todos = [...this.todos, { id: nextId, text: newTodo }];
   },
   deleteTodo (id) {
     this.todos = this.todos.filter(todo => todo.id !== id);
   }
 }
}
</script>

３．TodoFormコンポーネントの作成

components配下にTodoForm.vueを作成して下記のコードを入力します。

TodoForm.vue

<template>
 <h3>My Todo</h3>
 <input v-model="newTodo" placeholder="Input here...">
 <button v-on:click="addTodo">ADD</button>
</template>

<script>
export default {
 data () {
   return {
     newTodo: ''
   }
 },
 emits: ['add'],
 methods: {
   addTodo () {
     if (this.newTodo === '') return;
     this.$emit('add', this.newTodo);
     this.newTodo = '';
   }
 }
}
</script>

４．TodoListコンポーネントの作成

components配下にTodoList.vueを作成して下記のコードを入力します。

TodoList.vue

<template>
 <h5>Todo List</h5>
 <ul>
   <li v-for="todo in todos" v-bind:key="todo.id">
     {{ todo.text }}
     <button v-on:click="deleteTodo(todo.id)">DEL</button>
   </li>
 </ul>
</template>

<script>
export default {
 props: ['todos'],
 emits: ['delete'],
 methods: {
   deleteTodo (id) {
     this.$emit('delete', id);
   }
 }
}
</script>

５．実行

「npm run serve」を実行します。