この記事はtraP Advent Calendar 12月17日の記事です。

どうもとーふとふです。
今日は先日品川駅近くの日本マイクロソフト本社で行われた、Vue.js meetup#6に参加したレポート記事を書きたいと思います。

第五回はイベントを見つけた時点で定員の2倍位の人が応募していて参加できなかったのですが、今回は申込み開始直後に参加申し込みをしたので無事参加することができました。
それでも申込み開始後30分ほどで100人の先着枠が埋まっていたので次参加したい人は情報をしっかりウォッチしておくことをおすすめします。
connpassのイベントページ

Vue.jsとは

公式ホームページ

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は初めから少しづつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てているため、Vue.js を使い始めたり、他のライブラリや既存のプロジェクトに統合したりすることはとても簡単です。一方、モダンなツールやサポートライブラリと併せて利用することで、洗練されたシングルページアプリケーションを開発することも可能です。

つまり、導入は楽チンで取り入れやすく、その気になれば他のライブラリと連携させてイケイケなアプリを作れるすげーやつということです。

よく言われる利点としては

• 導入が楽である
• 学習コストが低い
• 公式ドキュメントが豊富
• 日本語情報が多い
• 勢いがある(利用者の数も開発も)
  などがあります。

私個人としては去年のVue2.0リリース直後から使っており、最近はNuxt.jsやその他周辺ライブラリを使って制作などをしています。
traPにも集会でのミニLTなどで紹介したりもくもく会で布教したりしているので、かなり使ってくれている人が多くなってきました。
現在SysAd班で制作している新traQ(部内チャットサービス)もクライアントサイドはVueで書いています。

今回のイベントではVue.jsを利用している様々なエンジニアが100人以上集まりました。

各発表の感想

各登壇者について感想を書いていきたいと思います。

ここ最近のVue.jsの動向と今後について

発表資料

日本ユーザーグループ代表を努めている@kazuponさんによる、今年のVue.js周辺の動きと来年の予定の紹介です。

今年はQiitaやはてなブログなどでもVue.jsの記事がトップページなどに掲載されているのを度々目にしましたが、それだけでなく多くの指標からもVue.jsは伸びているようです。
特にGitHubでのスター数の伸びは凄まじく、来年には現在JSライブラリで最も多いReact.jsを抜くんじゃないかという勢いでした。(というかぜひ抜いてほしい)

来年は現在ベータ版の周辺ライブラリ(単体テストやESLintプラグインなど)の正式版リリースやその他のライブラリのメジャーバージョンアップが待っているのでますます勢いが出そうだなあという気持ちになりました。

Vue.js本体だけでなくエコシステム全体が成長していくことでVue.jsのミッションである「Webの開発体験の向上」は実現されていきそうですね。

eslint-plugin-vueについて

発表資料

ESLintのメンテナでもある@mysticateaさんのeslint-plugin-vueについての発表でした。

Vue.jsではコンポーネントに関係するテンプレート・ロジック・スタイルを単一のファイルで管理する方式を取っているのですが(下記参照)、それのLinterを作ることになった動機と現状、実際にプラグインのルールを作ってみるライブデモという構成でした。

単一ファイルコンポーネントの例
~.vueという拡張子で保存します。

sample.vue<template>
<div id="app">
// ここにテンプレートを書く
</div>
</template>

<script>
// ここにロジックを書く
export default {
  name: 'app',
  data () {
  
  }
}
</script>

<style>
// ここにスタイルを書く
</style>

ESLintはもともとJSのLinterなので.vueファイルのtemplateのようなHTMLを解釈することができません、そこで@mysticateaさんはHTMLのパーサーから自分で書いてプラグインを作成したそうです。
ライブデモではかなり有用なルールをものの10分位で作成しており、すげえって感じでした。
コントリビューター募集中ということでぜひともコミットしてみたい。

vue-test-utils関連

発表資料は公開されていませんでした

vue-test-utilsのコアメンバーである@lmiller1990さんによる発表です。
現在正式版リリースに向けて開発中のコンポーネントテストライブラリvue-test-utilsについての発表です。

最近サークルでの開発でGo言語でテストコードを書いているのですが、これを使えばVueでも簡単に書けそうなので書いていきたいと思います。

Vue.jsとともにいきる

発表資料

@lovalottaplusさんの発表です。
発表者の方はデザイナーの多い会社で働いているらしいのですが、そのような会社では未だにJQueryの使用が多く、新しい技術やライブラリを取り入れるのが難しいらしいです。
そんな中で、Vueを会社での取り入れるまでにしたことのLTでした。

とても勢いがあり、言葉回しが面白い発表でした。
私達がとても親切でわかりやすいと思っているVueの公式ドキュメントでさえプログラミングをしたことない人にとっては非常に難解なものなんだなあと改めて実感しました。

そこでできる限り新たな技術の習得なしにVueの開発効率の良さを手に入れるための工夫がたくさんあって面白かったです。

10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話

発表資料

@maeharinさんの発表です。
10年物のシステムをモダンな形で置き換えようという試みです。
swagger-codegenでのTypeScriptの型定義の自動生成が非常に気になりました。
ここで使われているElementというUIフレームワークは手軽に導入できて、きれいなUIをすぐに使えるのでおすすめです。
特に管理画面などではデザインの被りなどをあまり気にしなくていいですしね。

VS Code&TypeScript&Vue.jsでの簡単なライブデモ

日本マイクロソフトのエバンジェリスト井上章の発表です。

私は普段コーディングをするときはneovimを使っているのですが、この発表を見てVue.jsを書くときはVS Codeを書こうかなあと思うくらいいい発表でした。
さすが発表のプロだなあという圧巻のプレゼンでした。

JavaScriptはWebのアセンブリ言語であるという言葉が印象に残りました。

懇親会

すべての発表が終わった後、お待ちかね(？)の懇親会がありました。
参加募集段階では一人あたり1000円の参加費が必要だったのですが、スポンサーのGroovesさんのご厚意により、なんと全員無料でになりました！本当にありがとうございました！

ただで🍕と🍺が！！！ pic.twitter.com/ZDsAZ6x9p7

— とーふとふ (@to_hutohu) 2017年12月13日

同じライブラリを使っているエンジニア同士みなさん楽しそうに話していました。
私も時間が足りないくらい、話し込んでしまいました。

まとめ

控えめに言って最高のイベントでした。
ますます勢いがついていきそうなVuejsをこれからも愛していきたいと思います！

みなさんも思い入れのあるライブラリや言語があってそれに関するイベントがあれば是非参加してみてください！
モチベーションアップにもつながると思いますよ！！！

明日はsutoくんとKazuくんの記事です！
お楽しみに！！！