今回はVue.jsでTodo簡単なTodoアプリを作っていきたいと思います。
今回はプロジェクトは既に作成されているという前提で始めていきます。
プロジェクト作成がまだの方はこちらを参考にしてください。
今回は画像のようにTodoの追加、完了、削除までを実装しています。今後、期限の設定やTodoの編集もできるようにしたいと思います。
実装のコードは以下の通りです。
C:/npm_sample/src/App.vue
<template>
<div id="app">
<h1>ToDo List</h1>
<input type="text" v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">Add</button>
<ul>
<li v-for="(todo, index) in todos" :key="index" :class="{ completed: todo.completed }">
{{ todo.text }}
<button @click="toggleCompleted(index)">{{ todo.buttonText }}</button>
<button @click="deleteTodo(index)" class="deleteButton">削除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: [],
}
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
// 新しいToDo項目を追加するとき、buttonTextプロパティを含めます
this.todos.push({ text: this.newTodo, completed: false, buttonText: '完了' });
this.newTodo = ''; // フィールドをリセット
}
},
toggleCompleted(index) {
// 特定のToDo項目のcompleted状態とbuttonTextを更新
this.todos[index].completed = !this.todos[index].completed;
this.todos[index].buttonText = this.todos[index].completed ? '戻す' : '完了';
},
deleteTodo(index) {
if (window.confirm("本当に削除しますか？")) {
this.todos.splice(index, 1);
}
}
}
}
</script>
<style>
#app {
max-width: 600px;
margin: 0 auto;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
input[type="text"] {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
width: 70%;
margin-right: 5px;
}
button {
background-color: #4CAF50; /* 緑色のボタン */
border: none; /* 枠線なし */
color: white; /* テキスト色 */
padding: 10px 15px; /* パディング */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s; /* ホバー効果のためのトランジション */
cursor: pointer; /* マウスカーソルを指に */
border-radius: 4px; /* 角を丸く */
}
button:hover {
background-color: #45a049; /* ホバー時に少し暗く */
}
.deleteButton {
background-color: rgb(243, 24, 24); /* 緑色のボタン */
border: none; /* 枠線なし */
color: white; /* テキスト色 */
padding: 10px 15px; /* パディング */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s; /* ホバー効果のためのトランジション */
cursor: pointer; /* マウスカーソルを指に */
border-radius: 4px; /* 角を丸く */
}
.deleteButton:hover {
background-color: #931a1a; /* ホバー時に少し暗く */
}
.completed {
text-decoration: line-through;
}
ul {
list-style-type: none; /* リストのスタイルをなしに */
padding: 0;
}
li {
margin: 8px 0;
}
</style>
<template>セクション
<div id="app">: アプリケーションのルート要素です。この中に全てのHTMLマークアップが含まれます。<input type="text" v-model="newTodo" @keyup.enter="addTodo">: ユーザーが新しいToDo項目のテキストを入力するフィールドです。v-modelディレクティブを使って、newTodoデータプロパティと双方向バインディングします。@keyup.enterは、ユーザーがエンターキーを押下したときにaddTodoメソッドを呼び出すためのイベントリスナーです。<button @click="addTodo">Add</button>: ユーザーがクリックすることで新しいToDo項目を追加するボタンです。@clickは、ボタンがクリックされたときにaddTodoメソッドを呼び出します。<ul>内の<li>要素: ToDo項目のリストを表示します。v-forディレクティブを使って、todos配列の各項目に対してリストアイテムを生成します。@clickを使用してtoggleCompletedとdeleteTodoメソッドを各ボタンに紐付け、{{ todo.text }}でToDoテキストを表示します。
<script>セクション
data()メソッド: アプリケーションの状態を管理するためのデータオブジェクトを返します。この例では、newTodo（新しいToDo項目のテキスト）、todos（ToDo項目の配列）が含まれます。methodsオブジェクト:addTodoメソッドは、入力フィールドから新しいToDo項目を追加します。toggleCompletedメソッドは、特定のToDo項目の完了状態を切り替えます。deleteTodoメソッドは、特定のToDo項目を削除します。deleteTodo内でwindow.confirmを使用し、削除前に確認ダイアログを表示します。
<style>セクション
- スタイル定義はアプリケーションの見た目（スタイリング）をカスタマイズするために使用されます。例えば、ボタンや入力フィールドのデザイン、ToDo項目が完了状態のときのテキストの装飾（取り消し線）などが設定されています。
コメント