【Report】Vue.js Tokyo v-meetup #4

前回のmeetupに引き続き、v-meetup #4に参加してきた。
Vueは実務で使っていることもあり、参考になる点が多かった。特に関心をもったLTの内容についてメモ。

お仕事で Nuxt.js を使うか検討した話

前回もLTをされていたおいちゃんさん。
ご自身が開発に携わるECサイトでの技術選定プロセスと、その結果についてのお話。

Nuxt.js

Nuxt.jsはVueでサーバサイドレンダリングを実現するためのフレームワーク
Nuxtのルールに則って記述すれば、ルーティングなどの面倒な設定をNuxt側でよしなにやってくれる。
vue-server-rendererを使って素で実装する以上に、*.vueの開発に専念できる、というメリットがある。

技術を導入する前に考えること

対象のサービスにとって、ほんとうにSSRが必要か?ということを事前に検討されたとのこと。

  • SEO施策
  • SNSでページをシェアされるときもきちんと表示されたい

上記2点を考えた結果、SSRが必要、という結果になったそう。

SSRが必要かどうかはサービスの特性による。今回の場合は後者の理由がより重大なのかなと。

SSRかプリレンダリング

リクエストを受けてからレンダリングするのか、受ける前にするのか、について。
今回は、

  • データの変更をすぐにページに反映させたい
  • ユーザごとに異なる商品ページを表示させたい

というニーズがあり、リクエストを受けてからレンダリングしたい=SSRを選択する、という結果になったそう。

サービスの課題やニーズを考える → 解決方法を選ぶ、という流れが理想的ですばらしいと感じた。
技術選定にあたってはそのサービスにとって過不足がないか、という視点で考えることが大事。

結果

  • 設定の上書きはできるものの、Nuxtが利用するライブラリをまるっと差し替えることが難しい
  • 意図しない挙動がでたときにNuxtの内部を調査する必要がでてくるので、不具合の特定が難しい

というデメリットに鑑みて、今回はNuxt.jsの採用を見送ったそう。

Vue.jsのTransitionでいい感じのアプリにする

qiita.com

Vueのトランジションコンポーネントを使って、アニメーションを楽に実装するお話。

アニメーションを与えたい要素をtransitionコンポーネントでラップすると、v-if, v-showの状態に連動してtransitionクラスを付け外ししてくれる。
リスト型のコンポーネントに対してはtransition-groupを使う。
自動でクラスを付け替えてくれるところがミソで、実装者としてはCSSの記述に専念できる。
JSで.is-visibleとか.is-hiddenとか書かなくていいのほんとうにすばらしい(涙)BEMの規約から外れるのも、JS側にクラスの記述が増えるのも心底いやだったので、大変ありがたい。

Vueコンポーネントユニットテスト

Vueコンポーネントユニットテスト実現方法についてのお話。

Vueのユニットテストでは、

など困っちゃうシーンがいくつかある。簡単にテストを書くためにライブラリを導入してはどうか?と検討されたそう(テストライブラリという考えに今まで至らなかったので、この時点で私は白目を剥いた)。
公式のテストライブラリとしてvue-test-utilsが目下開発中。
avoriazの作者がメインとなって開発している。APIの互換性もあるので、今から導入するならばavoriazがベターとのこと。

VueConf 2017 参加レポート

dev.oro.com

先日ポーランドにて行われた、世界初の公式Vue.jsカンファレンスの参加レポート。

Evan氏としては今後SSRに注力していくらしい。今回のmeetupでよく取り上げられていたことからも、その熱をうかがい知ることができた。
また、注目のトピックとしてveturがあげられていた。

  • VSCode拡張機能
  • *.vueファイルのLinter、シンタックスハイライトなどのサポート機能
  • 将来的にはロジックの部分を独立させ、様々なエディタで使用できるようにする

とのことで、期待。というかもうVSCodeに乗り換えようかな…

おわりに

そのほか、ネイティブアプリやデザインツールを制作したお話や、
Firebase、kintoneなどと組み合わせた開発のお話など、Vueの色々な可能性を感じられるLTを聞くことができた。
資料が公開されているので、ぜひ併せて参照されたい。

個人的には、ユニットテストの話が聞けたことは大きな収穫だった。
テストに関しては現状、何を書くか、どう書くかの2軸で悩んでいる。今回の話を聞いて、どう書くかの悩みは解消に向かいそうだ。

Vue.jsは楽しい!