アラタナエンジニアブログ

aratana Engineer's Blog

Vue.js Tokyo v-meetup #6 で meetup!

このエントリーはアラタナAdventカレンダー16日目のエントリーです。
前回は、夜の鬼の洗濯板(!?)きめさわさんによる、学習する設計でした。

新たな手法を取り入れるなど、慣れ親しんだ方法を変化させるのは容易いことではないですが、「安定している」とは「変化に柔軟に対応できる」ことだと、アラタナのエライ人も言っていました

f:id:oyanagi_jotaro:20171130182707g:plain

ということで、あなたにお送りする本日のアラタナ Advent カレンダー、皆様の息抜きのお供をする寄稿者は私、ジョウ大柳です。

今、自分の中で一番ホットな Javascript フレームワークである Vue.js

その Vue.js の日本ユーザーグループ主催イベント Vue.js Tokyo v-meetup に参加してきましたのでレポートをお伝えします!

今回で6回目となる Vue.js Tokyo v-meetup ですが、参加の募集開始後、ものの数分で定員100名が満員になるほど人気っぷり。(さらに100名のキャンセル待ち)

そして会場はなんと日本マイクロソフト 品川本社

f:id:oyanagi_jotaro:20171214103951p:plain

このイベントの会場スポンサーが日本マイクロソフト株式会社様、そしてLTにはマイクロソフトのテクニカル エンバンジェリストの方が登壇されるという、マイクロソフトを愛し、マイクロソフトに愛されたフレームワーク感のある Vue.js 。

そう思えるほど、マイクロソフト製コードエディタ Visual Studio Code と、Vue.js 用プラグイン Vetur による作業はとても快適なので、 Vue.js をお使いの際はお試しあれ!

これからの Vue.js がとても楽しみ!

いきなり締めに入っている感がありますが、総評からお伝えします。

Vue.js は発展途上、それが故に今後マジョリティになる可能性が大きい

一言で言えば 今から使っておいて損はない ということです。

メジャーな Javascript フレームワークである React と比べると、Vue.js においては開発の手助けとなるツール(構文チェックやテストためのツール)は未だ充実しているとは言えない状況です。(ベータ版で使えるツールはあります)
そして、トラブルシューティングやベストプラクティスに関するドキュメントもそこまで多くはありません。

しかしながら現在それらの開発が進んでおり、来年初頭にはリリース予定であると、 Vue.js コアメンバーであり日本ユーザーグループ代表である kazupon さんよりアナウンスがありました。

発表内容の主要な箇所をピックアップしますと、

そして、開発コードネームがアニメのタイトル

これでココロをガッチリつかまれました。
それでは詳しくみていきましょう。

  • v2.2 Intial D
  • v2.3 JoJo's Bizarre Adventure
  • v2.4 Killa Kill
  • v2.5 Level E

