関西から Vue.js Tokyo v-meetup #4 に参加する為だけに東京に来ました!

昨日(2017年7月7日)、LINE株式会社で開催された「Vue.js Tokyo v-meetup #4」に参加してきました。
最近は東京で面白そうな勉強会があるとちょこちょこ参加してます。
今回は一般参加枠はキャンセル待ちで、ブログを書く枠が空いていたのでブログ枠で参加しました。
※ なのでブログを書いてますw

目次

余談:関西から東京の勉強会に参加するのに一体いくら掛かるのか

ざっくりですが、以下の感じです。
西宮北口⇔関空(リムジンバス):3,000円/往復
関空⇔成田(Peach):13,000円/往復
成田⇔東京(シャトルバス):2,000円/往復
ホテル(ファーストキャビン):6,000円/1泊
————————————————————-
合計:24,000円

って感じですね。昔は新幹線で行ってたので新幹線の往復分より安くいけるようになりました 🙂

Vue.js 歴

初心者です。
普段はWordPress案件(お仕事全体の7割)でPHPを書いたり、kintone案件(お仕事全体の3割)でJavaScriptを少し書いています。最近では少しずつkintoneの案件が増えてきたので、JSを書くことが増えてきました。

Vue.jsを触ることになったきっかけはCMSを使わずに何百もの商品をWEBページに一覧表示する案件があり、WordPress(CMS)が使えないのでJSで簡単に出来ないかなーって思って調べたところVue.jsと出会いました。

今のところその案件だけでVue.jsを使っただけなので、かなりのヒヨッコです。
なので今回の勉強会では初めて聞く単語のオンパレードでした・・・汗

まぁ、最初は誰でもそんな感じだと思うので1つ1つ調べて行こうと思います 🙂

今回で4回目になるVue.js Tokyo v-meetup

その前ではどんな形式で開催されていたのかは分からないのですが、今回はLT形式がメインで、10分のLTが8本ありました。
自分の復習の為に1本ずつ簡単に概要を書いて行こうと思います。(間違えてたらすいません・・・)

LT1: Weex ではじめる Native App 開発 : (LT予約枠)

Weexとは簡単に言うとVue.jsを使ってネイティブアプリの開発が出来るというものらしいです。
なかなか便利そうじゃないですか。
中国のAmazonと言われているアリババのエンジニアさん達が開発されたものらしいです。

https://weex.incubator.apache.org/


https://weex.incubator.apache.org/  から引用

LT2: お仕事で Nuxt.js を使うか検討した話 : (LT予約枠)

Nuxt.jsとはVue.jsでSSR(サーバーサイドレンダリング)をするためのフレームワークのようです。
SSRの説明は、この後の「LT4のVue.jsとFirebase Hostingでサーバサイドレンダリング」で説明がありました。

お話の主旨としては自社でVue.jsを使ってECサイトを構築することになった時にSSRでNuxt.jsを使うか使わないかを検討する時にどうやって検討したかのお話でした。

1つ1つ検討事項を洗い出し、メンバーとその1つ1つについてそれは必要な機能なのかそうでないかを話し合い、Nuxt.jsを使うか使わないかを決めたというものでした。

結局Nuxt.jsの導入を見送ったというオチでした。

こちらスライドが公開されています。
Nuxt.js導入についてのメリット・デメリットも書かれているのでとても参考になりました。

LT3: Vue.jsのTransitionでいい感じのアプリにする : (LT一般発表枠)

http://qiita.com/nasum/items/bcac216cf1a9a5e79a31

Vue.jsのTransitionを使うといい感じにクラスを充ててくれるので、CSSに専念できるよ!
でも、CSSでアニメーションを書いていくのは怖気づいているという話しでしたw

デモではVue.jsで作成されたTwitterクライアントを使って、LIKEを押されたときのアニメーションやツイートした後の挙動などのデモを見せて頂きました。

登壇者の方が「怖気づいている」と言われていたので、もしかしたら良い方法ではないのかも?しれませんが、Vue.jsを使ってみるのに一番ハードルが低そうな機能だったのでVue.jsのTransitionを使ってみようと思います 🙂

