Vue Fes Japan 2018 Reject Conference (プレイドで開催！)にいってきました #vuefes_reject
Vue.js 日本ユーザーグループ主催のVue Fes Japan 2018 Reject Conferenceにいってきました
スポンサーはPLAIDさん、forkwellさん。会場はPLAIDさんのオフィス。まさかの芝。すごい
Vue Fes Japan 2018には応募枠5に対して40件近くのCFPが届いたらしいです。今回はVue Fesには惜しくも採択されなかったセッションということでしたが、Web components、WebGL、OpenID Connect、BlockChain等、普段あまり触れる機会のないテーマに関する発表が多く、新しい刺激に満ちた会でした。私はVue Fes行けなかったのですが、Reject Conこれてよかったです。
忘れないうちにメモ残しておきます
※ 他の方の参加メモもあがっています https://scrapbox.io/yamanoku/Vue_Fes_Japan_2018_Reject_Conference
Vue.js with Web Components
- Takahiro Saekiさん
- Twitter: https://twitter.com/hirodeath
- GitHub: https://github.com/takahiro-saeki
- Front End Developer
Web Components、使ったことなかったのでイベントのあとちょっと調べた。以下のGoogle Developersの動画がgoogle chartを例に説明していてわかりやすかった。
https://www.youtube.com/watch?v=T5y_lmLngAk
「jsフレームワークによらずhtmlタグとして再利用可能」「jsやcssが独自タグにカプセル化される（グローバルに干渉されない）」といったあたりがポイントか。Web Componentsはユースケースがあまり想像できていなかったのだけど、確かにgoogle chartとかgoogle mapsとかがjsフレームワークによらずhtmlタグのように読み込めたら提供側も使う側も嬉しそう。個人開発や1チーム内で完結する開発をしている限りはあまり使わないかもだが（会場挙手でもWeb Components使っている人あまりいなかった）、「大企業内で異なるjsフレームワークで作られたUIパーツを再利用可能にしたい」といったケースで有効そう。
Vue CLI 3はVue.jsで作ったコンポーネントをWeb Componentsとしてビルドすることができる。Vueすごい。
Create & Publish Web Components With Vue CLI 3 - Vue.js Developers
Identiry Provider Keycloakの紹介と、それを用いたNuxt.jsでのOpenID Connect認証機能の実装
デモアプリ：
- onigraさん
- Twitter: https://twitter.com/onigra_
- GitHub: https://github.com/onigra
- 株式会社エス・エム・エス
Keycloakは知らなかった。なぜfirebase auth使わずにわざわざ自前でKeycloak立てたのかな？と思ったけど社内認証システムをつくるさいに独自要件があり、自分たちで手を入れられるものを作りたかったとのこと。axiosでの認証はaxiosのinterceptorsをつかってやってるらしい。nuxtで一瞬ログイン後の画面がちらつく問題に対する対策（以下）も共有してくれてありがたかった。
https://www.yo1000.com/posts/2018-05-26-nuxt-spa-redirect.html#%E7%8F%BE%E8%B1%A1
個人的にはサーバーサイドKotlin使っているということで親近感。
Vue.js/Nuxt.js で 実現できた PWA の リアルタイム動画ラップ・バトル・アプリ
- lulznekoさん
- Twitter: https://twitter.com/lulzneko
- GitHub: https://github.com/lulzneko
- Riotz
24時間のハッカソンでここまで作るとかすごいできだった。Nuxt.js使うのハッカソンが初めてだったらしいし。。（最初は経験のあるriot.jsでいこうと思ったがハッカソン中にPWA対応の優れていそうなNuxt.jsを発見して使うことに決めたらしい）。Nuxt.jsとサーバーレスの力もあるだろうけど、それにしても早い。
Vue.js×TypeScript×Blockchain Ethereumで作るアプリケーションをはじめからていねいに
- 小堀輝さん
- GitHub: https://github.com/anneau
- 株式会社エイチーム
Blockchain全くわかっていなかったのだけど、タイトルどおりBlockchainについてはじめから丁寧に説明した上でVue.jsのテーマに入ってくれてわかりやすかった。データを従来型のサーバー型で保存するかBlockchain上に保存するかの判断基準として「絶対に改ざんされたくないデータをBlockchain上に保存する」と説明されていたが、改ざんされたくないのはサーバー側に保存するデータも同じなので、「そのBlockchainに参加しているユーザーに対してデータが改ざんされていないことを保証したい」ということなのかな？と思った。
Non-DOM components with WebGL in Vue.js
- 小山田晃浩さん
- Twitter: https://twitter.com/yomotsu
- GitHub: https://github.com/yomotsu
- 株式会社ピクセルグリッド
3D描画のデモを見て、すごい！コードみたい！と思ったらgithubにあげてくれていた。ありがたい。Vue.jsからWebGL扱う方法や、「x,y,zで3つの値をwatchすると、同時に変わると3回renderしちゃう。computedにまとめてそれをwatchしてる」など具体的な実装Tips盛りだくさんで大変参考になった。YouTubeでvue webglで検索したら発表者の方の別のイベントでの動画がヒットした。こちらも参考になる
https://www.youtube.com/watch?v=YJMePm4rJUY
レガシーアプリケーションのリニューアルにNuxt.jsで戦う
私の前職エムスリーで一緒にリニューアルやった鈴木さんによる発表。一緒にインタビューも受けた仲なのだけど、Nuxt.jsの方のプロジェクトは私はあまり関わっておらず、鈴木さんがリードしてくれた。Nuxt.js x TypeScriptのやり方や、components配下の構成管理は今も他のプロジェクトで鈴木さんのやり方を参考にさせてもらっている。特にAPIレスポンスの種類やプロパティが多いプロジェクトにおいて、APIサーバーからswagger-codegenなりでTypeScriptのクライアント自動生成するのはとてもよい。Vue.js x TypeScriptの嬉しみがぐっと強まる。
懇親会
予定あって出れなかったのですが、Vue Beerがデプロイされてました（エムスリーはVue Fes 2018のビールスポンサーさせていただきました）
スタッフのみなさま、お疲れ様でした！スポンサーの方々ありがとうございました！
