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

西田@大阪です

今回は関西の 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規約を作った話

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

Introduce to Pinia

資料公開予定

posva/pinia: ?Automatically Typed, Modular and lightweight Store for Vue using the composition api with DevTools support

• Composition API を利用して store がどうあるべきか追求するためのプロジェクト
• Vue Router のコアコミッターがやってる
• Composition APIとは？
  • Vue 3で追加される目玉のAPI
  • Vue3 で追加されるけど今でもgithubで公開されてて今でも使える
  • 機能を要素ごとにまとめれる
  • this地獄がなくなる
  • 関数を外のファイルに切り出せる？
  • mixinでもできたけど、関数名かぶったりであんまりつかわない
• 特徴
  • 軽量
  • state と getterだけ
  • ssrサポート
  • devtoolsサポート
• vue3.0出てきてから Vuex 以外の Store を試すのも楽しいかも

Nuxt.js のプロジェクトを Lighthouse CI に乗せる

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

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

SSAEのための Vue.js & UIKit

• Vue.js と UIKit(CSSフレームワーク) が爆速
• 人に魅せるのというのは奥が深い
• 記憶コストが低いことは爆速開発において重要
• 接頭辞があるのがよい
• npm install uikitでインストールできる
• 質疑応答
  • Q. CSSフレームワークの中でなぜ UIKit?
  • A. CSSフレームワーク使っても結構がりがり書くので軽量なのがよかった

最後に

雰囲気もよく質問にも丁寧に答えていただきとても勉強になりました。発表者の方の知見がすごく、皆さんアクティブに勉強会に参加されてて楽しかったです。関西でもVueの勢いを感じました。また開催されるなら次も参加してみたいと思います