Vue.jsに触れよう4
公開日: 2024/12/26
Vue.jsを使ったタスク管理アプリを作成していきたいと思います。
1. 実際のコード
使ったもの：Windows11、メモ帳
以下が実際にメモ帳に書いたコードになります。
実行すると、このような画面ができます。
以下のようにフォームにタスクを記入してクリックすると、タスクを追加することができます。
「Remove」で削除もできます。
以下が実際にメモ帳に書いたコードになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple ToDo App with Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>ToDo List</h1>
<input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task">
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Remove</button>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
newTask: '',
tasks: []
},
methods: {
addTask: function() {
if (this.newTask.trim() !== '') {
this.tasks.push(this.newTask.trim());
this.newTask = '';
}
},
removeTask: function(index) {
this.tasks.splice(index, 1);
}
}
});
</script>
</body>
</html>実行すると、このような画面ができます。
以下のようにフォームにタスクを記入してクリックすると、タスクを追加することができます。
「Remove」で削除もできます。
2. 実際のコードの説明
<!DOCTYPE html>
<html lang="en">DOCTYPE宣言をして、言語は英語に設定しています。
今回は単一コンポーネントは使用していません。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple ToDo App with Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>文字コードはUTF-8を使用しています。
「<meta name="viewport" content="width=device-width, initial-scale=1.0">」で画面の幅を調整することができます。
titleタグで上記に表示させるタイトルを出力させます。
「<script…」でvue2を使えるようにしています。
・bodyタグについて
「<div id="app">」でhtmlでvueの構文を使えるようにしています。 <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task">
<ul>
<li v-for="(task, index) in tasks" :key="index">
{{ task }}
<button @click="removeTask(index)">Remove</button>
</li>
</ul>input要素なので、ToDoリストを検索する場面のコードです。
v-modelでnewTask変数とタグの値を同期しています。
エンターを押すと、addTaskメソッドが実行されます。
「<li>」タグでv-forが使われています。tasks配列をforでまわして中身を表示させています。
tasks配列はaddTasksメソッドで使っています。
buttonタグで、クリックしたらremoveTaskメソッドが適応される仕組みになっています。
タスクを消すボタンですね。
・scriptタグ内のメソッドについて
methods: {
addTask: function() {
if (this.newTask.trim() !== '') {
this.tasks.push(this.newTask.trim());
this.newTask = '';
}
},
removeTask: function(index) {
this.tasks.splice(index, 1);
}
}・addTaskメソッドについて
「.trim()」は3. まとめ
いかがだったでしょうか。
これで、ToDoアプリが完成しました。
新しいタスクを入力してEnterキーを押すと追加され、タスクの横にある削除ボタンをクリックするとタスクが削除されます。
このコードでは、Vue.jsを使って簡単なデータの双方向バインディングやリストの描画を行っています。
JavaScript部分では、dataオブジェクトにnewTask（新しいタスクを格納する変数）とtasks（タスクの配列）を定義し、methods内でタスクの追加と削除を行う関数を定義しています。
是非、この例を試してみてください。Vue.jsを使った簡単なアプリを作ることで、Vue.jsの基本的な概念を理解するのに役立ちます。