Vue 3 で作る！簡単 ToDo アプリ

この記事では、Vue 3 を使用してシンプルな ToDo アプリを作成します。追加、削除の基本的な実装しか取り入れないためものすごくシンプルです。

1. プロジェクトの作成

まずはこちらの記事のcreate-vue を使用してプロジェクトを作成します。

npm install -g create-vue

プロンプトが表示されたら、デフォルト設定を選択してください。

フォルダ階層

src
├── App.vue
├──main.css
├── components
│   └── TodoItem.vue
├── main.ts
└── views
    └── TodoList.vue

2. コンポーネントの作成

src/components フォルダに TodoItem.vue componentを作成します。

TodoItem.vue

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['toggle', 'delete'])

const completed = ref(props.item.completed)
</script>

<template>
  <li class="todo-item">
    <input type="checkbox" v-model="completed" @change="emit('toggle', item)" />
    <span :class="{ completed }">{{ item.text }}</span>
    <button @click="emit('delete', item)">削除</button>
  </li>
</template>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.completed {
  text-decoration: line-through;
  color: #999;
}
</style>

src/views フォルダに TodoList.vue viewを作成します。

TodoList.vue

<script setup lang="ts">
import { ref } from 'vue'
import TodoItem from '../components/TodoItem.vue'

interface Todo {
  text: string
  completed: boolean
}

const todos = ref<Todo[]>([])
const newTodoText = ref('')

const addTodo = () => {
  if (newTodoText.value) {
    todos.value.push({
      text: newTodoText.value,
      completed: false
    })
    newTodoText.value = ''
  }
}

const toggleTodo = (item: Todo) => {
  item.completed = !item.completed
}

const deleteTodo = (item: Todo) => {
  const index = todos.value.indexOf(item)
  if (index > -1) {
    todos.value.splice(index, 1)
  }
}

const editTodo = (item: Todo, newText: string) => {
  const index = todos.value.indexOf(item)
  if (index > -1) {
    todos.value[index].text = newText
  }
}
</script>

<template>
  <div class="todo-list">
    <h1>ToDo List</h1>
    <input type="text" v-model="newTodoText" @keyup.enter="addTodo" />
    <button @click="addTodo">追加</button>

    <ul>
      <TodoItem
        v-for="(item, index) in todos"
        :key="index"
        :item="item"
        @toggle="toggleTodo"
        @delete="deleteTodo"
        @edit="editTodo"
      />
    </ul>
  </div>
</template>

<style scoped>
.todo-list {
  padding: 20px;
}

.todo-list h1 {
  margin-bottom: 20px;
}
</style>

3. アプリケーションへの組み込み

src/App.vue を以下のように修正します。

App.vue

<script setup lang="ts">
import TodoList from './views/TodoList.vue'
</script>

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

4. 実行

npm run serve

これで、ブラウザで ToDo アプリが起動します。入力欄にタスクを入力して「追加」ボタンをクリックすると、タスクがリストに追加されます。チェックボックスでタスクの完了状態を切り替え、削除ボタンでタスクを削除できる簡単なTodoリストを作成することができました。

5. まとめ

この記事では、Vue 3 を使用してシンプルな ToDo アプリを作成する方法を解説しました。慣れているPropsとEmitでのデータのやり取りにしましたがこのコードをベースに、今後機能を追加したりデザインをカスタマイズする記事を作成していきたいと思います。