Vue.js Tokyo v-meetup #8に行ってきた

Vue.js Tokyo v-meetup #8

開催日：2018年8月28日　19:00~22:00
場所：株式会社メルカリ

Vue.js Tokyo v-meetup #8 (2018/08/28 19:30〜)

Vue.js 日本ユーザーグループに主催によるMeetUp イベント

セッション一覧

・Vue Fes Japan 2018 に向けたお知らせ
・dev.to そして、阿部寛のホームページを超えろ！Vue Fes サイト高速化
・Vue未経験者がVue+Atomic Designでサイトリニューアルした話
・デザインツールをつくりなおす話
・ありがとう あの時 Vue.js は僕を助けた
・vue.js xss vulnerability and ssr/spa rendering architecture
・Replace View of Backbone.js with Vue.js

Vue Fes Japan 2018 に向けたお知らせ

チケットはPassMarketで7000円で販売予定。販売枚数は最大360枚を予定。Vue Fesで登録したメールアドレスに9月10日に送る予定。動画を撮影して後日公開する予定であるが、ストリーミングは無し。

Keynote
　Evan You
Next-level Vue Animations
　Sarah Drasner
Nuxt.js 2.0
　Sébastien Chopin
TBD（未定）
　Edd Yerburgh
A deep dive in SFC compilation
　Rahul Kadyan
TBD（未定）
　Guillaume Chau
Vue Designer: デザインと実装の統合
　katashin
noteのフロントエンドをNuxt.jsで再構築した話
　福井　烈
Vue.jsとWeb Componentsのこれから
　Takanori Oki
Atomic Designのデザインと実装の狭間
　菅原　孝則
1年間単体テストを書き続けた現場から送るVue Componentのテスト
　土屋　和良

Vue Fes Japan 2018 裏カンファレンス！
2018年11月10日　午後に開催予定
近々connpassで募集開始予定

dev.to そして、阿部寛のホームページを超えろ！Vue Fes サイト高速化

速度目標の立て方はビジネスゴールを考える(一番重要)。今回の速度改善は、Vue Fesのサイトが快適に見られることができれば、Vue.jsを好印象に思い、興味を持つかもしれず、Vue Fesに来てくれるかもしれない。

界隈でこのサイトは早いと言われるサイトを越えることを早さの目標とし、First Meaningful Pain(ユーザが意味があると思うページが出た瞬間)を指標とした。

Dev.to　　　　　FMP 1332ms
阿部寛のHP　　  FMP   600ms
Vue Fes(before)　FMP 1653ms
Vue Fes(after)　   FMP   862ms

速度改善でやったこと
クリティカルレンダリングパスを意識し続け、before/afterを1つ1つ計測した。やったことは、画像形式の選択・画像のリサイズ、画像の圧縮ライブラリ・画像の遅延読みなどの画像の最適化を行った。他にもAdobe TypekitをJSで遅延読み込み（Preloadに変えるかも）、ネットワーク系はNetlifyが勝手にやってくれてる。

速度を維持する仕組みづくり
Git Hooksを使ってコミットする前に、自動で画像圧縮する仕組みを作った。今後は、CIで監視したりモニタリングの強化もしていきたい。

まとめ
目標は、ビジネスゴールから考えてやり、目標に対して、超速Webページ速度改善ガイドを読めばよい。

Vue未経験者がVue+Atomic Designでサイトリニューアルした話

マークアップをコンポーネントに解体し、Organismsごとに作成し、コンポネントが独立するまで行い、Atomicをした。

Vueの所感
宣言的＆リアクティブのおかげで、jQueryだときついことが簡単にでき、単一ファイルコンポーネントにより、直感的でわかりやすく、scopedによりCSSの干渉がしなくて良く、なんとなく書いても動いてくれて、Reactよりも書いていて楽しい。

Atomic Designの所感
ファイルの見通しがとても楽になり、ルールをちゃんと作れば、他のエンジニアと開発がしやすくなる。しかし、最初からAtomsにこだわると死ぬ。

デザインツールをつくりなおす話

deck

STUDIOにはたくさんの負債があり、継ぎ足しじゃなく1ヵ月かけてコンポーネント化機能、三代目Drag&Dropを作り直した。

ありがとう あの時 Vue.js は僕を助けた

フロントエンドの激流時代になり、徐々に状況が分からなくなり、他の技術の意味が分からない状態になっていた。でも、作るものが違うから技術も違って当然と自分に言い聞かせた。そんな焦燥感の中で、手を差し伸べてくれたのがVue.jsだった。

Vue.jsの良さは、Vue.jsの公式サイトが日本語に対応されており、その丁寧さだけではなく、サンプルが楽しそうで作りたいと思えるものばかり。加えて、Slack vuejs-jpコミュニティで質問の回答が5分で返ってくる、コミュニティの優しさがある。しかも、Vue CLIの使い勝手が良く、.vueでコンポーネントが1つというのがとても直感的だった。

vue.js xss vulnerability and ssr/spa rendering architecture

React SSRに脆弱性があった。原因はSSRの処理でエスケープ処理が入っていなかったためである。
※10分を過ぎてしまい、タイムアウトになってしまいました。

Replace View of Backbone.js with Vue.js

Backbone.jsで書かれていた既存の構成はいじらず、Vue.jsを追加。Vue Componentをラップするクラスを生成するだけで、Vue.jsのインスタンスを生成できるようにした。

所感

v-meetup #7に引き続き、8回目を参加させていただきました。
v-meetupは、変わらずとてもフレンドリーな雰囲気でした。
前回しか知らないので、前回との比較になりますが、今回は発表枠が少ないため10分になったので、濃厚な時間に感じました。しかも、ガチLT枠と初心者LT枠に分かれていたため、共感する部分や勉強になる部分があって、前回にはない良さがありました。

宣伝

ITエンジニア向けの勉強会での記事を投稿しています。
興味がある方はnoteアカウントをフォローして頂けると嬉しいです。
Twitterもよろしくお願いします。@TTrpbm