はじめに

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

目次

アプリの概要
必要な準備
Todoアプリの実装
コードの解説
まとめ

1. アプリの概要

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

2. 必要な準備

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

3. Todoアプリの実装

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

<!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配列から削除します。

画面表示

5. まとめ

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