はじめに
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の可能性を探ってみてください。