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

by OPTiM

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

© 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

© 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

Slide 31

Slide 31 text

© 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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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