Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Increase productivity with vue.js

4割はちょっと盛っていました。

  • Login to see the comments

  • Be the first to like this

Increase productivity with vue.js

  1. 1. ECサイトのコンテンツ制作効率を
 "4割" 改善した話
 ・業務負荷軽減 ・デザインコンポーネント化 ・Vue.js導入 2019/8/5 報告者:パルシステム生活協同組合連合会 奥脇
  2. 2. コンテンツ制作がつらみ

  3. 3. 何で?
 PCサイト SPサイト アプリ
  4. 4. 3サイト分の制作!
 PCサイト SPサイト アプリ
  5. 5. 3サイト分の登録!
 PCサイト SPサイト アプリなんとか改善できないか?

  6. 6. ECサイト関係者で検討した結果・・・

  7. 7. PC/SP/アプリ画面の共通化 !!
 【工数削減目標】 33%削減(1/3工数減らす)
 共通コンテンツ画面

  8. 8. どう進める?
 ① デザインコンポーネント化
 ② HTML5/CSS3導入
 ③ Vue.js導入

  9. 9. ①デザインコンポーネント化
 1)デザインがサイト毎・画面毎でバラバラ 2)モック作成の工数大   (企画チーム・運用チームとの調整) 3)モックからの実装の工数大(取り込み難) これまでの課題
  10. 10. デザインがサイト毎・画面毎でバラバラの例
  11. 11. ①デザインコンポーネント化
 やる!
・AtomicDesign採用
 ・デザインの制約を企画チームに丁寧に説明
 ・企画/デザイン/開発チームの協業のしやす 
 さの土台を作る

  12. 12. どう進める?
 ① デザインコンポーネント化
 ② HTML5/CSS3導入
 ③ Vue.js導入

  13. 13. ②HTML5/CSS3導入
 古い端末・ブラウザの利用者
 問題2: Android4.0以上をサポート
 問題1: 古い端末・ブラウザの利用者

  14. 14. ②HTML5/CSS3導入
 古い端末・ブラウザの利用者
 問題2: Android4.0以上をサポート
 問題1: 古い端末・ブラウザの利用者
 やる‼
 ・事前告知徹底/ログイン画面でアナウンス
 ・スマホアプリ(Android)はCrossWalkを導入

  15. 15. どう進める?
 ① デザインコンポーネント化
 ② HTML5/CSS3導入
 ③ Vue.js導入

  16. 16. 問題1: 古いフレームワークの利用
 ③Vue.js導入
 問題2: Vue.jsは開発チーム未経験

  17. 17. 問題: 古いフレームワークの利用
 ③Vue.js導入
 やる!!!
 ・適用範囲を絞る(一覧画面、詳細画面)
 ・標準化チームによるサポート体制強化

  18. 18. ③Vue.js導入
 ちなみにVue.js採用理由 「当時(2017年)のトレンドであり、今後も勢いが増すと思われ た」というのが一番の理由 ・プログレッシブフレームワークで部分的な採用が可能 ・単方向データバインディングが望ましい(×Angular) ・TypeScriptを即時採用できないと判断(×Angular) ・JSXを即時採用できないと判断(×React)
  19. 19. 2018年5月
 プロジェクト始動

  20. 20. 開発スケジュール
 要 件 定 義 設 計 受け 入れ 製 造 IT ST リ リ I ス 2018年
 5月
 10月
7月
 1月
 2019年
 4月
 5月
 5/27

  21. 21. デザイン面で注意したこと
 1)バリエーションを安易に増やさない 2)コーディング方針やルールの可視化・文書化 3)Vueコンポーネント化の粒度や   バリエーションの決定を   開発チームと密に連携
  22. 22. 設計・実装面で注意したこと
 1)設計書のテンプレ化 2)標準化チーム交えたレビューの徹底 3)不要な機能は廃止し、シンプルに 4)決定事項はちゃんと整理して   見える化(管理面)
  23. 23. 設計・実装面で起きた課題
 1)設計書の記述レベルがまちまち 2)ITで障害が多く発生 3)Vue.js関連  ・「前に戻る」で画面位置が最上部に ・テストコード作成に時間がかかる
  24. 24. ついでにレスポンス改善(年末の障害を受けて)
 ・SQLチューニング ・フロントで発行する  SQL設計の見直し
  25. 25. 2019年5月27日
 リリース

  26. 26. リリース結果・・・
 ・大きな障害は無し ・問い合わせもほとんど無し ・商品一覧画面で「注文番号」を  表示しないようにしたことで  問合せ発生!!  → 早急に再表示
  27. 27. レスポンス改善の結果・・・
 ・平均レスポンスが3s→1sと大幅改善  ※ただし、Androidは端末性能の低い   ものは逆に遅くなった → 調査中 ・DB負荷の高いSQLがほとんどなくなった ・読み込むJSが多すぎる  → 精査していく
  28. 28. コンテンツ制作業務の効率は・・・
 【結果】 約4割 作業工数削減 【目標】 33%の作業工数削減

  29. 29. 反省点・・・
 ・既存ドキュメントの質が低い
  → IT不具合が多発
 ・vue.js実装(実装/レビュー/PT)の手順が事前に 定義されていなかった
 ・既存ユーザが重視している情報を安易に 廃止してしまった
  30. 30. 今後どうしていくか?
 ・テスト品質向上
 ・ドキュメント整備
 ・TypeScriptを導入
 ・共通コンテンツ画面をスマホアプリの
  TOP画面に適用(近々リリース予定)

  31. 31. まとめ
 ・業務負荷改善だけでなく保守性向上に繋がった
 ・Vue.jsは学習効率も良く当会にマッチしていた
 ・デザインコンポーネント化は当たり前
  (もっと早くやっておけば良かった)


×