題目「Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える」で v-kansai meetup に登壇してきました

2020.01.22

k-so16

題目「Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える」で v-kansai meetup に登壇してきました

こんにちは。最近、 YouTube で SUPER GT の実況動画を見始めた k-so16 です。白熱したレースは見ているこちらも興奮しますね(笑)

1/15 に開催された v-kansai Vue.js/Nuxt.js meetup #13 に「Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替える」という題目で登壇してきました。新年最初の登壇でした(笑)

本記事では、新たな気分で参加した v-kansai meetup の様子をご紹介します。

発表内容

ドラッグ&ドロップによるリストの並び替えを Vue.js で簡単に実現するためのライブラリ Vue.Draggable の使い方について発表してきました。発表資料は こちら から閲覧できます。

発表概要は以下の通りです。

Vue.Draggable の概要と長所
- イベントハンドラや並び替え処理を記述する必要がないことを説明
Vue.Draggable によるドラッグ&ドロップの実現方法の紹介
- 実際の動作とコード例で簡単に記述できることを説明
複数のリストをまたいだ並び替えの実現
- Trello のような To Do リストを実現するような場合に有用なことを説明
ドラッグ可能な部分の制御
- ドラッグ可能なパーツを制限することでタッチデバイスでスクロール操作とリストのドラッグを区別
ドラッグ&ドロップの際のイベントハンドラを追加
- 並び替えの際に前処理や後処理を挟み込むことが可能
実際の利用例
- 自身で作成したアプリケーションでの動作を説明

昨今スマートフォンやタブレットなどのタッチデバイスが増えていることもあり、アプリケーションによってはドラッグ&ドロップによる操作が必要不可欠になると考えられます。 Web アプリケーションでドラッグ&ドロップを実現する場合、 HTML5 の Drag and Drop API を利用して実現できますが、イベントハンドラに加えて並び替えの処理を自分で記述する必要があります。

Vue.Draggable を利用すれば、ドラッグ&ドロップ時のイベントハンドラや並び替えの処理を書くことなく、 Vue.Draggable コンポーネントのスロットに並び替えたいリストを入れるだけで実現でき、ドラッグ&ドロップの操作の実装にかかる労力を大幅に削減できます。単一のリストだけでなく、 To Do リストのように、複数のリストにまたがって移動させる場合も、それぞれのリストを囲む Vue.Draggable のコンポーネントに同じ group プロパティを指定するだけで実現できます。

Vue.Draggable は使い方が簡単で、なおかつ融通も効くライブラリなので、 Vue.js でドラッグ&ドロップによるリストの操作を実装する際に、非常に役立ちます。私自身、旅行で回る場所の順序をドラッグ&ドロップで簡単に入れ替えるアプリケーションを作るために Vue.Draggable を利用したので、実際に作ったアプリケーションの挙動も紹介しました。

全体の概要

今回のセッション枠、 LT 枠ともに面白い内容の発表を聴講できました。 Lighthouse や Pinia は初めて名前を耳にしたので、大変勉強になりました。

セッション枠
- Vuex の規約を作った話
- Pinia の紹介
- Lighthouse CI で Nuxt.js のプロジェクトの評価
LT 枠
- サーバーサイドエンジニアのための Vue.js と UIKit

個人的には、 Vuex の規約の話が大変面白く感じました。 Vuex を使うことで、離れたコンポーネント同士で容易に値のやり取りができますが、書き方が悪いと読みづらいコードになりがちです。例えば、 state が肥大化したり、 modules を切り分けず、単一の Store に全部記述したりすることが挙げられます。 Vue.js に慣れていない頃を振り返ると耳が痛い話ですね(笑)

Vuex のコードが読みづらいと、何の値なのか、どこで呼ばれているかなどが分かりづらくなり、保守性が低くなります。チームでの開発において、可読性や保守性などが低くなることを避けるために、 Vuex の規約を考えたとのことでした。この発表では、以下の 3 点を満たしつつ、あまり頑張らない規約を作ることが目標でした。

Store の整理
コンポーネントがどの Store を参照しているか明確化
Store.hoge のようなアクセスを禁止

紹介された規約の概要は次の通りでした。

stores/ 以下に Vuex 関連のファイルを配置
- 配置場所を統一する
modules を切って各 module ごとにファイルを生成
mutations は actions 経由で呼び出し
- 直接 mutations を呼び出さない
createdNamespacedHelper を利用して Store とやり取り
- Store.hoge のような書き方をしない
- import Store from '@/stores/store'; のような書き方をしない

直感的に理にかなっていて、なおかつキツい規約でもないと感じたので、導入しやすい規約のように感じました。この規約をベースにして、細かい箇所をつめていく場合にも有用そうです。

私自身まだ createdNamespacedHelper の使い方をしっかり理解できていないので、その点については勉強が必要です。

所感

今回は質疑応答の議論も盛り上がったこともあり、発表内容に需要があったという手応えが感じられました。ドラッグ&ドロップによる並び替え操作の実装はそれなりに需要があるようで、興味を持って聞いていただけたと思います。

発表自体も、時々詰まったりしてぎこちない話し方にはなってしまいますが、少しずつ慣れてきたこと、会場の規模が大きすぎないこともあり、あまり緊張せずに発表できたかと思います。今後、発表内容の質だけでなく、話し方の質も向上したいと思います。