はじめての技術カンファレンス 〜 Vue Fes Japan 2018 〜

たのしかった

TL;DR

• はじめて技術カンファレンスというものに、ソロで参加してきました。
• すごい楽しかったから、行ったことない方はぜひ行ってみてほしい。
• 技術に関しては知識不足なので小学生並の感想でお届けします。

Vue Fes Japan 2018

2018/11/03(土) @ 秋葉原UDX

そもそもvue.jsって

クライアントサイドのJavaScriptフレームワークです。
学習コストが低いです。(と言われています)
初めてまともに触ったフレームワークでしたが、評判通りすんなり入門できました。
公式の日本語ドキュメントが充実してるのも◎

そもそもVue Fes Japanって

日本で初めて開催する Vue.js カンファレンス(公式抜粋)
国内外の色んな方から、色んなお話を聞くイベントです。

時系列で所感

タイムテーブル
写真とるの忘れました。

開場〜

受付で事前に送られてきたQRコードをかざして受付を済ませる。
めっちゃITって感じ！（適当）
人が少ない時間に撮ったのでスカスカですが、セッションによっては立ち見とか出るくらいパンパンでした。

オープニング/キーノート

Vue.jsの日本コミュニティ代表であるkazuponさんからのご挨拶。
「スポンサーさん、コントリビュータさん、コミュニティのみなさん、ここにいる皆さんありがとう」

そしてEvan Youさんからのお話。
今のVue.jsのメジャーバージョンは2で、絶賛作業中のVue3.0について。

• メモリ使用量を抑えるのでパフォーマンスを上げる
  速いは正義。フルスクラッチで作り直したと。サラッと言ってたけどすごいことなんじゃ・・・
  デモ用のアプリのパフォーマンスは2.5→3.0で速度２倍・メモリ使用量半減ということでした。
• ビルドファイルのサイズも抑えていくよ
  webpackのtree shakingという機能を利用するそうです。
  初めて聞いた機能ですが、不要な部分のコードを解析して除去する機能みたいですね。
  どういうロジックで判別しているかは勉強不足で分かりませんが、意識してコーディングすれば大幅にサイズを抑えられるかも・・？
• デバッグしやすくするよ
  renderTrackedとrenderTriggeredフックというものを利用するそうです。わかんないので勉強します。
• Hooks API
  reactで最近話題の機能だそうです。こいつもしらべます。
• Time slicing
  これもreactの機能? 同一のイベントが複数回連続で走る場合は、一定時間待ってから最新の値で処理される、みたいな感じ。debounce的な挙動をデフォルトでできるようになりそうでステキ。

他にもたくさんお話してたのですが、聞くのに夢中でメモが。。。
勉強不足で「あーなるほど、完全に理解したわ ←わかってない」ということもちょくちょくあり・・・
英語でのセッションでしたが、スライドの下にリアルタイム（非同期気味）で翻訳テロップが！
とっても助かりました。
あとEvanさんはVS Code使い。親近感。

プラチナスポンサーセッション

プラチナスポンサーであるPLAIDさんのセッションです

• KARTEというサービスしています
  ウェブサイト構築をお手伝いするサービス？っていう印象でした。CMSっぽい。
  ユーザごとのCTRとか滞在時間とかも解析/提供してくれそう？高機能ですなぁ。 それと管理画面がすごいキレイでちょっと触ってみたい。そしてコンポーネント数は650以上！大変だ Vueめっちゃ好きです!っていう感じが伝わってきました。

めっちゃ宣伝になるなこれ、って思いながら聞いてました。

ランチセッション

お昼ごはんを食べながらスポンサー企業さんのプチセッションを聞く。

LINEさん

• ネイティブアプリのwebviewは実はvueで作ってます。スタンプ販売のとことか
• UITやってます
  UITという勉強会みたいなものも定期開催しているそうです。今月末はvue特集らしいので行ってこようかな・・

LINEさんのブースでは、LINEアプリを使ったクイズに答えると、抽選でVue.js入門(書籍) or オリジナルVueTシャツがもらえる催しをやっていました。布教用の入門書当てたかった・・・

SCOUTERさん

お昼のお弁当おいしくてメモ取ってませんでした！本当にごめんなさい

10人くらいで受託しながらバシバシサービス作ってるのすごいと思いました。（小学生以下の感想）

