ITエンジニアのための勉強会・イベントレポート情報メディア

勉強会に行ってみた!第50回「Vue.js Tokyo v-meetup=
event

勉強会に行ってみた!第50回
「Vue.js Tokyo v-meetup="#3"」

2017.05.15

 
  • このエントリーをはてなブックマークに追加

Javascript のフレームワークでは React.js と並んで人気の Vue.jsの勉強会に行ってきました。Vue.jsを実際に使っているユーザーによるLT大会のようです。みんなが普段どんなふうにVue.jsを使っているのか、気になります。

三土たつお

会場は品川の日本マイクロソフトでした。

勉強会に行く楽しみって、こういう普段は入れない有名な会社に堂々と入れるってこともちょっとあると思うんですよね。この日も「マイクロソフトってこんなふうなんだ!」みたいなミーハーな気持ちで来てしまいました。

とはいえ、オフィスの中にはもちろん入れなくて、セミナールームみたいなところが会場になっているわけなんですが。

主催は Vue.js 日本ユーザーグループ の @kazu_ponさん

勉強会の主催は @kazu_ponさん。Vue.js 開発コアチームのメンバーでもあるというスゴイ人です。ただ、勉強会あるあるとしては、登壇者だけでなく参加者にもすごい人が揃っているというのはあります(とくに席の前の方)。

kazuponさんから勉強会の説明があり、いよいよ本題のLT大会が始まりました。

この素晴らしいVue.jsに祝福を!

たけうち ひでゆきさん

たけうちさんのお話はE2D3というエクセルのアドインについてのものでした。Excelと Vue.js にどういう関係が?と思ったのですが、これがすごかったんです。

E2D3というのは「Excel to D3.js」という意味で、Excelで作ったデータを、D3.jsを使ってインタラクティブに表示できるように変換するためのアドインなんですね。まずExcelにそういう仕組みがあるっていうことを知りませんでした。

「Apps for Office」からE2D3をインストールすると、

「32 52 15 42 30 68」みたいな単純なデータであれば、こういう棒グラフにできます。ここまではふーんぐらいですが、

複雑なデータがこんなふうに可視化されて、しかもインタラクティブにぐりぐり動くのを見せられると、「こ、これがD3.jsによるデータビジュアライゼーション!」とびっくりします。かっこいい。

それでVue.jsとどう関係があるのかというと、じつはExcelのアドインは HTML と Javascriptで書けるんだそうです。そうだったのか。

というわけで、E2D3も昔はjQueryで頑張っていました。

でも対応するHTML側は一行しかなかったりして、画面の拡張を続けていくのがしんどくなった。そこで Vue.js を導入しようと思ったんだそうです。その結果、対応するHTMLは

こんなふうにちゃんと構造が見えるようになりました。今まではjQuery.jsの中にビューが埋まってたのが、ちゃんと分離されたということですね。

たけうちさんはこれを「カジュアルにVue.jsを使う」と言っていました。ビューをすっきりさせる、くらいの使い方でしょうか。データフローやルーターの機能を使ってガチにも使えますが、まずはカジュアルに使うのでも十分便利だ、とのことでした。

個人的にも、jQueryで辛さを感じはじめたときにそれを脱却する、という意味ではVue.js をカジュアルに使うのはとても適していると思います。直感的で、まさにやりたいことがすぐできます。

その後、複雑なことをやろうと思えばもちろんできるし、その際の学習曲線は理想的、とたけうちさんは言っていました。

ちなみにE2D3はオープンデータ界での評価が高いそうで、たとえば番組製作の人とかが重宝しているんだそうです。すごいですね。

E2D3 公式サイト
http://e2d3.org/

Vue.js と Firebase で SPA

さとう ともきさん

さとうさんのお話は、Vue.jsでSPA(Single Page Application)を作ってみたというもの。やっぱりSPAの話は聞きたいですよね。どんな具合だったのか、実感を知りたいところです。

まず Vue.js でSPAを作ることになった経緯についてです。さとうさんの所属する会社で新規サービスを作ることになりました。でも期間が2ヵ月しかない上に、開発担当はさとうさん一人しかいません。

そこで、社外での開発リソースを探したところ、友人が二人参加してくれることになりました。とはいえ、大まかな機能だけでもこんなにあります。

この図が出たときには会場がどよめきました!この量を2ヵ月でなんて大変です。そこで選んだ技術がVue.jsとFirebaseでした。

Vue.jsにはいろいろ便利な機能がありますが、2.0からついてきたCLIが便利だと言っていました。プロジェクトを新規作成したり、いろいろな機能があるんですね。しかもそのときのオプションでSPAを選ぶと、ふさわしい構成で作ってくれるとのこと!これは試したい。

また、今回集めたメンバーがAngularの経験があり、その点でDirectiveなどの考え方が似ている部分があり、慣れるのが早かったそうです。FirebaseはいわゆるBaaSですね。バックエンド部分を簡単に肩代わりしてくれます。

その結果できたものがこちらです。大きくスクリーンショットを撮ってみました。

http://syncable.biz/home/

素敵ですね。慈善活動などをしている団体を応援するためのサービスのようです。こうやって3人でたった2ヵ月で無事リリースできたんですが、困ったこともあったそうです。

たとえば、急いで開発しているなかで、やはりデータフローがぐちゃぐちゃになってしまったということ。vuexを利用しているから大丈夫、というわけではなく、データフローモデルを利用したうえで、やはり気をつけて設計しないといけないということなんでしょうか。vuexの経験のあるかた教えてください、と言っていました。

まとめとしては、小さいチームと開発期間が短いプロジェクトに対しては Vue.js(とFirebase)がよかったとのことでした。さらにVueCLIが便利で、環境構築とかに時間がかからないと。いいですねえ。

その後は懇親会となりました。それぞれVue.jsについて困っていることを話したり、まったく関係ない雑多な話題などで楽しそうにしていました。

まとめ

Vue.jsはバージョン1しか使ったことがなかったんですが、2になってからバーチャルDOMを採用したり、CLIまでついてくるようになったんですね!たけうちさんのいうように、カジュアルに始められて、複雑なことをしたかったら妥当な学習曲線で進んでいけるのであれば、まずはVue.jsを始めるしかないな!という気分になりました。ひとまず個人的には PHPでLaravelを使っているんですが、最近のバージョンではVue.jsに対応しているので、その組み合わせでやってみたいなと思います。

今回行った勉強会:「Vue.js Tokyo v-meetup="#3"」
https://vuejs-meetup.connpass.com/event/48462/

原稿:三土たつお
1976年生まれ。プログラマー、ライター。プログラマーとしてはふだんPHPを書いてます。ライターとしてはニフティのデイリーポータルZとかで書いてます。近著「街角図鑑」(実業之日本社)。
http://mitsuchi.net/

勉強会に行ってみた!第50回「Vue.js Tokyo v-meetup=

この記事はどうでしたか?

おすすめの記事

キャリアを考える

BACK TO TOP ∧

FOLLOW