ベイビーステップで実現！地図検索機能のVue2→3移行話/Achieving Baby Steps: Transitioning Map Search Functionality from Vue 2 to Vue 3

Slide 1

Slide 1 text

2024年10月30日株式会社コドモン　関根啓子（せきねこ）ベイビーステップで実現！地図検索機能のVue2→3移行話 Vue Fes Japan 2024 After Night

Slide 2

Slide 2 text

経歴 2023年8月コドモン入社。保育施設の園児／職員募集プラットフォーム開発エンジニア。 EM兼務はじめました💪 自己紹介関根啓子（せきねこ）家族構成夫・長女(5)・長男(3)・猫休日の楽しみクラリネット・クラフトビール最近のブーム乾燥納豆

Slide 3

Slide 3 text

パパママと、子どもとの時間に 1秒でも多くの笑顔と愛情をすべての先生に子どもと向き合う時間と心のゆとりを「保育・子育て」と社会をつなげる保護者の子育てへの伴走保育・教育者の環境改善子育ての社会インフラ作り子どもを取り巻く環境をテクノロジーの力でよりよいものにミッション私たちの使命

Slide 4

Slide 4 text

すべての先生に子どもと向き合う時間と心のゆとりをこんなプロダクトを開発していますメインプロダクトは、保育・教育施設向けWebアプリケーション。保護者と施設のやり取りを支えるモバイルアプリケーションや、施設職員向けモバイル版アプリケーション、外部サービスと連携するAPIなども開発しています。

Slide 5

Slide 5 text

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉 Vue Fes Japan 2024 お疲れ様でした！！！ 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

Slide 6

Slide 6 text

No content

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

Vue2→Vue3移行みちのり

Slide 13

Slide 13 text

● 地図機能リリース当時はVue2専用モジュールで実装 ● そのわずか半年後にフロントのNuxt2→3移行対応はじめに

Slide 14

Slide 14 text

● 地図表示・操作には GoogleMap を使用 ● 使用モジュール ○ vue3-google-map ○ @googlemaps/js-api-loader ○ @types/google.maps はじめに

Slide 15

Slide 15 text

絞り込み検索との連動自宅情報の取得はじめに「移行」といっても、地図機能やることたくさんあるんだよなぁ… モジュール差し替え GoogleMapsAPIとの疎通イベント処理フリーワード検索との連動ハーフモーダルの取り込み現在地取得エラーハンドリングマーカー切替 Options→Composition移行 JS→TS移行

Slide 16

Slide 16 text

段階的に開発することにした動かない地図を表示するマーカーをカスタマイズする地図を動かすジオコーディングできるようにする

Slide 17

Slide 17 text

① Nuxt3バージョンアップ対応用に新規リポジトリを作成 ② 1ストーリー(タスク)ごとに新規リポジトリに既存コードを置く ③ コードのエラー・レガシーな部分を直していく段階的開発を支えたNuxt2→3移行プロセス

Slide 18

Slide 18 text

④ 受け入れテストを通過したら検証環境にデプロイ ⑤ チーム内デモでフィードバックをもらう　　※フィードバックを受けての追加作業は、②以降を繰り返し段階的開発を支えたNuxt2→3移行プロセス

Slide 19

Slide 19 text

動かない地図を表示するマーカーをカスタマイズする地図を動かすジオコーディングできるようにする

Slide 20

Slide 20 text

動かない地図を表示する ● 地図が出るか？ ● マーカー出るか？ ● オプション設定効いているか？ ● イベントに反応するか？など、最低限＆最重要部分を確認

Slide 21

Slide 21 text

動かない地図を表示するマーカーをカスタマイズする地図を動かすジオコーディングできるようにする

Slide 22

Slide 22 text

● 地図操作イベントを実装 ○ click, centerChange, zoomChange, etc. ● OptionsAPI→CompositionAPIへ　　置き換え地図を動かす

Slide 23

Slide 23 text

動かない地図を表示するマーカーをカスタマイズする地図を動かすジオコーディングできるようにする

Slide 24

Slide 24 text

マーカーをカスタマイズする ● クリックされた施設はアクティブマーカー ● それ以外の施設は非アクティブマーカー ● 各施設マーカーの選択状態をstoreで管理アクティブな施設非アクティブな施設

Slide 25

Slide 25 text

小噺：マーカーをsvgにしたい

Slide 26

Slide 26 text

小噺：マーカーをsvgにしたい GoogleMapsドキュメントには「できる」と書いてある

Slide 27

Slide 27 text

色々試してみた小噺：マーカーをsvgにしたい

Slide 28

Slide 28 text

小噺：マーカーをsvgにしたい色々試してみた

Slide 29

Slide 29 text

小噺：マーカーをsvgにしたい色々試してみた

Slide 30

Slide 30 text

小噺：マーカーをsvgにしたい色々試してみた

Slide 31

Slide 31 text

小噺：マーカーをsvgにしたい色々試してみた

Slide 32

Slide 32 text

小噺：マーカーをsvgにしたい色々試してみた

Slide 33

Slide 33 text

小噺：マーカーをsvgにしたい色々試してみた

Slide 34

Slide 34 text

小噺：マーカーをsvgにしたいつまり、これは…

Slide 35

Slide 35 text

結果、見送り 😭 小噺：マーカーをsvgにしたい ● 影や白抜きなどpathのみで表現できない　マーカーは色を変えられない ● 色を変えられたとて「この色＝この施設種別」　という情報はユーザーにとって認知負荷

Slide 36

Slide 36 text

動かない地図を表示するマーカーをカスタマイズする地図を動かすジオコーディングできるようにする

Slide 37

Slide 37 text

ジオコーディングできるようにする ● 地図表示・操作に直接関わらない処理　には別モジュールを使用 ○@googlemaps/js-api-loader ● TS 用の型ライブラリも使用 ○@types/google.maps

Slide 38

Slide 38 text

🚀 地図機能のVue3移行DONE！🚀

Slide 39

Slide 39 text

● ストーリー(タスク)を小さく分割 ○ 優先度(重要度)高い仕様から実現 ○ 時間は有限！提供価値は増やす・手戻り範囲は減らす ● ペア・モブプロ作業を本格導入 ○ 各メンバーの知識・経験を総動員 ○ 常に壁打ち・レビューできる相手がいる安心感移行を後押した取り組みバーチャルオフィスツールで会話→

Slide 40

Slide 40 text

価値 ● コミュニケーション ● シンプルさ ● フィードバック ● 勇気 ● リスペクト原則 ● 人間性：みんなが自分らしくいられるチームで ● ふりかえり：起きたことから学んで、再現性を　ハンドリング ● ベイビーステップ：小さく始める、小さく進める　　　　　　　　　　　　　　　　　　　などプラクティス ● 受け入れテスト ● 持続可能なペース ● TDD ● ペアプログラミング　　　　　　　　など価値・原則を意識しながらプラクティスを実行することで、「価値を体現できている状態」へ開発手法 XP(エクストリーム・プログラミング)に則り、アジャイルなチームを目指す

Slide 41

Slide 41 text

余談 Dynamic MapsとStatic Mapsは利用料金が異なる ○ Dynamic Maps… $700 (100,000req) ○ Static Maps…… $200 (100,000req) Dynamic Maps Static Maps

Slide 42

Slide 42 text

さいごに

Slide 43

Slide 43 text

コドモンでのアジャイル開発なぜXPを導入し、どう実践しているのかお話しします！

Slide 44

Slide 44 text

コドモン採用ページコドモンでは一緒に働きたい仲間を募集しています！せきねこのカジュアル面談