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

© 2019-2024 OPTiM Corp. All rights reserved. 1 株式会社オプティム西村
v-Tokyo Meetup #19 2024.03.06 Vue.jsを用いて数万の農地データ情報を数秒で表示させるまでのカイゼンの軌跡

© 2019-2024 OPTiM Corp. All rights reserved. 3 西村ソリューション開発部
農業チーム・趣味：お菓子作り、クラフトビール 2021年入社自己紹介・現在の業務：農業プロダクトのフロントエンド、バックエンドの開発を担当現場視察 & 作業もします・・・

© 2019-2024 OPTiM Corp. All rights reserved. 4  会社・事業紹介
 カイゼンの軌跡  最後に今日の目次

© 2019-2024 OPTiM Corp. All rights reserved. 6 アグリテックアグリテック
アグリテックデジタルヘルスデジタルコンストラクションデジタルヘルスその他その他その他オフィスDX モバイルマネジメントマーケティングDX マーケティングDX 映像管理DX オフィスDX その他プラットフォームプラットフォームオフィスDX OPTiMは、AI・IoT・Cloud・Mobile・Roboticsを使った新しい価値を創造し続け、あらゆる産業のDXを推進し、あらゆる人々に、豊かでサステナブルな未来を実現する企業ですプラットフォーム

© 2019-2024 OPTiM Corp. All rights reserved. 7 • 農薬散布のデジタル化サービスを支える
アプリケーションを開発している (Vue3移行済み) • 農薬散布を効率よく進めるための機能が盛りだくさん！ • 農地データのデジタル化 • 農薬散布の計画を自動作成 • 適期計算機能 etc 事業紹介(農業DX)

© 2019-2024 OPTiM Corp. All rights reserved. 9 本サービスにデジタルな農地データ(ポリゴンデータ)は欠かせないそのデータはGoogle
Maps API を活用し、表示しているスライドでは国土地理院の地理院地図を使用この枠のことをポリゴンと呼びます

© 2019-2024 OPTiM Corp. All rights reserved. 11 2022年開発初期約100
~ 300 ポリゴン/アカウント 2022年約1000 ~ 5000 ポリゴン 2023年約5000 ~ 10000 ポリゴン 2024年 ~ 数万ポリゴン本サービスの成長とともに扱うポリゴンデータ数も増えていった扱うポリゴンデータの数

© 2019-2024 OPTiM Corp. All rights reserved. 12 本サービスの成長とともに扱うポリゴンデータ数も増えていった扱うデータ数が増えるほど、
パフォーマンスが悪くなっていくアプリのパフォーマンスの低下扱うポリゴンデータの数 2022年開発初期約100 ~ 300 ポリゴン/アカウント 2022年約1000 ~ 5000 ポリゴン 2023年約5000 ~ 10000 ポリゴン 2024年 ~ 数万ポリゴン

© 2019-2024 OPTiM Corp. All rights reserved. 15 大きく２つのカイゼンに着手操作性のカイゼン
表示速度のカイゼン

カイゼン前 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成＆描画 1 2 ポリゴンデータポリゴンデータポリゴンデータ Google Map

カイゼン後 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成＆描画 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成して Pinia に保持 3. マップの表示領域・ズーム倍率に応じて Pinia から必要分を取得 & 描画 1 2 1 3 2 ポリゴンデータポリゴンデータポリゴンデータポリゴンデータポリゴンデータポリゴンデータカイゼン前 Google Map Google Map

カイゼン後 1. API で座標込みのポリゴンデータを取得 2. ポリゴンを全て生成して Pinia に保持 3. マップの表示領域・ズーム倍率に応じて Pinia から必要分を取得 & 描画 1 3 2  表示領域・ズーム倍率に応じて必要な情報を取得し、描画することで余分な描画が減り、操作性がカイゼンされた  Piniaの活用により、画面跨いだ時の再取得も不要になった  不要なwatchを除くことができたポリゴンデータポリゴンデータポリゴンデータ Google Map

© 2019-2024 OPTiM Corp. All rights reserved. 24 大まかなパフォーマンス計測の結果 (数万個のポリゴンデータ)
Frontend Backend 約3.5 ~ 4.1秒約 13 ~ 16.5秒約17.5秒 ~ 20秒表示不可 (Chromeが落ちる、nginxのタイムアウト…)

© 2019-2024 OPTiM Corp. All rights reserved. 25 大まかなパフォーマンス計測の結果 (約6000個のポリゴンデータ)
Frontend Backend 約3.5 ~ 4.1秒約 13 ~ 16.5秒約17.5秒 ~ 20秒

© 2019-2024 OPTiM Corp. All rights reserved. 26 一番時間がかかっているのはフロントエンド側だった Frontend
Backend 約3.5 ~ 4.1秒約 13 ~ 16.5秒約17.5秒 ~ 20秒

© 2019-2024 OPTiM Corp. All rights reserved. 27 カイゼン前の状況整理 
ポリゴンデータが多い場合、ズーム倍率が低い状態で確認する(左図)  ポリゴンデータのすべての情報って不要ではないか？取得するデータ量やデータ構造を見直す type OldPolygonInfoState = { id: string; landNumber: string; // 住所 centerCoordinate: Coordinate; // 中心座標 polygon: google.maps.Polygon; // ポリゴン isSelect: boolean; // 選択状態 }; ポリゴンの数をクラスターで表示している (ポリゴンの中心座標でカウント)

© 2019-2024 OPTiM Corp. All rights reserved. 28 カイゼン前の状況整理 
ポリゴンデータが多い場合、ズーム倍率が低い状態で確認する(左図)  ポリゴンデータのすべての情報って不要ではないか？取得するデータ量やデータ構造を見直す type OldPolygonInfoState = { id: string; landNumber: string; // 住所 centerCoordinate: Coordinate; // 中心座標 polygon: google.maps.Polygon; // ポリゴン isSelect: boolean; // 選択状態 };  ポリゴンデータは容量が多く、生成にも時間がかかる  ポリゴンデータは初回表示時は必要ない

© 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; };

© 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

© 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

© 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件のポリゴンデータ)

© 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秒開発当初 (数万件のポリゴンデータ) 現在 (数万件のポリゴンデータ) 表示不可

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

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

More Decks by OPTiM

Other Decks in Technology

Featured

Transcript