LT4: Vue.jsとFirebase Hostingでサーバサイドレンダリング (LT一般発表枠)

Firebase HostingとCloud Functionsを使うことでサーバーサイドレンダリングをしたというお話でした。

サーバーサイドレンダリングとは、仮想DOMからHTMLを書き出すことをサーバーサイドレンダリングと言っている。
なぜそれが必要なのか?

・クローラーに確実にインデックスしてもらう
・ファーストビューの表示が早い

などがある。

過去にサーバーサイドレンダリングをGAE/Goでしたことがある。Vue.jsを使う場合はgojaを使うとのこと。
ググってみると発表者の方のQiitaがありました!このことでょうね。
http://qiita.com/koki_cheese/items/13426921f0b5861725e5

結論、サーバーサイドレンダリングをGAE/Goでするのは辛かったとのこと。

Firebase HostingとCloud Functionsを使うと簡単に出来るよ!って話しでした。

LT5: Vueコンポーネントのユニットテスト : (LT一般発表枠)

タイトル通りユニットテストの話しです。
Vueのユニットテスト用のライブラリーはいくつかあるらしい、どれも似たり寄ったりの機能。
公式のテストライブラリーはないのか?と調べたら現在開発中とのこと。

公式のテストライブラリーはavoriazベースに作成されているので、avoriazを触ることで今後出るであろう公式のテストライブラリーを先取りしよう!という話しでした。

avoriazの良いところとして

  • シンプルなAPI
  • ドキュメントが豊富
  • 各テストライブラリ別にサンプルコードも豊富

とのこと。これはとてもありがたいですね!

LT6: Vueでデザインツールを作った話 : (LT一般発表枠)

studioというコードベースでデザインができるVue.jsで作られたデザインツールの話しでした。

作成された方がUIが得意でJavaScriptは全然書けなかったらしいのですが、Vue.jsに出会った時に直感的で分かりやすかったのでVue.jsを触り続けるキッカケになった。

studio:https://ohako.studio/ja

studioのWEBサイトもとても綺麗ですねー!僕もさっそくアカウントを作成してみました。

LT7: kintoneアプリを Vue.jsを使ってカスタマイズする(仮) : (LT一般発表枠)

kintoneの簡単な紹介とkintone内でVue.jsを使うことが出来るよー!今後何か作ってみようと思いますーって感じのお話でした。

LT8: VueConf 2017 参加レポート : (LT予約枠)

https://vueconf.netlify.com/

こちらのカンファレンスのレポートでした。
日本人の方も登壇されたようですね!カッコイイ!

VueConf 2017の様子はYoutubeに掲載されているようです。
https://www.youtube.com/results?search_query=vue+conf+2017

発表者の方がVueConf 2017の発表で面白かったと言われていたAnimating Vueの話しのスライドです。
http://slides.com/sdrasner/animating-vue-17

あと発表者の方がブログを書いていますので、そちらもチェックを!
https://dev.oro.com/posts/2017/07/event/vueconf2017-report/

まとめ

初心者なので勉強になることばかりでした!登壇者の方々ありがとうございます!
5回目も日程が合えば参加したいなーと思いますー 🙂

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

「エンジニアのためのWordPress開発入門」を執筆しました!

WordPressを使った開発案件は依然多く、それに携わるWebエンジニアも多数存在します。ただし、モダンな開発手法に慣れたWebエンジニアがWordPressに初めて触れたとき、その独特のアーキテクチャやシステムの構成に戸惑いを感じることがあるかもしれません。だが、WordPressは、それらを補ったうえにさらに強力なメリットを持ち合わせています。本書は、PHPプログラマがWordPressで開発する際に必要な基礎知識から、現場で役立つ具体的なカスタマイズ手法や開発のポイントについて詳しく解説しています。

この記事を書いた人

NPO法人のHP制作(WordPress)やkintoneを使った業務システムの構築をしています。サイボウズ株式会社公認kintoneエバンジェリスト/CoderDojo西宮と梅田のチャンピオン/認定NPO法人宝塚NPOセンター理事/NPO法人SEIN理事/

コメント

コメントする

目次
閉じる