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