はじめに
コジマです。
一週間以上投稿してませんでした。
何してたかというと、
Vue.jsを次の職場でやるかもーな話だったのでちょっとかじっていました。
学習の一環として登竜門？的なTODOアプリをさっくり作りました。。
参考書籍
この本を参考にして作りました。
基礎から学ぶ Vue.js
仕様
こんな仕様で作っていきます。
- タスクを追加するための入力フォームを作成する
- 「登録」ボタンをクリックするとタスクが登録される
- タスクが存在しないときはメッセージを表示
- タスクのデータはID(id),タスク名(task)、進捗度(progress)を持つ
- 「+」ボタンをクリックすると進捗が10％プラスされる
- 「-」ボタンをクリックすると進捗が10％マイナスされる
- 「完了」ボタンをクリックすると取り消し線で消す
- 「削除」ボタンをクリックするとリストから削除する
- 進捗100％は完了とみなす
とてもとてもシンプルです。
見た目もあまりこだわりません。
Vue.jsの機能を用いることに重点を置いています。
ソースコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TODOアプリ</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div id='app'>
<h1>TODOアプリ</h1>
<input type="text" v-model="name"></input>
<button v-on:click="register">登録</button>
<p v-if="todos.length == 0">タスクの入力をしてください</p>
<ul>
<li v-for="(todo, index) in todos"
v-bind:key="todo.id">
<span v-bind:class="{done: todo.progress == 100}">
{{ todo.id }} {{ todo.name }} {{ todo.progress }}%
</span>
<button v-on:click="plus(index)" v-bind:disabled="todo.progress == 100">+</button>
<button v-on:click="minus(index)" v-bind:disabled="todo.progress == 0">-</button>
<button v-on:click="done(index)">完了</button>
<button v-on:click="remove(index)">削除</button>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
JavaSctipt
var app = new Vue({
el: '#app',
data: {
name: '',
todos: [
{ id: 1, name: "TEST", progress:0 }
]
},
methods: {
// 登録
register: function(){
// 空の場合にアラート
if(this.name == "" || this.name == null){
alert("タスクの入力をしてください")
return 0
}
// idの最大値を取得
var max = this.todos.reduce(function(a, b){
return a > b.id ? a : b.id
}, 0)
// 登録する
this.todos.push({
id: max + 1,
name: this.name,
progress: 0
})
},
// 進捗+
plus: function(index){
// 10%増やす
this.todos[index].progress += 10
},
// 進捗-
minus: function(index){
// 10%減らす
this.todos[index].progress -= 10
},
// 完了
done: function(index){
// 100%にする
this.todos[index].progress = 100
},
// 削除
remove: function(index){
// 削除する
this.todos.splice(index, 1)
}
}
})
CSS
/* 取り消し線 */
.done {
text-decoration: line-through;
}
動作デモ
さいごに
意外とさっくり作れました。
実務で触れたらもっともっと奥深いものがあるんだろうな。
これからも頑張りますー！
ソースコード乗っけただけなので、あくまでも自分の作業報告という感じです。
細かいところの解説行き時なんかは別で積み上げていきたいですね。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
以上、コジマでした。