Reproさん

アプリ向けのユーザ分析サービス。「とりあえずRepro入れよう」を目標にがんばっています。
今はvueで動いてるけど、かつてはRubyとjquery。
ゴリゴリのjqueryで解析辛い・・・　→ vueにティン！ときて移行を開始。
知見をためて、社内/社外へ情報を発信。Qiitaの記事にはお世話になっています。

ちなみにお昼ご飯は今半のすきやき弁当でした。めっちゃ美味い

中の写真取らなかったの本当に無能

スピーカーセッション

ここからは2つの会場に別れて好きな方のセッションに参加します。どっちを聞くか悩む悩む・・

Sarahさん

「Next-level Vue Animations」

翻訳なしの英語セッションで、自分にとっては内容自体も難しかった感がありました。スライドが日本語だったのが救い・・・

• 前半はvueについて、というよりかはアニメーションをどう見せるのが効果的か、みたいなデザインに寄ったお話
  どのタイミングで動かして、どのくらいの長さで、何回動かして、どういった変化を行うかが大事。
• <transition>、カスタムリアクティブ、ウォッチャーを使おう
  特に<transition>や<transition-grouup>を使っていろいろアニメーションデモを見せてくれました。この辺りはおおーってなってただけなのでもうちょっと調べてみたい。
• そしてvueと相性が良いのがsvg
  svgは数字を使ってオブジェクトの状態を管理する。リアクティブであるvueとはとても相性が良くて、d3.jsみたいなライブラリとかも使う必要なし！ウォッチャーを上手く使って状態(数値)を上手く制御してみてください。
• 「疲れ果てるのではなく、楽しもう」
  こういうスタンスで仕事にも向き合いたいものです
  

エイゴ、ムズカシイ。

katashinさん

「Vue Designer: デザインと実装の統合」

デザイナーとエンジニアが使うツールが異なる、という問題について。

• デザインと実装の2重管理
  デザイナーはsketchやXDなどで管理。エンジニアはIDEやテキストエディタを使ってデザインをソースコードに落とし込む。デザインファイルとソースコードで2重の管理をする必要があり、どちらかの変更を都度都度もう一方へ追従させないといけない。スピードが早い大きなサービスだととても辛い
• この問題を解決したく、「Vue Designer」というものを作っている
  vueのSFC(Single File Componet)をプレビューして、ドラッグ&ドロップなどでデザインを直接変更。その変更がコード側にも反映される、という双方向バインディングをデモで見せていただきました。複雑なスタイルでも上手く動くのかしら、という疑問はわきましたが実際に見てすごく感動。
• chromeのdevtoolでスタイルいじってからエディターにコピペする、ってやってる方いますか？
  めっちゃいました。私もそうしています。
• ひとまずは、エンジニアが使えると思えるレベルまでもっていく
  その後、デザインツールとしてもつかってもらえるようにブラッシュアップしていきたい、とのことです。すごいバイタリティだ。

Sébastienさん

「Nuxt.js 2.0」

Nuxt.jsはVue.jsを利用して作成されたフレームワークです。SPAを爆速で作成できます。
SSRの基盤を提供してくれるので、すぐにコーディングに入れるのは魅力ですね〜

• Nuxt2.0リリースしました
  webpack4, babel7に対応！ESMそのまま使える！ 触ります。

会場がちょっと寒くてポンポンペインでした・・・この辺りでトイレにこもってしまったの悔しい・・・

福井 烈さん

「note のフロントエンドを Nuxt.js で再構築した話」

noteというサービスをNuxt.jsを使ってフルリプレースしたというお話

• リプレース前の構成はRoR + Angular 1
  ページ表示速度が大きな課題になっていたそうです。やはり速さは正義。
• Vueを選んだ理由
  学習コストの低く、日本語の情報が多い、国内コミュニティも活発という辺りが選定の理由になったそうです。
• Nuxt.jsを選んだ理由
  規約(ディレクトリ構成等)が手に入り、SSRも簡単にできて、モダンな環境が気軽に手に入る。 ルーティングの仕組みが初めから手に入るっていうのも良いですね〜