こんな Vue.js、使いたくなりませんか?
使いたくなったら宮崎で僕と握手!(エントリーはこちらから

他には、 React に対する Vue.js のトレンドの伸びを Google trend や Github Stars のグラフで紹介されていました。
2017/12 の Github Stars の数に至っては、React の 82,841 に対し、Vue.js は 75,952 と僅差に迫る勢いです。

Qiita の 2017 Advent Calendar を見ても、React は #2 までなのに対し Vue.js は #4 まで埋まる状況で、日本での注目度も伺えます。

ちなみに Vue.js 3.0 メジャーアップデートの話しですが(これこそが重要)、主だったところでは

  • 大きな破壊的変更はない
  • 2.x と並行してメンテナンスされる

とのことで、1.x から 2.x への乗り換えは移行とも言える作業が必要でしたが、現在バリバリ 2.x 系を使っていても 3.0 には苦労せず乗り換えられそうですねー。

そして、

IEは対象外

ネイティブに ES2015 をサポートするブラウザのみを対象とするそうです。

ここはコアメンバーでも議論が続いているようですが、データ更新を楽にするためにリアクティブ周りで ES2015 の Proxy オブジェクトの利用を検討しているそうなので、ここは是非とも IE をはずしてほしいとマイクロソフト様の会場で思うのでした。

Vue.js のミッションは「開発体験をよりよくするために取り組んで行く」とのことなので、期待しています!

eslint の開発者が Vue.js 用の eslint を開発

アメンバーの kazupon さんのお話しに続き登壇されたのが、「eslint の中の人」である mysticatea さん。

Vue.js 用 eslint の eslint-plugin-vue に関する内容を発表されていました。

eslint-plugin-vue は元々あったんですが、mysticatea さんがフルスクラッチで作り直したそうです。
動機は「React 用の eslint はよくできていたので Vue.js でもそうしたかった」とのこと。
ありがてぇ。。ありがてぇ。。

驚いたのは、Parser(コード解析プログラム)を独自開発したとのこと。

すげぇよ。。自分も、そんな人の役に立つプログラムを作りたいと思いました。

先日公開されたスタイルガイドに沿った内容にすべく絶賛改修中とこのとですが、「手が回らないので皆さんのコントリビュート待ってます!」とのことでした。
これぞ OSS

Vue.js 向けの eslint ルール作り(設定ファイルの改修)を実演されていましたが、思ったより簡単に作れる様子。
自動修正用のコードもサクッと書かれていました。
数行くらいのコードを設定ファイルに記述するだけで、自動で推奨属性を追加できる状態に。
カンタン!これはオレオレルール作りが捗りますね!

気になった方は mysticatea さんのスライドを是非ご覧ください。

eslint-plugin-vue について

Vue.js におけるテストのカタチ

つづいて登壇されたのは lmiller1990 さん。
去年来日されたそうですが、日本語がお上手。
発表後の参加者からの質問も普通に答えておられました。
そしてイケメン。

内容は、現在開発中の Vue.js 公式単体テストライブラリ vue-test-utils に関するものでした。

自分はまだ Vue.js でのテストを書いたことがないのですが、

...

すいませんウソつきました、テスト自体書いたことがないのですが、「テストすると工数下がるよ!」という投稿が最近人気だったので、それをみて心を改めている最中です。

最初に「コンポーネントとは何か」かを述べられていました。
まずは定義から、基本ですね。

コンポーネントとは

  • ユーザーにデータを表示する
  • ユーザーがアプリケーションと対話できるようにする

ものである。

よって、テストすべきは

  • 正しい表示とは(レンダリング
  • 正しい反応とは(インタラクション)

である、と。

vue-test-utils は、コンポーネントに対しこれらをテストするための機能を有しているとのことで、ライブデモをされていました。

  • shallow 関数によるレンダリングテスト
  • setData 関数による状態設定テスト
  • trigger 関数によるインタラクションテスト

「Vuex 使ってる時はモックストア使います」などの Tips も教えていただきました。

このあたりはご本人が投稿されていた以下の記事(英文)が参考になりますね。

Unit testing Vuex actions with Jest mocks

Jest 使ってますね。
vue-cli でインストールされるテストランナーは Karma だったんですが、最近のバージョンでは Jest も選べるようになっていました。
それなら Jest 使って TDDer に俺はなる!

さいごに、「vue-test-utilsはまだベータですので OSS に貢献できる良いチャンスです」とおっしゃっていました。
これぞ OSS

デザイナーに Vue.js を啓蒙するつらみ 〜 jQuery 帝国からの脱却 〜

テストって大事だなーと感慨に耽っていると ピンク色の髪をした女性 が登壇する様子が目に。
事前にみた lovalottaplus さんの LTのテーマは「Vue.js とともにいきる」。
どんな話しが飛び出るかと思っていましたが、一番笑いました

持ち時間が10分なのですが、用意したスライドの数なんと 50ページ超

そのスライドがこちら

そのため怒涛の勢いで話されていました

スライドの内容を結論から言うと、

jQuery 使ってるデザイナーたちに Vue.js のよさを伝えて使ってもらえるまで大変だったけど得られたものは開発効率2000%アップ(当社比)

です(息切れ)。

見た目と喋り方と勢いのせいで発表内容の半分も頭に入っていませんが、啓蒙活動として、分かりにくいものを分かりにくいまま伝えず、相手が消化できるサイズにして伝えることで拒否反応を抑えると言う、エバンジェリストとして至極真っ当な事をされているので感動しました。

Vue.js で作るようにり、それまでの見た目ドリブンの作り方から脱却し、作業フローが

「データ設計」→「データ制作」→「DOM化」→「スタイル付け」

となったおかげでデザイナーが仕様変更に強くなったそうです。

コンポーネント指向は、うまくはまればデザイナーとコーダーを幸せにできる」という好例ですね。

そして「LT は勢いが大事」と言う事を教えていただきました。
ありがとうございます。

10年ものレガシーの呪いを Vue.js + Typescript で打ち払った話

10年もののワインは風味が出ますが、10年もののプログラムはトラブルの香りがしますね。
maeharin さんから発表いただいたのは以下の内容でした。

こちらには、古の魔城(レガシーシステム)に挑む勇者の軌跡が記されております。

レガシーシステムには、懐かしい XSLT も使われていたとのこと。
会場で「XSLTをご存知の方〜?」と maeharin さんから聞かれたので最前列で挙手をしたら

お顔ぶりがレガシー

とのお言葉。

ほっといてください。

この発表での要点としましては、

  • v2.5 から Typescript 対応が強化され、オブジェクト構文でも this の型推論がされるようになった。
  • Vue.js 用 UIライブラリの Element が、管理画面作成にとても向いている。
  • swagger-codegen が便利

Typescript をまだ使ったことがないのですが、型指定とか厳密にしたいケースとかで便利なんですかね。

Element はまさにこれから使おうと思っていたので、背中を押された気分でした。

swagger に関してはアラタナが誇る天才 桑畑さん が詳しいのでいつか書いてくれることでしょう

最後に登壇されたのは、マイクロソフトのテクニカル エバンジェリスト 井上 章さん。
第一声で、参加者のほとんどがリンゴマークの端末を使用していることに触れられました(笑)

井上さんが入社された頃は社員全員 Windows だったそうですが、今では Mac Book を使う方が増えてきているというお話しが印象的でしたね。

LTは、TypeScript-Vue-Starter を clone して Visual Studio Code でのライブデモ!

Vue.js で作成する場合に Visual Studio Code が使いやすい事を、さすがエバンジェリストと言った話し方でお伝えいただきました。(めっちゃイケボ)

オープンソースVisual Studio Code で、オープンソースの Typescript と Vue.js を使ってマイクロソフトの方が作業をされている様は、以前のマイクロソフトからは違った印象を得ました。

最後に、マイクロソフトの Principal Community Architect である Scott Hanselman 氏が以前におっしゃっていたと言うお言葉をいただきました。

Javascript is the assembly language of the web.

これからも Javascript ユーザー、そして Vue.js ユーザーとして精進していきます!

ーーーーーー

レポートは以上です!
長文にお付き合いいただきまして、誠にありがとうございました!

明日のエントリーは、アラタナの Senior Managing Director、Homan 氏による「2017年買って・使ってよかったーというアイテム・サービス・ツールをアラタナメンバーに聞いてみた!」です。

お楽しみに!