参加レポート：v-okinawa Vue.js/Nuxt.js meetup #1 初心者歓迎

イベントレポート Vue.js Nuxt.js

Vue.js/Nuxt.js の勉強会に参加してきました．このコミュニティは，Vue.js 大好きなまぁし（@chocodogmagic）さんが，沖縄のフロントエンジニアのスキルアップや，エンジニア同士で情報交換できる場を作りたい！という想いから生まれました．

v-okinawa.connpass.com

会場の様子です．

f:id:yudy1152:20190721194039p:plain:w300

目次

Session 1：Vue.js 初級編

登壇者：まぁし（@chocodogmagic）さん

Vue.js の特徴として以下の 3 つが挙げられていました．

  • 親しみやすい
    • HTML, CSS, JavaScrip を触ってた人ならハードルは低い
    • jQuery からの移行がしやすい
  • 融通が効く
    • ページ内の一部分だけの導入も可能
    • ページ内の一部分から，ページ全体で使って，というように段階的に導入可能
  • 高性能
    • jQuery より軽い
    • DOM の切り替えが早い
    • ユーザーにとって使い勝手が良い

また，Vue.js は，ユーザーが操作したものを（データの変更など）を表示へ反映させるが得意，ということで，データバインディングについてデモをしながら説明してくださいました．

とても丁寧でわかりやすい説明で，Vue.js への愛が感じられました！

Session 2：Nuxt.js に GraphQL を導入しようか検討している話

登壇者：カンボ（@kanbo0605）さん

Rest API でサービスを作っていたけれども，エンドポイントが増えてきたため，GraphQL を導入しようか検討したお話です．GraphQL のメリットや，導入を検討した際に利用したライブラリなどの紹介がありました．

  • Nuxt.js で GraphQL を利用するため，Apollo Client というライブラリを利用
  • GraphDoc でドキュメントを自動生成

speakerdeck.com

残念ながら学習コスト面や開発スピードなどを踏まえた結果，導入しなかったようですが，この知見は今後に活かせそうですね！

LT 1：Vue.js でつまづいた話

登壇者：やこ（@_may_six）さん

Laravel 経験半年ほど，Vue.js は最近ちょっとなやこさんは，ハマったポイントの発表でした．

その1

v-for で回してメッセージを表示しようとしたけどエラーになり，Vue インスタンスを作成するところを見ても正しいはずで，悩んだとのことです．結果，HTML 要素で <table> タグが抜けたまま <tr> で回そうとしていた，とのことで，ちゃんとリファレンスを読んでおけばよかった・・・とのことでした．

（以下は，スライドに載っていたリファレンスの該当箇所と思われるところ） jp.vuejs.org

その2

Laravel の Blade ファイルで Vue.js を利用しする時には {{ }} の前に @ が必要で，@{{ }} と書かないといけなかった，というお話しでした．これもちゃんとリファレンスを（以下略，笑）．

（以下は，スライドに載っていたリファレンスの該当箇所と思われるところ） readouble.com

リファレンスを読むことの大切さに，改めて気づかされました！

告知！

やこさんは「tech美られでぃ」というコミュニティを運営されているとのことで告知されてましたが，なんと女性限定！残念ながら私は参加できず・・・が，応援してます！

tech-chura-lady.connpass.com

LT 2：Vuex で何を管理する方が良い？

登壇者：けけずん（@kkznch）さん

最近，ピアノ発表会で演奏してきたけけずんさんの発表です．（楽器演奏できる人，羨ましい・・・）

アプリケーションの状態管理を行うためのライブラリ「Vuex」についての発表でした．

speakerdeck.com

「バケツリレー地獄」ではドッと笑いが起きてました（笑）

Vuex をむやみに使うのではなく，どんなデータを扱うか，どんな時に扱うか，その使いどころを知ることができました！

LT 3：自作のライブラリについて

登壇者：ペン！（@tompng）さん

ペン！さんの発表では，サーバー側でデータの変更があった際に，即時反映されるというペン！さん自身の自作ライブラリを使ったデモがありました．デモでは，掲示板のアプリケーションを2つのブラウザ開き，片方の画面で変更を行うと，即時にもう片方のブラウザの表示が変更されたデータで反映される，というものです．どうやら Web ソケットを利用しているとのことでした．

以下がそのライブラリです．

github.com

自作ライブラリだなんて，脱帽ものです！

まとめ

実は今回の参加者の方々の中には学生さんも含まれており，若い人たちの学習意欲に刺激を受けました．普段はどちらかと言うとサーバーサイド寄りなことをしているので，Vue.js も勉強して LT に挑戦しようかな，と思わせてくれるイベントでした！