Vue.jsを用いて数万の農地データ情報を数秒で表示させるまでのカイゼンの軌跡

Transcript

1. © 2019-2024 OPTiM Corp. All rights reserved. 1 株式会社オプティム 西村 v-Tokyo Meetup #19 2024.03.06 Vue.jsを用いて数万の農地データ情報を 数秒で表示させるまでのカイゼンの軌跡
2. © 2019-2024 OPTiM Corp. All rights reserved. 2 自己紹介します！
3. © 2019-2024 OPTiM Corp. All rights reserved. 3 西村 ソリューション開発部 農業チーム ・趣味： お菓子作り、クラフトビール 2021年入社 自己紹介 ・現在の業務：農業プロダクトのフロントエンド、バックエンドの開発を担当 現場視察 & 作業もします ・・・
4. © 2019-2024 OPTiM Corp. All rights reserved. 4  会社・事業紹介  カイゼンの軌跡  最後に 今日の目次
5. © 2019-2024 OPTiM Corp. All rights reserved. 5 会社・事業紹介
6. © 2019-2024 OPTiM Corp. All rights reserved. 6 アグリテック アグリテック アグリテック デジタルヘルス デジタルコンストラクション デジタルヘルス その他 その他 その他 オフィスDX モバイルマネジメント マーケティングDX マーケティングDX 映像管理DX オフィスDX その他 プラットフォーム プラットフォーム オフィスDX OPTiMは、AI・IoT・Cloud・Mobile・Roboticsを使った 新しい価値を創造し続け、あらゆる産業のDXを推進し、 あらゆる人々に、豊かでサステナブルな未来を実現する企業です プラットフォーム
7. © 2019-2024 OPTiM Corp. All rights reserved. 7 • 農薬散布のデジタル化サービスを支える アプリケーションを開発している (Vue3移行済み) • 農薬散布を効率よく進めるための機能が盛りだくさん！ • 農地データのデジタル化 • 農薬散布の計画を自動作成 • 適期計算機能 etc 事業紹介(農業DX)
8. © 2019-2024 OPTiM Corp. All rights reserved. 8 カイゼンの軌跡
9. © 2019-2024 OPTiM Corp. All rights reserved. 9 本サービスにデジタルな農地データ(ポリゴンデータ)は欠かせない そのデータはGoogle Maps API を活用し、表示している スライドでは国土地理院の地理院地図 を使用 この枠のことを ポリゴンと呼びます
10. © 2019-2024 OPTiM Corp. All rights reserved. 10
11. © 2019-2024 OPTiM Corp. All rights reserved. 11 2022年開発初期 約100 ~ 300 ポリゴン/アカウント 2022年 約1000 ~ 5000 ポリゴン 2023年 約5000 ~ 10000 ポリゴン 2024年 ~ 数万 ポリゴン 本サービスの成長とともに扱うポリゴンデータ数も増えていった 扱うポリゴンデータの数
12. © 2019-2024 OPTiM Corp. All rights reserved. 12 本サービスの成長とともに扱うポリゴンデータ数も増えていった 扱うデータ数が増えるほど、 パフォーマンスが悪くなっていく アプリのパフォーマンスの低下 扱うポリゴンデータの数 2022年開発初期 約100 ~ 300 ポリゴン/アカウント 2022年 約1000 ~ 5000 ポリゴン 2023年 約5000 ~ 10000 ポリゴン 2024年 ~ 数万 ポリゴン
13. © 2019-2024 OPTiM Corp. All rights reserved. 13 どげんかせんといかん！
14. © 2019-2024 OPTiM Corp. All rights reserved. 14 カイゼンに着手！
15. © 2019-2024 OPTiM Corp. All rights reserved. 15 大きく２つのカイゼンに着手 操作性のカイゼン 表示速度のカイゼン
16. © 2019-2024 OPTiM Corp. All rights reserved. 16 操作性のカイゼン
17. © 2019-2024 OPTiM Corp. All rights reserved. 17 何をしたか？
18. © 2019-2024 OPTiM Corp. All rights reserved. 18 状態管理ライブラリPinia を活用する
19. © 2019-2024 OPTiM Corp. All rights reserved. 19 状態管理ライブラリPinia を活用する カイゼン前 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成＆描画 1 2 ポリゴンデータ ポリゴンデータ ポリゴンデータ Google Map
20. © 2019-2024 OPTiM Corp. All rights reserved. 20 状態管理ライブラリPinia を活用する カイゼン後 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成＆描画 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成 して Pinia に保持 3. マップの表示領域・ズーム倍率に応じて Pinia から必要分を取得 & 描画 1 2 1 3 2 ポリゴンデータ ポリゴンデータ ポリゴンデータ ポリゴンデータ ポリゴンデータ ポリゴンデータ カイゼン前 Google Map Google Map
21. © 2019-2024 OPTiM Corp. All rights reserved. 21 状態管理ライブラリPinia を活用する カイゼン後 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成 して Pinia に保持 3. マップの表示領域・ズーム倍率に応じて Pinia から必要分を取得 & 描画 1 3 2  表示領域・ズーム倍率に応じて必要な情報を 取得し、描画することで余分な描画が減り、 操作性がカイゼンされた  Piniaの活用により、画面跨いだ時の 再取得も不要になった  不要なwatchを除くことができた ポリゴンデータ ポリゴンデータ ポリゴンデータ Google Map
22. © 2019-2024 OPTiM Corp. All rights reserved. 22 表示速度のカイゼン
23. © 2019-2024 OPTiM Corp. All rights reserved. 23 “推測するな、計測せよ” ロバート（ロブ）・C・パイク
24. © 2019-2024 OPTiM Corp. All rights reserved. 24 大まかなパフォーマンス計測の結果 (数万個のポリゴンデータ) Frontend Backend 約3.5 ~ 4.1秒 約 13 ~ 16.5秒 約17.5秒 ~ 20秒 表示不可 (Chromeが落ちる、nginxのタイムアウト…)
25. © 2019-2024 OPTiM Corp. All rights reserved. 25 大まかなパフォーマンス計測の結果 (約6000個のポリゴンデータ) Frontend Backend 約3.5 ~ 4.1秒 約 13 ~ 16.5秒 約17.5秒 ~ 20秒
26. © 2019-2024 OPTiM Corp. All rights reserved. 26 一番時間がかかっているのはフロントエンド側だった Frontend Backend 約3.5 ~ 4.1秒 約 13 ~ 16.5秒 約17.5秒 ~ 20秒
27. © 2019-2024 OPTiM Corp. All rights reserved. 27 カイゼン前の状況整理  ポリゴンデータが多い場合、ズーム倍率が低い状態で 確認する(左図)  ポリゴンデータのすべての情報って不要ではないか？ 取得するデータ量やデータ構造を見直す type OldPolygonInfoState = { id: string; landNumber: string; // 住所 centerCoordinate: Coordinate; // 中心座標 polygon: google.maps.Polygon; // ポリゴン isSelect: boolean; // 選択状態 }; ポリゴンの数を クラスターで表示している (ポリゴンの中心座標でカウント)
28. © 2019-2024 OPTiM Corp. All rights reserved. 28 カイゼン前の状況整理  ポリゴンデータが多い場合、ズーム倍率が低い状態で 確認する(左図)  ポリゴンデータのすべての情報って不要ではないか？ 取得するデータ量やデータ構造を見直す type OldPolygonInfoState = { id: string; landNumber: string; // 住所 centerCoordinate: Coordinate; // 中心座標 polygon: google.maps.Polygon; // ポリゴン isSelect: boolean; // 選択状態 };  ポリゴンデータは容量が多く、生成にも時間がかかる  ポリゴンデータは初回表示時は必要ない
29. © 2019-2024 OPTiM Corp. All rights reserved. 29 データの内容からPiniaの使い方をカイゼン カイゼン前 1. API で4点以上の座標込みのポリゴンデータを取得 2. ポリゴンを全て生成 して Pinia に保持 3. マップの表示領域・ズーム倍率に応じて Pinia から必要分を取得 & 描画 カイゼン後 1. API で中心座標(1点)のみのデータを取得 ポリゴン座標は取得しない 2. ポリゴンを生成 ぜずに Pinia に保持 type OldPolygonInfoState = { id: string; landNumber: string; // 住所 centerCoordinate: Coordinate; // 中心座標 polygon: google.maps.Polygon; // ポリゴン isSelect: boolean; // 選択状態 }; type NewPolygonInfoState = { id: string; landNumber: string; // 住所 centerCoordinate: Coordinate; // 中心座標 polygon: google.maps.Polygon | null; // 初回はnull isSelect: boolean; };
30. © 2019-2024 OPTiM Corp. All rights reserved. 30 データの内容からPiniaの使い方をカイゼン カイゼン前 カイゼン後 1. API で中心座標のみのポリゴンデータを取得 2. ポリゴンは生成せず Pinia に保持 3. マップの表示領域・ズーム倍率に応じてAPI で座標 込みで取得し、Pinia 保持 4. 必要分を取得 & 描画 ポリゴンデータ ポリゴンデータ ポリゴンデータ 1 3 2 1 4 2 3 ポリゴンデータ ポリゴンデータ ポリゴンデータ 1. API で4点以上の座標込みのポリゴンデータを取得 2. ポリゴンを全て生成 して Pinia に保持 3. マップの表示領域・ズーム倍率に応じて Pinia から必要分を取得 & 描画 Google Map Google Map
31. © 2019-2024 OPTiM Corp. All rights reserved. 31 データの内容からPiniaの使い方をカイゼン カイゼン後 1. API で中心座標のみのポリゴンデータを取得 2. ポリゴンは生成せず Pinia に保持 3. マップの表示領域・ズーム倍率に応じてAPI で座標 込みで取得し、Pinia 保持 4. 必要分を取得 & 描画 1 4 2 3  取得するデータの容量を1/3に削減！  computedやwatch でのポリゴンを生成をして いたため、ポリゴンの追加・更新などの 変更があるとポリゴン全てを再生成してた →それが不要になった ポリゴンデータ ポリゴンデータ ポリゴンデータ Google Map
32. © 2019-2024 OPTiM Corp. All rights reserved. 32 泥臭く、計測しながら、カイゼンを進めることができた Frontend Backend 約 13 ~ 16.5秒 約3.5 ~ 4.1秒 Frontend Backend 約 0.4 ~ 0.5 秒 約 0.5~ 1.0秒 約1.0秒 ~ 1.55秒 約 17.5秒 ~ 20.0秒 1/20のカイゼン 開発当初 (6000件のポリゴンデータ) 現在 (6000件のポリゴンデータ)
33. © 2019-2024 OPTiM Corp. All rights reserved. 33 泥臭く、計測しながら、カイゼンを進めることができた Frontend Backend 約 13 ~ 16.5秒 約3.5 ~ 4.1秒 Frontend Backend 約 2.0 ~ 3.0秒 約4.0~ 4.6秒 約5.5秒 ~ 7.1秒 約 20.0 ~ 25.6秒 開発当初 (数万件のポリゴンデータ) 現在 (数万件のポリゴンデータ) 表示不可
34. © 2019-2024 OPTiM Corp. All rights reserved. 34 最後に
35. © 2019-2024 OPTiM Corp. All rights reserved. 35 本文（図解用） オプティム 採用 We Are Hiring!! ネットを空気に変える
36. © 2019-2024 OPTiM Corp. All rights reserved. 36