【参加レポート】 2019/9/6 Business.vue〜企業でのVue.js導入事例勉強会〜
発表①：大手キャリアサービスでVue.jsを使った話
登壇者：株式会社mediba / auサービス開発部 部長 土方 哲雄様 ＆ auサービス開発部 FE/川上 竜太郎様
auスマートパスを中心としたau関連サービスの開発運用を担当
auに関連しないサービスも
auスマートパスにおけるvue.js
①PHPで作られている動的画面
②静的HTMLを表示するLP向け画面
とにかく高速にHTMLを返す！
運用は想定していない
どうしても運用が発生する
・某CMに合わせて更新してくれ！
Excel関数でJSオブジェクトに代入するものを作った
でも
・見通しが悪い
・HTMLとデータが分離されていない
vue.jsを使って解決！ありがとう！
→Android2に対応する必要が…！？
Polyfillで解決できた
フロントエンドの技術刷新で困ったこと
vue.jsとNuxt.jsを使ってます
NuxtとTypeScript
TypeScriptの導入に迷った
・静的型付けのメリットがわかってなかった
・スピードが出ないのではという懸念
デザインシステムにAtomic Design
変化し続けるデザイン案件
段階的に完成するデザイン
molculesとorganismsのことは一旦置いて置いて進めた
molculesとorganismsをどう分けるか問題
・チーム内でルールを定めた
TypeScriptを勇気を出して導入して正解だった
発表②：デザイナーがゆるく関わるVue.js〜導入や管理、開発の流れなど〜
登壇者：合同会社DMM.com / 動画配信事業部（デザイナー） 中田 裕美子様
SVODとPPV型の動画配信
VRコンテンツ、舞台のライブ配信
デザイナーがHTMLコーダー＋JQ
エンジニアがバックエンド
二度手間になったりして申し訳ない
当時の担当者がいなくなって要件が不明
デザイナーがVueを触ることになった経緯
体制変更
機能別でなく、要件別にチームが別れた
改善チーム
同じようなパーツがあったりと言う諸問題
技術選定
React.js VS Vue.js
選定の理由
・チュートリアルのとっつきやすさ
・学習コストの低さ
・.vueファイルのシンプルさ
開発の流れ
要件定義
・全員の認識を合わせる
モック
・お互いの状況を共有しつつ作成
・デザインと機能を同時進行で
・共有がしやすい
・ここどういう仕様ですか？
・異業種での化学反応
開発
・フロントエンドエンジニアの手厚いサポート
・環境構築
・自動生成
・Vueの解説
管理方法について
Storybookを使用
発表③：アイスタイル特設サイトにおけるVue.js導入事例
登壇者：株式会社アイスタイル /R&D部 技術開発グループ チーフエンジニア 久保田 賢二朗様
なぜVue.js
・社内での知見
・VueCLI