5年目から始める Vue3 サイト改善 #frontendo

フロントエンドカンファレンス北海道2025 の登壇資料。
https://www.frontend-conf.jp/
https://fortee.jp/frontend-conf-hokkaido-2025/proposal/35167afd-956b-46b8-a8e3-38a3acd94068

Transcript

1. 5年目から始める Vue3 サイト改善 フロントエンドカンファレンス北海道2025 2025/09/06 生活協同組合コープさっぽろ デジタル本部システム企画部 木原 卓也 (tacck) 1
2. 私です 木原 卓也 Kihara, Takuya / @tacck 生活協同組合コープさっぽろ デジタル推進本部システム企画部 Software Engineer / Flutter, TypeScript, Vue.js, React ゆるWeb勉強会@札幌 主催 Amplify Japan User Group 運営メンバー AWS Community Builder Since Q2 2021 Frontend Web and Mobile, DevTools 好きなフィギュアスケートの技 スプレッド・イーグル 2
3. 生活協同組合コープさっぽろについて （※2025年3月現在） 3 設立年月日 1965年7月18日 組合員数 205万人 （組合員組織率 83.4%） 出資金額 892億円 総事業高 3,219億円 職員数 15,864名 （契約職員・パートアルバイト含む） 店舗数 109店舗 移動販売車 97台 （137市町村） 宅配物流センター 43センター 9デポ 車両1,300台 配食工場 6工場（札幌、函館、苫小牧、旭川、釧路、帯広） 生産工場 石狩食品工場、江別食品工場、はまなす食品、江別物流センター 生鮮センター（ＰＣ）、ドリームファクトリー（函館）
4. 生活協同組合コープさっぽろ コープさっぽろは60周年を迎えました!! 4
5. 60周年企画の一例 5
6. 生活協同組合コープさっぽろについて 6
7. 宅配トドック 北海道内向けの宅配事業。 (離島にもお届け) • 注文した商品を翌週配達 • お支払いは1ヶ月ごと • 置き配対応 • 資源回収も実施 7
8. トドックサイト 宅配トドックに特化した Webアプリケーション。 アプリの宅配注文機能は、 トドックサイトをWebViewで 開くことで対応している。 Vue3 で作っています!! 8
9. トドックアプリ コープさっぽろの 各種サービスに使えるアプリ • 宅配トドックの注文 • お店の組合員証(ちょこっとカード) • 購入履歴確認(宅配・店舗・その他事業) • etc Flutter で作っています!! 9
10. トドックサイト 宅配トドックに特化した Webアプリケーション。 アプリの宅配注文機能は、 トドックサイトをWebViewで 開くことで対応している。 Vue3 で作っています!! 本日は、こちらについてお話しします。 10
11. 本日お話しすること • トドックサイトの歴史 • 改善のきっかけ • プロダクト考古学 ◦ 今の視点で振り返ってみる • 改善のステップ ◦ すぐやれるもの ◦ 利用者の体感として効果の大きいもの ◦ 調整が必要だが効果の大きいもの ◦ 中長期的に目指すもの • プロダクト未来学 ◦ これからの視点で考える 11
12. トドックサイトの歴史 12
13. 2020 2021 2022 2023 2024 2025 トドックサイト・アプリの歴史 2019年8月 トドックアプリ v1 公開 eトドック時代 内製メイン 2020年12月 トドックサイト Vue 2 版 公開 2020年8月 トドックサイト 内製化開始 2022年1月 内製版 トドックアプリ 公開 2021年6月 トドックアプリ 内製化開始 2023年12月 トドックサイト Vue 3 対応開始 2024年3月 トドックサイト Vue 3 版 公開 木原 チームに合流 主にアプリ担当 13 電子組 合員証 ポイント 刷新 ポイント 刷新 デジタル 納品書 デジタル 納品書 検索 サジェスト 早い者 勝ち デプロイ 自動化 みんなで トドック 地域限定 品 検索 サジェスト その他事 業加入 お気に入 り商品 お気に入 り商品 2025年2月 トドックサイト 改善着手 連絡ノー ト 見守りト ドック 見守りト ドック 検索エン ジン改善 検索エン ジン改善 訳あり 抽選化 問合わせ フォーム
14. トドックサイト・アプリのアーキテクチャ概略 14
15. トドックサイト・アプリのアーキテクチャ概略 15 今回のお話しの範囲
16. 改善のきっかけ 16
17. きっかけ / トドックアプリの障害 2025年1月末 トドックアプリを起動すると、宅配注文の画面が真っ白に。 トドックアプリ、トドックサイト、両方の線で調査に着手。 結果としてアプリの問題だったが、 17
18. きっかけ / トドックアプリの障害 2025年1月末 トドックアプリを起動すると、宅配注文の画面が真っ白に。 トドックアプリ、トドックサイト、両方の線で調査に着手。 結果としてアプリの問題だったが、サイトの index.js の ファイルサイズが肥大化していることに気づく。 18 未圧縮: 5.3 MB GZIP: 1.5 MB
19. Lighthouse で計測 パフォーマンスが真っ赤。 各メトリクスも良くない。 ※ローカルでの再現 19
20. この時にわかったこと・感じたこと • バンドルの状態を見ると、チャンク化・ Tree shaking できていない? ◦ index.js にすべてが詰まっている。 • 画面レイアウトの安定性が低い ◦ 動的に構築する箇所の高さや幅が未指定。 • 起動時のローディングが長め（特に Android アプリからのアクセス） ◦ index.js 以外も、リソース類のサイズが大きめ。 ▪ 動的要素のJSONファイルに無駄がありそう。 ▪ 商品画像のサイズも大きめ。 20
21. プロダクト考古学 今の視点で振り返ってみる 21
22. プロダクト考古学 / 今の視点で振り返ってみる 22 • 事業に関わる開発 • 意図的な改善 • 規模の成長による変化への対応 • サイトとアプリを跨いだ改善 できていた できていなかった 安全な運用 慣れによる見過ごし メンバーの専門職化
23. プロダクト考古学 / 今の視点で振り返ってみる • 事業に関わること・意図的な改善 ◦ サービス維持には一定の売り上げが必要。 そのための機能拡張や不具合修正に重点が置かれた。 ◦ コードや運用が、初期のまま維持される傾向がある。 ▪ 初期実装ベースで問題なく動いている。 ▪ JSONでのデータ更新も、支障なく運用を続けられている。 うまくいく形ができたら、それを維持する(安全に運用する)。 23
24. プロダクト考古学 / 今の視点で振り返ってみる • 規模の成長による変化への対応 ◦ コードや運用が、初期のまま維持される傾向がある。 ▪ 機能拡張や不具合修正に重点が置かれた。 • コードの継ぎ足し、複製しての実装、が優先された。 ▪ 本番の環境が、検証環境・開発環境で再現されていない。 • 開発中に本番で起きたこと(データ量の増加)に気づけない。 慣れにより、小さな変化を見逃していた。 24
25. プロダクト考古学 / 今の視点で振り返ってみる • サイトとアプリを跨いだ改善 ◦ モバイルで扱う WebView アプリ = Web フロントエンドの知識 x モバイルデバイスの知識 x ネイティブアプリの知識 全てを兼ね備えるのは難しい!! ◦ 開発速度を高めるため、サイト・アプリで主要担当者が固定化。 歴史を重ねる中で、メンバーの専門職化が進んでいた。 25
26. 色々積み重なった結果 サイトの性能問題が見過ごされてしまった。 26
27. 改善のステップ 27
28. どうやる その他業務もある中で、どうやって成果をあげながら進めるか。 まずはチャンク化 ・ Tree shaking から着手。 すぐやれるもの チャンク化 Tree shaking 利用者の体感を良くするもの 起動時のローディング方針変更 画面レイアウトの方針変更 通信量を減らすもの JSON最適化 画像最適化 中長期的に目指すもの コード整理による転送量の削減 (ライブラリの置き換え含む ) 28
29. すぐやれるもの チャンク化 Tree shaking 29
30. Vite でチャンク化 使っているライブラリを、 一通りチャンク化。 30
31. Lighthouse でバンドルの状態確認 31 @mdi/js の占める割合が高い サイズも大きい (804.4 KiB)
32. @mdi/js の使い方を変更し Tree shaking 32 main.ts 各 Vue コンポーネント before mdi-vue をやめる
33. @mdi/js の使い方を変更し Tree shaking 33 MdiVue3Icon.vue アイコン用コンポーネント作成 (<mdicon> の代替) after 代替品を実装
34. @mdi/js の使い方を変更し Tree shaking 34 各 Vue コンポーネント after @mdi/js の中を個別指定
35. 対応結果 チャンク化されていることを確認。 index.js のサイズも削減。 35
36. 対応結果 @mdi/js のサイズが 804.4 KiB → 1.5 KiB Tree shaking もできていそう。 36
37. 利用者の体感を良くするもの 起動時のローディング方針変更 画面レイアウトの方針変更 37
38. 起動時のローディング方針変更 トップページ表示する際に、下記の情報(API/JSONファイル)を取得している。 これら取得中に、ページ全体のローディング表示を行っていた。 • 組合員情報 • おすすめ商品 • お知らせ (共通) • バナー (共通) • 商品カテゴリー (共通) 「共通」情報は、トップページの初期構築には不要。 38
39. 動的要素ごとのローディングへ変更 39 現行: ページ全体のローディングのみ 変更: 動的要素ごとのローディング
40. 画面レイアウトの方針変更 ユーザー共通で表示する項目にプレースホルダーを置いて、 height / width の指定。 40 height / width 指定
41. ページ全体のローディング時間短縮 41
42. ページ全体のローディング時間短縮 42
43. レイアウトの安定化 43
44. 通信量を減らすもの JSON最適化 画像最適化 44
45. CloudFront からのダウンロード量調査 CloudFront のレポートに出てくる 「人気オブジェクト」を調査する。 この中で、対処できるもののうち、 効果が上げられる順に進める。 45
46. 調査結果 • JSON ◦ 人気商品情報 ◦ お知らせ情報 ◦ バナー情報 ◦ FAQ情報 ◦ 訳あり商品情報 • ライブラリ ◦ Moment.js ◦ axios ライブラリについては、「中長期的に目指すもの」の範囲とする。 ここでは、JSONファイルのサイズ削減を行う。 46
47. JSONファイルのサイズ削減はどこでやる? 47 宅配事業部メンバーの扱う GAS (Google Apps Script) を改修
48. JSONファイルのサイズ削減対応 • 期限のある項目は、出力時に期限外のものを除外。 • JSONファイルの出力時の整形処理を除外。 • 未使用の「人気商品情報」は、サイトの呼び出し処理自体削除。 48 アイテム 生成ファイルサイズ (Bytes) CloudFront ダウンロード容量 (GB / 月) 削減率(%) 対応前 対応後 対応前 対応後(予測値) 人気商品情報 300,510 0 97.4 0.0 100.00% お知らせ情報 44,221 217 55.4 9.4 83.07% バナー情報 209,083 21,730 92.1 21.0 77.25% FAQ情報 111,230 83,836 120.8 102.8 14.86% 訳あり商品情報 26,919 951 12.7 6.9 45.79%
49. 週次で、下記2種類の画像を生成している。 • 1000px ✖ 1000px • 380px ✖ 380px 現在は、商品画像に対して下記課題が見えており、 順次対応中！ • サイトで一番必要なのは「160px ✖ 160px」の画像 • 圧縮率の割に画像ファイルの容量が大きいものが存在している WebPも使うようにしたいが、上記の効果を見てから検討。 商品画像 (対応中) 49 2025年9月2週の商品例 380px ✖ 380px の画像を使っているが、 画面上は 160px ✖ 160px で表示。
50. 中長期的に目指すもの コード整理による転送量の削減 50
51. ライブラリの対応 現代において、 Moment.js と axios は使わなくても機能を実現可能。 • Moment.js は day.js に置き換え可能 ◦ これは非推奨ライブラリのため、中長期に置いたが早めに対応。 ◦ Kiro (AWS製 AI IDE）で修正できているので、近い内にリリース予定。 • axios は ブラウザ標準APIの Fetch API に置き換え可能 ◦ トドックアプリの公開当初は必要だった(iOS 10.2以下もサポート対象)が、 現在は置き換え可能になった。 ◦ 通信処理のリファクタリングとして取り組みたい。 51
52. コード整理も課題 • CSSの整理 ◦ Global にするのか、コンポーネントの scoped にするのか。 • Tailwind CSS のさらなる活用 ◦ ブレークポイント周りの記法を Tailwind CSS 対応に。 • コンポーネントの粒度にばらつきも ◦ 基本的な方針を整備。 52 Vue 2 Vuetify 2 Vue 3 Tailwind CSS Vue 3 対応はしたがコードに課題も
53. 現在の状況 (対応中含む) パフォーマンスはある程度改善。 CLSは大きく改善。 その他も少しずつ改善。 53
54. プロダクト未来学 これからの視点で考える 54
55. プロダクト未来学 / これからの視点で考える • 事業に関わること・意図的な改善 ◦ 売り上げのための施策は必須。 ◦ 「施策を進めた結果、出てきた課題」を見えるようにする。 ◦ Core Web Vitals 、 PV などの客観的数字の観測。改善ポイントをつかめるようにする。 • 規模の成長による変化への対応・サイトとアプリを跨いだ改善 ◦ 開発中の環境を整える意識を、共通認識へ。 ▪ 共通認識にすることで、仕組みづくりの優先度をあげる。 ◦ 観測と対応のサイクルを、チームの取り組みへ。 ▪ 数字にもとづいた改善提案と実施。 55
56. プロダクト未来学 / これからの視点で考える • プロダクトの状況を数値で観測 • 数値からプロダクトの健康状態を分析 • 改善の提案と対応 現在 New Relic / Google Analytics を を導入しているが活用が不十分。 この項目のこの変化はプロダクトとしてどういう状態か、定義しチームで共有。 これができれば、改善が必要か、いつまでに必要か、が判断できる。 実質的な SRE(Site Reliability Engineering：サイト信頼性エンジニアリング) としての活動を目指す。 56
57. プロダクト未来学 / これからの視点で考える トドックサイトで「つなぐ」 • 人と食をつなぐ ◦ 宅配サービスで注文頂いた商品を組合員様へ • 人と人をつなぐ ◦ 事業メンバーの思いを組合員様へ • 人と未来をつなぐ ◦ より良い仕組みで組合員様へ 57
58. 我々は「システムでつなぐ」担当 58
59. いっしょにつなぐ仲間を募集中!! 59 https://www.wantedly.com/companies/company_7505384 https://dx.sapporo.coop/
60. 60 宣伝
61. 61 FlutterKaigi mini #5 @Sapporo (10/4開催) https://flutterkaigi.connpass.com/event/365934/ Flutter の大規模カンファレンス FlutterKaigi の地方出張イベン ト「FlutterKaigi mini」を札幌 で開催します!! セッション・LT登壇者も募集中で す!!
62. ありがとうございました!! 62