Vue.js Tokyo v-meetup #5参加レポート
2017/10/4に開催されたVue.js Tokyo v-meetup #5 - connpassに参加してきました。
まずはスタッフの皆様お疲れさまでした。最高の誉め言葉としての「滞りなく」を贈りたいと思います。
その競争率の高さゆえ参加機会に恵まれなかったv-meetupですが、今回「ブログ書く枠」がたまたま空いたので参加できることに。以下はそのレポートとなります。
なお、当日のツイートは@kazuponさんが既に昨日のVue.js Tokyo v-meetup #5のTweetまとめました！を作ってくれていますので、そちらも合わせて参照ください。
今回は発表の多くがNuxt.jsがらみでしたが、ほぼ満員（一般参加枠80名）の会場で「Nuxtで作っている人？」という問いかけに手を挙げた人は10名程度。
自分もNuxt.jsは
ぐらいの知識しかなかったのですが、一連の発表を聞いて「次もしSPA案件があったら使ってみよう」という気になりました。
現場枠1: Nuxt.jsで業務システムを作った話@wakame_isono_
https://speakerdeck.com/wakameisono/nuxt-dot-jsdeye-wu-sisutemuwozuo-tutahua
VB.NET開発者からフロントエンドエンジニアになった自らを「WEB初心者」と自称する@wakame_isono_さんが、Nuxt.jsでの業務システム（ECサイトのバックヤード）開発でのノウハウを発表。
「業務システムあるある」での、
- 典型的な検索画面（上：検索条件入力、下：検索結果リスト表示）のMixinによる共通化
- 多数の入力項目のあるForm画面のVuex対応
など、派手さはないものの実体験に即した発表内容でした。
業務システムの開発では画面単位に担当者を割り当てるという方法で開発をスケールすることが多く、いきおいコピペで済ませてしまうことになりがちですが、それにキチンと向き合って共通化していこうとする姿勢は好感が持てました。
現場枠2: Vuejsを使ったシステムを一年半間運用した話 & Vueのバックエンドとして Firebaseを使った話@jkang
前半：（資料未公開）
後半：https://speakerdeck.com/urverispecial/vuefalsebatukuendotosite-firebasewoshi-tutahua
株式会社ABEJAのお二人によるリレー形式での発表。
前半は昨年3月にVue.js v1からスタートし、途中でv2へのマイグレーションを経て現在に至るまでのシステム開発・運用の経験談。
学習コストの低さからVue.jsを採用し、状態管理・イベントの複雑化が問題になったあとからVuexの導入という、まさに"Progressive Framework"を地で行くような話でした。
v2へのマイグレーションもMigration Helperでの指摘はごくわずかで大きな設計変更は無し、そして「何もしなくてもパフォーマンスが上がった」とのこと。
「Vue.jsは開発の立ち上がりがスムースで、あとから参加するメンバーのキャッチアップも早い」は本当に御意。
後半はSPAのバックエンドにはFirebaseがいいよ、という話。
AWSとの対比でとかく「高性能だけどとっつきにくい」イメージのある（個人の感想ですｗ）GCPですが、Firebase(BaaS)は一度まな板に載せてみるのはアリだと思います。
「Cloud Functionはデバッグが出来ないのが欠点でしたが、つい先週できるようになりました」は知らなかったのでありがたいです。
残り時間の都合で「データはフラット化！」の詳細が聞けなかったのが残念。FirebaseはJSON DBなのでRDBでのそれとはまた違ったノウハウや勘所が求められるなぁと思っている今日この頃なので。
現場枠3: Nuxt.js本格導入で遠回りしないためのTips@devneko
https://speakerdeck.com/dotneet/nuxt-dot-jsben-ge-dao-ru-deyuan-hui-risinaitamefalsetips
記事を読ませる系サイトとユーザ登録有りのそこそこな規模のサイトの2案件で実際にNuxt.jsを使用している@devnekoさんが、Nuxt.js導入でハマらないためのノウハウを伝授。
「まずはドキュメントを読みましょう」という基礎的な話から「何も考えないとJavascriptが肥大化するのでサイズを小さくするには」まで実践感ありありの内容でした。
「Nuxt.jsは本当に簡単にSSRできる。解決できない致命的な問題は発生していない」とのことでしたが、そのためにはnuxt.config.jsの「研究」が大事なようです。
なお、本人曰く「黒魔術」＝AsyncDataの困りごとを解決するヘルパー"nuxtend"はこちらで公開されています。
LT1: Nuxt.jsが掲げる"Universal Vue.js Applications"とは何者なのか@_ishkawa
「SWIFT実践入門」の著者でもある@_ishkawaさんによる発表。
自分を含めこれからNuxt.jsを始めようとする人がとっかかりにするにはベストの内容だと思いました。
LT2: NuxtなしでVue App作る時に乗り越えるべきnの壁(n=5)@vwxyutarooo
https://www.slideshare.net/vwxyutarooo/nuxt-vue-app-5
マンガZEROを作った@vwxyutaroooさんがNuxt.js無しでSSRサイトを作った「恨み辛み妬み」の発表。
vue-hackernews 2.0を参考に一生懸命頑張ったのですが、
- metaタグ
- vue-metaを使った→Nuxtに入ってた
- Google Analytics
- vue-analytics使った→Nuxtに(ry
みたいな感じだったそうで。
HackerNewsの404ページが「真っ白」というのは言われるまで気づきませんでしたが、これもNuxtなら簡単に対応できるとのこと。
