Business.vue〜企業でのVue.js導入事例勉強会〜
https://gyazo.com/e9c14b787afe808396dd70530441d445
Vue.jsを採用している企業がどのようにVue.jsを利用しているのか、なぜ採用しているのか、どんなところがいいのかを共有 auサービス開発部
部長 土方 哲雄
FE 川上 竜太郎
KDDI 株式会社の auスマートパスを中心としたau関連サービス運営の他、国内外にてカルチャー・ゲーム・子育て等、幅広い分野でサービスを展開し、ユーザーがインターネットを通じて必要な時に必要な情報にアクセスできる環境づくりのためのサービスを提供しています。
サービス
auスマートパス
auWebポータル
au天気
ポイント貯める
過去の話
画面は2種類
phpで作られている動的画面
管理画面から登録したデータ・会員種別を元に動的表示
静的HTMLの表示するLP向け画面
訴求ページ
アクセス数をさばくことに特化
サーバーサイドロジックなし
定期的な管理は想定していなかった
どうしても運用が発生する
更新内容をExcelで依頼、都度マークアップしていた
Excel関数をJSオブジェクトに代入して出力するようにしていた
データとビューが分離されていなかった
構造とデータを分離することができる
問題点
Android2系の対応
0.11.5ではshimができない
es-shims
ES5.shim.js
ES5.sham.js
フロントエンドの技術刷新
auスマートパスのリニューアル
困ったこと
技術選定
静的型付け言語の経験がない
スピードがでない懸念
メリットが分からなかった
anyで握りつぶしつつ
型システムは徐々に構築
分かってくると楽しいし安心感をもって開発できる
要件がどんどん変わって段階的に完成していく
断片的だとmolculesとorganismsの定義がむずかしいい
解決策
いったん考えない
PagesにAtomsを並べていく
デザインが揃ってきたらmolculesとorganismsの定義をしていく
コンポーネント分離の基準
molculesとorganismsをどう分けるか
再利用性はmolcules
マージンをつけるのはorganismsに
storeへのアクセスルールがないと運用がしんどい
pagesのみ
デザイナーがゆるく関わるVue.js〜導入や管理、開発の流れなど SVODとPPV型の動画配信
運用20年間
2010年当時の開発
デザイナーがコーディング
使い回せるように実装
修正する時にエンジニアの手を借りていた
システムがプログラミング・共通化
影響範囲があいまいになって検証ができなかった
体制が変更されて改善チームに
開発の課題だしをすることに
同じパーツが複数ある
どこに影響があるか
もっと身軽になれないか
部品をフロントで管理しよう
技術選定
肥大化して一気に変えるのは厳しい
チュートリアルが分かりやすい
API・モデルが分かりやすい学習コスト
シンプル
開発の流れ
要件定義
モック
お互いの状況を共有しつつ作成（デザイン・機能）
開発
フロントエンドが手厚くサポートしてくれる
環境構築のフォローをしてくれる
.vueの自動生成
lintの導入
デザイナーが弄れる利点
実際のデザインのイメージをもって実装できる
デザインデータとブラウザとの差異
管理方法
デバッグ
まとめ
template, script, styleが分かれているので分担しやすい
実装に関わることで構造を知った上でデザインできる
同時開発で余裕が生まれる
Beauty × IT
@cosume Beauty Day 2018でVue.jsを導入 国内最大
1900ブランド
35000アイテム
20%ポイント還元
1日限りのキャンペーン
CM放送もやっていた
要件
CMによるスパイクアクセス
11/1からティザー公開
19からは予約が可能
それ移行はアイテムが変化
数時間おきにアイテムが変化
PC・SPは別テンプレート
導入実績があった
社内的に横断しているコンポーネントがあった
動的じゃないページがある・各ページの公開日が違う
静的なページを時限式に出し分ける方法
privateに日時別のディレクトリに置いておく
時間ごとに似たようなデータが重複
何時に配信されるJSONかを生成
JSONに基づいてディレクトリに格納
配信するのはpubilcディレクトリのみ
コンポーネント単位でVue.jsを使う
商品詳細
カートに入れるボタンを生成
商品検索
ページネーションあり
コンポーネント単位でインスタンス化
ロジックをmixinにして共通化
各デバイスへの書き出し
vue-cli-service buildで
HTMLでは別途runtimeを読まなければいけない
コンポーネントのテスト
APIレスポンス内容によって表示文言を変える
@vue/test-utilsを利用する
Jest Mockでレスポンスをモック
モックレスポンスを取得