Vue.jsで作るシンプルなTodoアプリ：初心者でも簡単に実装できるステップバイステップガイド

### はじめに
Vue.jsを使って、シンプルなTodoアプリを作成してみましょう。このアプリは、タスクの追加や削除ができる基本的な機能を備えています。この記事では、コードの詳細な解説と共に、初めてのVue.jsアプリケーション開発をサポートします。

### 目次
1. アプリの概要
2. 必要な準備
3. Todoアプリの実装
4. コードの解説
5. まとめ

### 1. アプリの概要
今回作成するTodoアプリは、ユーザーがタスクを追加し、完了したタスクを削除することができる、非常にシンプルなものです。これを通じて、Vue.jsの基本的な機能であるデータバインディングやイベント処理を学びます。

### 2. 必要な準備
まずは、Vue.jsをプロジェクトに組み込む準備をしましょう。今回は、CDNを使ったシンプルなセットアップを行います。

### 3. Todoアプリの実装

以下がTodoアプリのHTMLとJavaScriptのコードです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Todo App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #42b983;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            padding: 8px;
            background-color: #f3f3f3;
            margin-bottom: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        button {
            background-color: #ff6666;
            border: none;
            padding: 4px 8px;
            color: white;
            cursor: pointer;
        }
        button:hover {
            background-color: #ff3333;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>Vue.js Todo App</h1>
        <input v-model="newTodo" @keyup.enter="addTodo" placeholder="新しいタスクを入力">
        <button @click="addTodo">追加</button>
        <ul>
            <li v-for="(todo, index) in todos" :key="index">
                {{ todo }}
                <button @click="removeTodo(index)">削除</button>
            </li>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                newTodo: '',
                todos: []
            },
            methods: {
                addTodo() {
                    if (this.newTodo.trim()) {
                        this.todos.push(this.newTodo.trim());
                        this.newTodo = '';
                    }
                },
                removeTodo(index) {
                    this.todos.splice(index, 1);
                }
            }
        });
    </script>
</body>
</html>
```

### 4. コードの解説

#### HTML部分
- **`<input v-model="newTodo" @keyup.enter="addTodo"`**  
  ユーザーが新しいタスクを入力するための入力フィールドです。`v-model`を使って入力内容を`newTodo`というデータにバインドし、`@keyup.enter`ディレクティブでエンターキーが押されたときに`addTodo`メソッドが呼ばれます。

- **`<button @click="addTodo">追加</button>`**  
  タスクを追加するためのボタンです。クリック時に`addTodo`メソッドが呼ばれます。

- **`<ul><li v-for="(todo, index) in todos" :key="index">...</li></ul>`**  
  `v-for`ディレクティブを使って、タスクリストを表示しています。各タスクに対して、削除ボタンが表示されます。

#### JavaScript部分
- **`data: { newTodo: '', todos: [] }`**  
  アプリケーションのデータ部分です。`newTodo`には新しく追加されるタスクの内容が、`todos`にはタスクのリストが格納されます。

- **`addTodo()`メソッド**  
  `newTodo`に入力された値を`todos`配列に追加し、その後入力フィールドをクリアします。

- **`removeTodo(index)`メソッド**  
  指定されたインデックスのタスクを`todos`配列から削除します。


### 画面表示
![スクリーンショット 2024-08-16 17.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/1ffe0090-5908-1cf9-7cad-56446fb0849a.png)


### 5. まとめ
Vue.jsを使ったシンプルなTodoアプリの作成を通じて、基本的なデータバインディングやイベント処理の方法を学ぶことができました。Vue.jsの基礎を理解するためには、実際に手を動かしてコードを書いてみることが大切です。ぜひ、このアプリをベースに新しい機能を追加して、Vue.jsの可能性を探ってみてください。