「UIT#5 わたしたちにとってのVue.js」に参加してきました

勉強会メモ
  • UIT#5 わたしたちにとってのVue.jsに参加してきました。

uit.connpass.com

  • UITは#2から毎回参加していて4回目の参加でした(#4の参加レポート)
  • 今回はVueにフォーカスした勉強会で、事例を中心に技術選択の参考になるお話を聞けました。
タイトル 発表者
ゆるふわに既存Vue(Nuxt)プロジェクトをTypeScriptに移行してみた @Motonori Iwata
カメラを利用したアプリを作って約1,000人で遊んだ話 @KenjiroKubota
jQueryからVue.jsへリファクタしたPJの話 @tak
さくらのフロントエンド さくらの Vue.js @ravelll
Vue.jsは裏切らない @Yuji Yamaguchi
building better Vue components with storybook @julien

ゆるふわに既存Vue(Nuxt)プロジェクトをTypeScriptに移行してみた

  • @Motonori Iwata

TSへの移行

  • 社内ツールをTSに移行
  • Nuxt
  • Firebase
  • コンポーネント23個
  • 新規開発は停止
  • 4週間で移行完了

移行の順序

  • components -> utils/plugins/middleware -> store -> test
  • testが通ること確認しながら

設定

  • tsconfig.json
    • alloJSは一時的にtrueで
    • implicit anyは弾く

Linter

  • Xoを使ってる
  • https://github.com/xojs/xo
  • 型引数にしか使ってない変数がエラーになる
    • no-unused-varsをoffにして対応
  • 結構罠がありそうだからTSLintの方がいいかも

Components

  • vue-shims.d.tsをおく
  • vue-convertを使ってclassに変換

Test

  • jest使ってる
  • ts用のjestを追加

カメラを利用したアプリを作って約1,000人で遊んだ話

  • @KenjiroKubota(株式会社アイスタイル)

社内のイベントでアプリを作った

  • 表情を検出して笑顔度を測るアプリ

技術

WebRTC

  • WebRTC API
  • videoのリソース開放も忘れずに
  • requestAnimationFrame()
      • beforeDestroyで都度終了させないと重くなっていく

まとめ

  • Vueはググれば情報豊富
  • VueCLIのおかげでwebpackの苦労が不要
  • Firebaseすごい

jQueryからVue.jsへリファクタしたPJの話

  • @tak(LINE)

背景

  • 古い技術スタックのプロジェクトを担当した
  • どうやってリプレイスしていったのか

現行とゴール

  • LINE Webログイン
    • SSOを実現するページ
  • 現行ページ
  • 新ページ(順次公開予定)

なぜ置き換える必要あったか

  • 既存コード
    • 複雑に絡み合っていた
    • 担当者のスコープや責任が明確になっていなかった
      • CSS/HTMLの変更でもサーバサイドに手が入る
  • データやイベント発火フローの確立
  • 今後のリッチなUIへの対応
  • jQuery -> Vue
  • VueCLI3
  • バックエンドではエントリーポイントのルートコンポーネントだけ作成

リプレイス方法

  • $('xxx').on -> v-on
  • $('xxx').hide -> v-if
  • 等々

移行の例外

  • グローバルなメソッドを使った暗号化処理
  • 無理せずそのままにした
  • 外部ライブラリ的に使えるようにした

まとめ

  • データフローが明確になって運用コスト下がった(はず)
  • リファクタリングが危険な道は回避することも大事

さくらのフロントエンド さくらの Vue.js

さくらのフロントエンド

  • サーバ屋さんのフロントエンド
  • Vueがけっこう使われている
  • Vueの使い所
    • コントロールパネル
    • 問い合わせ/申し込みフォーム
    • 社内向けツール

なぜVue

  • デザイナと協業しやすそう
  • 公式からツールが出てる安心感
  • 日本語ドキュメント充実

事例

  • サービスコントロールパネルを刷新した
  • メンテしづらく属人化
    • Vueにリプレイス

技術スタック

  • Vue + Vue Router + Vuex
  • SPA, 非SSR, 非Nuxt

ディレクトリ構成

  • components
    • storeにはアクセスしない
  • pages
  • plugins
    • アプリ全体の挙動を変更する実装
    • Vue.useして使うもの
      • Vuelidateとか
  • utils

エラー検知

  • Sentry
    • 導入簡単
    • 401(セッション切れ), 422(APIのバリデーションエラー)以外を記録

テスト

  • コンポーネントのテストは複雑なとこだけ
  • データフロー以外のロジックを含むStoreのメソッド
  • jest使ってる

パッケージアップデート

  • yarn upgradeしてPR投げるCIを週一で
    • これはマイナーバージョンだけ
  • メジャーバージョンは手動

困りごと

  • デザイナーとの協業
  • コンポーネントの細かい挙動をSketchで伝えるのが大変
  • storybookを導入しようとしてる

Vue.jsは裏切らない

事例

従来

  • jQueru製の独自FW(2014末)
  • BabelifyでES6化
  • 秘伝のタレの積み重ねで完成度は高い
    • でも継続性に不安

やったこと

  • Browserify -> Webpack
  • Grunt -> Gulp/npm script
  • Mocha -> Jest

心がけたこと

  • 小さく移行する
    • 稼働してるプロジェクトだから
  • 画面ごと部品ごとに
  • さわるところだけとかリファクタリングだけとか
    • I/Fが変わらないことが大事
  • レガシーコードでもロジックは資産

良かったこと

  • バックエンドから転向組でもスムーズだった
  • template/script/styleのSFCわかりやすい
  • 人材が少ない中で誰でもそれなりに

難しかったこと

  • 自由にできすぎる
  • やらないことを決めるのも大事

まとめ

  • 利益をだしてるサービスの継続性は重要
  • Vueなら徐々に移行できた

building better Vue components with storybook

  • @julien(LINE)

Atomic Design

Vueに適用

  • 親から子はproperty
  • 子から親はイベント
  • propertyは一番シンプルに
  • 兄弟要素で相互に通信するのはだめ
    • 親を介してやりとりする

Storybook

  • 簡単にインスール/セットアップできる
  • whiteroom
    • Vueで作ったStorybook
    • Storybookの足りないところがあったから自作した
  • Vueで作ってるからライフサイクルを意識する必要がない
  • イベントも全部見れる
  • propertyとeventを同時に見ることができる