v-kansai Vue.js/Nuxt.js meetup #13 に参加してきました

今回は関西の Vue.js / Nuxt.js 関連のイベントを開催するコミュニティ v-kansai 様が主催するmeetupに参加してきました

西田将幸

2020.01.16

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

西田@大阪です

今回は関西の Vue.js / Nuxt.js 関連のイベントを開催するコミュニティ v-kansai 様が主催する meetupに参加してきました！

Vue.Draggable で手軽にリストをドラッグ&ドロップで並び替え

Torello のようなアプリを作る時に使える
Vue.draggable
- バインドしておけば、リアクティブに並び替え可能
- Soratable.jsの機能を利用している
- 並び替えが容易
導入と使い方
- v-model ディレクティブで配列を指定
- D & Dして並び替えが行われたら、dataも変更される
- groupを合わせると複数列にまたがるの要素の入れ替えも可能
タグはデフォルト div だが ul にも変更できる
タッチデバイスでは誤作動する
- handleプロパティでドラック可能な要素を指定して回避
イベント発火時に処理を追加できる
- move
- @start
- @end
- @add
質疑応答
- Q. スクロールする場合は？
- A. ちゃんと設定すれば Vue.draggable だけで追従する
- Q. テーブルでやりたい場合は？
- A. 行(tr)ごとにドラッガブルを設定すればいける

Vuexは便利だけど治安が悪くなりがち
- 巨大化する state ... ゴミ箱と化す store...
stores/ 以下におく
- もともとは Component にあった
moduleを分けた
直接 mutations を使わず、actionsを使う
mutationは同期的、actionは非同期も可なので
createNamespaceHelpersを使おう
質疑応答
- Q: Nuxtを使わない理由はありますか？
- A: 好みです！
- Q: Vuex は TSの恩恵ある？
- A: ないです。mapとかでつないだらきれちゃうので

資料公開予定

資料が公開されたら追記します

Lighthouse とは？
- Webパフォーマンス、アクセシビリティ、SEO周りのテストができるサービス
- Chrome拡張が提供されている
- PWA評価もできる
Lighthouse CI
- コマンドベースで使える
- githubで公開されている
- Light house の実行結果は一時的に Lighthouseが保持してくれる
- npm でインストール可能
- 設定はjsでかける
- サーバーをわざわざたてなくても staticDistDirオプションでいける
JSでコンフィル書きたい場合は module.exportsする
各種CIとの連携はコンフィグのサンプルがある
ページが増えると遅くなるので、どのページを対象とするかは検討が必要
質疑応答
- Q. API含めたらどうなる？
- A. SSRとかなら100点はむり。非同期で呼ぶ分にはスコアはさがらない