Blog

javascriptフレームワークのvue.jsを使ってみる③(簡単TODOリスト)

2017.05.09Cat:javascript

最近、気になっているvue.jsで今度は簡単なTODOリストを作ってみました。

ちなみに以前、書いた記事は以下になります。
javascriptフレームワークのvue.jsを使ってみる(入門編)
javascriptフレームワークのvue.jsを使ってみる②(ソート機能っぽいもの)

定番すぎるアプリ例ですが、やはり作ってみるとvue.jsの理解が深まったので、
とにかく何かを作ってみることは大事ですね〜

DEMO

TODOリスト

今回のTODOリストの機能はシンプルで、
・タスク作成、編集、削除
・タスク完了のチェック(checkbox)
・タスクの状態表示の切り替え(完了、未完、すべて)

JavaScript

データの保存

javascriptの3行目〜14行目
今回のTODOリストはデータはローカルストレージに保存しています。
そのデータの取得、保存の処理になります。
ここのソース自体はvueは関係ありません。

初期設定

javascriptの18行目〜22行目
このTODOリストのデータをvueで扱うために、
todosにtodoStorage.get()を格納し、
newTaskは新しいタスクを作成する時の値で、初期は空に、
filterTaskはタスクの切り替えで使用する値で、初期値はallに設定しておきます。

watch

javascriptの23行目〜30行目
watchは、監視し、値が変更がされた時に対応するものです。
今回は、todosに変更があった場合、ローカルストレージに保存しています。
オブジェクトの子要素に変化があった時も対応させたいのでこのような書き方になっています。

タスク作成

html(タスク作成部分)

javascriptの51行目〜60行目
タスクの作成addTaskの処理になります。
空の場合は処理を止めており、
作成された場合、todosのデータに、値をpushで追加します。
最後に、newTaskの値を空にしておきます。

タスクの表示

javascriptの32行目〜48行目
todosのデータを、filterTaskの値によって、新たな配列データを作成し、タスクを表示しています。
表示方法は下記htmlになります。

html(タスク表示部分)

v-forを使用し表示しています。
v-modelを使用し値を代入しているので、タスクの編集は特別な処理は必要なく、値が変更されたら保存されるようになっています。

タスクの削除

タスクの削除は、5行目のv-on:click=”deleteTask(todo)”になります。
jsは、
javascriptの61行目〜63行目
引数todoを用いて、todosデータからsliceで削除します。

説明がかなりざっくりとしていてわかりにくいかもしれませんが、
これでTODOリストの完成です。

やはりこういうアプリ系のものはjQueryで作るより、vueのようなフレームワークを使うほうがスッキリしていていい感じがします。
なにより、データの双方向バインディングと謳っているだけありその辺りはすごいスムーズです。

一応TODOリストのHTMLを載せておきます。

全体のHTML

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