おひさしぶりです。
技術支援チームのトゥオンと申します。
近年にWeb Applicationが発展して、DeveloperがFrontEndのフレームワークを気にしています。そして、大きなIT企業はJS フレームワークを発表しました。例えば、React JS (Facebook), Angular JS(Google), Vue JS(Google)です。
最近、仕事でFrontEndのタスクが増えてきていて、一つのJSフレームワークを勉強したいと思いますので、 VueJSを選びました（選んだ理由が特にないです、検索した時にVueJSがすぐに出ましたので、選びました）。
勉強するときに実際に体験しないと、忘れしやすいと思いますので、前回に紹介したこと（「ウェブ開発におけるDrag/Dropについて」）と含めて、小さいタスク管理ツールを開発します。皆さんと一緒にやりましょうか。
やりましょう
勉強すること
例え小さなツールでも、正しく理解してからでないと開発できませんので、以下のリファレンスをちょっと見てみましょう
【Drop/Drag】
【http://tech.aainc.co.jp/archives/11337】
【VueJS】
今回の目的は VueJSを触ることです、全部のリファレンスを勉強しなくて、 Introductionのところだけを勉強しましょう。
こちらのリンクには詳しく書かれています。（英語のリファレンス）
【https://vuejs.org/v2/guide/index.html】
サンプルを開発しましょう。
[Drop/Drag]と[VueJS]を試してみたいので、今回のサンプル小さいタスク管理ツールを作っていきます。
ツールの目的は
- タスクを作る
- タスクの状態を変更出来る
- タスクが削除できる
Layoutを作りましょう
あまり奇麗じゃないLayoutですが、以下のLayoutのコード書きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
<!DOCTYPE html> <html lang="en"> <head> <title>タスク管理</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> </script> <style> .col-sm-3 { height: -webkit-fill-available; overflow: scroll; } /* Set gray background color and 100% height */ .sidenav { background-color: #f1f1f1; } .deleted-box { position: fixed; bottom: 20px; left: 50%; margin-left: -58px; } /* On small screens, set height to 'auto' for sidenav and grid */ @media screen and (max-width: 767px) { .sidenav { height: auto; padding: 15px; } .row.content { height: auto; } } .task-view { border-style: solid; margin: 1px; } .task-view textarea { font-weight: bold; resize: vertical; } .task-view.darkorchid { border-color: darkorchid; } .task-view.darkorchid textarea { color: darkorchid; } .task-view.green { border-color: green; } .task-view.green textarea { color: green; } .task-view.red { border-color: red; } .task-view.red textarea { color: red; } </style> </head> <body> <div id="task-manager" class="container-fluid"> <div class="row content"> <div class="col-sm-3 sidenav"> <h4>考えてるタスク</h4> <button type="button" class="btn btn-info">Add</button> <div class="row task-view"> <textarea class="form-control" rows="3"> </textarea> </div> </div> <div class="col-sm-3 "> <h4>やっているタスク</h4> </div> <div class="col-sm-3 sidenav"> <h4>完了したタスク</h4> </div> <div class="col-sm-3 "> <h4>キャンセルしたタスク</h4> </div> <div class="deleted-box"> <a class="btn btn-info btn-lg"> <span class="glyphicon glyphicon-trash"></span> Trash </a> </div> </div> </div> </body> </html> |
こんなイメージになります。
vue js を挿入しましょう
VueJSのインストール
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!--Vue インストール--> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> $(function () { //TaskItem Object を定義する var TaskItem = function () { var self = this; self.content = ""; //タスクのタイプ: 1-考えてるタスク、2-やっているタスク、3-完了したタスク、4-キャンセルしたタスク、5-削除されたタスク //デフォルトは「1-考えてるタスク」です self.type = 1; }; //最初にタスクリストです var taskList = []; // Vue Object を定義する new Vue({ el: '#task-manager', data: { taskList: taskList }, methods: { addNewTask: function (event) { this.taskList.unshift(new TaskItem()); } } }); }); </script> |
Vueを使って、Layoutに入れる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<div id="task-manager" class="container-fluid"> <div class="row content"> <div class="col-sm-3 sidenav"> <h4>考えてるタスク</h4> <button v-on:click="addNewTask" type="button" class="btn btn-info">Add</button> <div v-for="taskItem in taskList" v-if="taskItem.type == 1" class="row task-view"> <textarea class="form-control" rows="3" v-model="taskItem.content"> </textarea> </div> </div> <div class="col-sm-3 "> <h4>やっているタスク</h4> <div v-for="taskItem in taskList" v-if="taskItem.type == 2" class="row task-view darkorchid"> <textarea class="form-control" rows="3" v-model="taskItem.content"> </textarea> </div> </div> <div class="col-sm-3 sidenav"> <h4>完了したタスク</h4> <div v-for="taskItem in taskList" v-if="taskItem.type == 3" class="row task-view green"> <textarea class="form-control" rows="3" v-model="taskItem.content" v-on:change="storage"> </textarea> </div> </div> <div class="col-sm-3"> <h4>キャンセルしたタスク</h4> <div v-for="taskItem in taskList" v-if="taskItem.type == 4" class="row task-view red"> <textarea class="form-control" rows="3" v-model="taskItem.content" v-on:change="storage"> </textarea> </div> </div> <div class="deleted-box"> <a class="btn btn-info btn-lg"> <span class="glyphicon glyphicon-trash"></span> Trash </a> </div> </div> </div> |
上記のコードを書きましたら、実装をすると、「Add」ボタンを押す時に、タスクが作成だれます。
Drag/Dropを購入しましょう
Script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script> $(function () { var TaskItem = function () { var self = this; self.content = ""; self.type = 1; }; var taskList = taskList = []; // Create a root instance new Vue({ el: '#task-manager', data: { taskList: taskList, draggingTaskItem: null, }, methods: { addNewTask: function (event) { this.taskList.unshift(new TaskItem()); }, //Drag Drop dragover: function (ev) { console.log('dragover'); }, drop: function (taskGroupType, ev) { console.log('drop'); console.log('Task Item: ' + this.draggingTaskItem.content); this.draggingTaskItem.type = taskGroupType; }, dragstart: function (/** TaskItem **/ taskItem, ev) { console.log('dragstart'); this.draggingTaskItem = taskItem; }, dragend: function (/** TaskItem **/ taskItem, ev) { console.log('dragend'); this.draggingTaskItem = null; } } }); }); </script> |
Layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<div id="task-manager" class="container-fluid"> <div class="row content"> <div class="col-sm-3 sidenav" @dragover.prevent @drop="drop(1)" @dragover.prevent @dragover="dragover()"> <h4>考えてるタスク</h4> <button v-on:click="addNewTask" type="button" class="btn btn-info">Add</button> <div v-for="taskItem in taskList" v-if="taskItem.type == 1" draggable="true" @dragover.prevent @dragstart="dragstart(taskItem)" @dragover.prevent @dragend="dragend(taskItem)" class="row task-view"> <textarea class="form-control" rows="3" v-model="taskItem.content"> </textarea> </div> </div> <div class="col-sm-3 " @dragover.prevent @drop="drop(2)" @dragover.prevent @dragover="dragover()"> <h4>やっているタスク</h4> <div v-for="taskItem in taskList" v-if="taskItem.type == 2" draggable="true" @dragover.prevent @dragstart="dragstart(taskItem)" @dragover.prevent @dragend="dragend(taskItem)" class="row task-view darkorchid"> <textarea class="form-control" rows="3" v-model="taskItem.content"> </textarea> </div> </div> <div class="col-sm-3 sidenav" @dragover.prevent @drop="drop(3)" @dragover.prevent @dragover="dragover()"> <h4>完了したタスク</h4> <div v-for="taskItem in taskList" v-if="taskItem.type == 3" draggable="true" @dragover.prevent @dragstart="dragstart(taskItem)" @dragover.prevent @dragend="dragend(taskItem)" class="row task-view green"> <textarea class="form-control" rows="3" v-model="taskItem.content"> </textarea> </div> </div> <div class="col-sm-3 " @dragover.prevent @drop="drop(4)" @dragover.prevent @dragover="dragover()"> <h4>キャンセルしたタスク</h4> <div v-for="taskItem in taskList" v-if="taskItem.type == 4" draggable="true" @dragover.prevent @dragstart="dragstart(taskItem)" @dragover.prevent @dragend="dragend(taskItem)" class="row task-view red"> <textarea class="form-control" rows="3" v-model="taskItem.content"> </textarea> </div> </div> <div class="deleted-box" @dragover.prevent @drop="drop(5)" @dragover.prevent @dragover="dragover()"> <a class="btn btn-info btn-lg"> <span class="glyphicon glyphicon-trash"></span> Trash </a> </div> </div> </div> |
これまでに大体終わりましたが、問題はタブまたはブラウザを閉じる時に、タスクのデータが消えます。
ですので、localStorageを使って、コードをちょっとだけアップデートしました。
参考したい場合、以下のリンクを参考してください。
【https://jsfiddle.net/xmrw50ka/】
最後の結果はこんな感じです。
さいごに
VueJSとDrop/Dragを実際に体験して、HTMLとVue.JSの内訳も書きました。皆さんはVueJSとDrop/Dragの使い方がなんとなく分かりましたね。これから、色々なことをVueJSで展開出来ると思います。
以上です。ありがとうございました。