• 設計はVuex + Atomic Design
  Atomic Designは少し勉強して「言ってることはわかるんだけど、どう分けるかの認識合わせとか大変そうだな〜」ってなってしまっていたので、この機会にもう一回向き合ってみます。
  堅牢な構成ではあるのですが、Atomic Designを採用したことでコンポーネント数が肥大化してしまい、管理が大変に。storybookを使おうとするも挫折。。Nuxt側がstorybookに対応したタイミングで、強い気持ちを持って再挑戦して今は運用中だそうです。
• インフラはLambda
  インフラもAWSも勉強不足ここに極まれりといったところでよくわからず。。Node.jsのバージョンがLambdaに依存してしまうので、Nuxtのバージョンに追従できなくなるかも、という危惧はあるとのことです。
• 実際に移行して SSRするならNuxtを使わない手はない、けどSSRが必要かどうかは要検討。
  開発の環境が整った状態で手に入るので、コーディングに集中できるっていうのも大きな強み。
  ただ、ステートの取扱いやコンポーネントの粒度などのルールはきっちりと決めていく必要がある。
  

移行期間て2つの環境が入り混じって動いてるからすごく大変そうだな、って感じました。
それでも強い気持ちを持って、手探りではあるものの開発メンバー全員でしっかり話し合って、方針を固めながら進めたんだろうなぁというのが伝わってきてとても好感を持てました。
Nuxtはいいぞ

土屋 和良さん

1年間単体テストを書き続けた現場から送る Vue Component のテスト

コンポーネントの　何を、どこまで、どのようにテストするのか、というお話。

• 何をテストするのか
  「外から見た振る舞い」をテストする。つまりはインプットに対するアウトプットが期待通りかどうか。
  じゃあそのインプットとアウトプットってなんだよ、っていうと、Vue Componentの場合は
  • [in]LifeCycle
  • [in]Props
  • [in]Store
  • [in]User Interaction
  • [out]HTML, CSS
  • [out]Event
  • [out]Action
    ということになりますねと。
    LifeCycleのテストはお決まりの処理なんかもあって、テストしても安心感はあまりなさそう。なので優先度はさげていますとのこと。なるほど。
• どうやってテストするのか
  HTMLのアサーションとか、文言が変わるたびに試験書き換えるの地獄なのでは、、ということでDOMのsnapshotを作成してそれを比較する。jsdomとJestを利用してsnapshotの生成〜比較までを行っていました。
  
• スタイルのテストに関しては、storybook+reg-suitで。
  事前に状態ごとに値を定義したbookをテストケースとして用意しておいて、githubへpushして、PR出して、CIでstorybookを立ち上げて、pupeteerでスクショとって、reg-suitで画像の差分を検出して、差分を表示した画像をs3へアップロード、その後PRへ通知。ついでにPRごとにstorybookをデプロイ。
  すばらしいフローですね。やってみたいなぁ。storybookは本当に試験したいところ以外はモック化してしまうのも重要。
• user interactionに対する試験
  ボタンクリックとかフォームバリデーション表示とかの、難易度低いものをやっている。あきらめも肝心。 基本的にはスタイルの試験と同様の方法で試験している。が、こっちの試験は文言のアサーションもしたいので、karmaとmochaを使って、値のアサーションしつつ、任意のタイミングでスクショをとって比較する
  試験用のフレームワークって１つに絞るものだと勝手に思っていたので、やりたいことに応じて分けちゃおうっていう発想はなかったです。

カバレッジにとらわれて意味の無さそうな試験を書いたり、っていう経験もあるので、諦めも肝心という言葉には尊さを感じました。

アフターパーティー

すべてのセッションが終了したあと、歓談会みたいなのもやっていたのですが、他の予定があったため出席はせず。ご飯とかお酒がかなり豪華だったらしいのでちょっと後悔。

通しての感想

初めてカンファレンスに参加しましたが、「次もまた行こう」と思える内容で、関西くらいまでならノリで行きかねない。
セッションに関しても内容が濃く、充実した時間を過ごすことが出来ました。
不満点は、ちょっと時間が押し気味でソワソワしてたのと、会場がちょっと寒かったのと、スクリーンがもう少し多いと良かったかも、くらいです。

個人的後悔

• 英語やっとけばよかった
• もっと勉強しとけばよかった
• wifiあるとは思ってなかったので、モバイルルータ契約しなくてよかった