最近にわかに盛り上がっているのがPWA（Progressive Web App）です。PWAは固有の技術を指すキーワードではなく、モバイルWebアプリを作るためのベストプラクティスと言えます。
何回かに分けて、mBaaSを使ったPWAを作っていきます。前回のベースアプリに続いて、今回はタスク管理アプリとして完成させます。
更新処理の追加
タスク管理での更新と言えば、タスクを完了にする処理だと思います。そこでチェックボックスをチェックしたタイミングでステータスを完了（done）にします。
<ul v-for="task in tasks" :key="task.objectId"> <li> <input type="checkbox" v-model="task.done" @click="done(task, $event)" v-if="task.status == 'active'"/> {{ task.text }} </li> </ul>
この時のイベント、doneを作ります。
async done(task, event) { const checked = event.target.checked; await task .set('status', checked ? 'done' : 'active') .update(); await this.fetch(); },
this.fetchはリストを更新する処理です。初期表示処理、タスクの追加、削除などでも同様に呼び出します。
async fetch() { const tasks = await Task .equalTo('status', this.status) .fetchAll(); Vue.set(this, 'tasks', tasks); },
ステータス（this.status）はdataの中で定義します。デフォルトは active です。
data() { return { tasks: [], task: { text: null }, status: 'active' } },
表示の切り替え
ステータスを完了（done）にしたデータも見られるように、ステータスを切り替えられるようにします。
<ul> <li v-if="status == 'active'"> <strong>アクティブ</strong> </li> <li v-else> <span @click="changeStatus('active')">アクティブ</span> </li> <li v-if="status == 'done'"> <strong>完了</strong> </li> <li v-else> <span @click="changeStatus('done')">完了</span> </li> </ul>
このchangeStatusのイベントでは this.status を変更し、 this.fetch でリストを更新します。
async changeStatus(status) { this.status = status; this.fetch(); },
これだけでアクティブ、完了の一覧を切り替えられるようになりました。
タスクを削除する
ステータスが完了（done）になっているデータは削除できるようにします。一覧表示を少し変更します。
<ul v-for="task in tasks" :key="task.objectId"> <li> <input type="checkbox" v-model="task.done" @click="done(task, $event)" v-if="task.status == 'active'"/> {{ task.text }} <!-- 追加 --> <span v-if="task.status == 'done'" @click="destroy(task)"> (削除)</span> </li> </ul>
そしてdestroyイベントを作ります。タスクを削除し、リストを更新します。
async destroy(task) { await task.delete(); await this.fetch(); }
ここまでの処理でタスクの追加、更新、削除が完了しました。タスク管理としての最低限の機能は実装されています。
まとめ
タスク管理としての基本機能はできました。しかし、これではオフライン時の対応はできていません。次回から実際にデータをオフライン化対応させていきます。
ここまでのコードは NCMBMania/PWA-NCMB at v2 にアップロードしてあります。実装時の参考にしてください。
- その１ ベースの作成
- その２ タスク管理の完成
- その３ データ表示のオフライン化
- その４ 通信回数を減らす
- その５ タスク追加/更新/削除をオフライン化
- その６ WebAssemblyによるクライアントキーの隠蔽化
- その７ manifest.jsonとPWA化
