Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js は裏切らない / UIT#5

Vue.js は裏切らない / UIT#5

399e7330fa2a9ed06cbe81308ba8db6e?s=128

Yuji Yamaguchi

November 29, 2018
Tweet

Transcript

  1. Vue.js は裏切らない 2018/11/29 UIT#5 Yuji Yamaguchi

  2. 自己紹介 ▸ 名前 ▸ ヤマグチ ユウジ ▸ 職種 ▸ フロントエンドエンジニア

    ▸ 経歴 ▸ 2011年04月 通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月 ネット広告系企業 ▸ 広告配信管理システムの開発運用 ▸ 2016年10月 株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発 ▸ 横断フロントエンドチーム 2
  3. 3 今日話すこと

  4. 飲食店向け予約台帳アプリ:レストランボード 4

  5. 5 独自フレームワークを Vue.js で置き換えている話

  6. Vue.js で置き換えている話 ▸ 独自フレームワークについて ▸ Vue.js 導入前にやったこと ▸ 良かったこと /

    悪かったこと ▸ まとめ 6
  7. どんな独自フレームワーク? ▸ jQuery 製、2014年末頃に誕生 ▸ Babelify で ES2015 化、
 MorphDOM

    で 差分レンダリング を実現 ▸ Template に Model を渡すとレンダリングし、 
 Selector と Function を渡すとバインドする MVVM 7
  8. 入力値を表示する場合 8

  9. 9 完成度は高いが 今後の継続性に不安...

  10. まずは足元を整えることから開始 ▸ Browserify を webpack に ▸ Grunt を Gulp

    / npm script に ▸ JSLint を ESLint / Prettier に ▸ Mocha を Jest に ▸ $.Deferred を Promise(bluebird)に ▸ and more... 10
  11. 開発の歴史 11 2014/12 2016/10 2017/10 2018/10 2015/4 独自FW誕生 レストランボード
 開発開始

    脱Browserify 脱Grunt ESLint Jest Prettier Promise Vue.js async / await 足元の整理に二年弱くらい
  12. Vue.js 導入時に心掛けたこと ▸ 小さく移行する ▸ Drastic に変えない ▸ 画面毎や部品毎、 Molecules

    や Atoms から導入 ▸ 案件で触る部分だけ、リファクタリングの粒度にとどめる ▸ 移行で I/F が変わらないことが大事 ▸ レガシーコードの ロジックは資産、できるだけそのまま使う 12
  13. 13 導入による大きなインシデントは いまのところなし!

  14. Vue.js 導入で良かったこと ▸ 学習曲線が緩い ▸ バックエンドからの転向組でも立ち上がりがスムーズだった ▸ template, script, style

    の SFC はわかりやすい ▸ 誰が書いても それなり に書ける ▸ 人材が少ない中で 誰でもそれなり はすごく嬉しい 14
  15. Vue.js 導入で難しかったこと ▸ 自由にできすぎる... ▸ watch or computed ? created

    or mounted ? ▸ ついでに新しい技術等も一緒に入れようとして影響が肥大化する ▸ やらないことを決める のが大事 ▸ 秩序とは制約の上に成り立つ 15
  16. 現状の導入比率 16 59% 41% 60画面中25画面で導入済み

  17. 17 まとめ

  18. まとめ 利益を出しているサービス開発において 継続性はものすごく重要で 誰でもそれなりに使えるFWはありがたい やらないことを決めるのがすごく難しいが 新旧が共存しながら移行できるのは Vue.js の柔軟性があってこそ 18

  19. 19 Vue.js は裏切らない!

  20. 20 EOF