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

Transcript

1. 2024年10月30日 株式会社コドモン　関根啓子（せきねこ） ベイビーステップで実現！ 地図検索機能のVue2→3移行話 Vue Fes Japan 2024 After Night
2. 経歴 2023年8月コドモン入社。 保育施設の園児／職員募集プラットフォーム開発エンジニア。 EM兼務はじめました💪 自己紹介 関根 啓子（せきねこ） 家族構成 夫・長女(5)・長男(3)・猫 休日の楽しみ クラリネット・クラフトビール 最近のブーム 乾燥納豆
3. パパママと、子どもとの時間に 1秒でも多くの笑顔と愛情を すべての先生に 子どもと向き合う時間と心のゆとりを 「保育・子育て」と 社会をつなげる 保護者の子育てへの伴走 保育・教育者の環境改善 子育ての社会インフラ作り 子どもを取り巻く環境を テクノロジーの力で よりよいものに ミッション 私たちの使命
4. すべての先生に 子どもと向き合う 時間と心のゆとりを こんなプロダクトを開発しています メインプロダクトは、保育・教育施設向けWebアプリケーション。 保護者と施設のやり取りを支えるモバイルアプリケーションや、施設職員向けモバイル版 アプリケーション、外部サービスと連携するAPIなども開発しています。
5. 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉 Vue Fes Japan 2024 お疲れ様でした！！！ 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
7. 本日のテーマ
8. よりよい園探しのための園紹介 &見学申し込みサービス こんなプロダクトを開発しています
9. よりよい園探しのための園紹介 &見学申し込みサービス こんなプロダクトを開発しています
10. 地図です🗾
11. 地図です🗾 • 現在地や自宅など周辺の保育施設が検索できる！ • 気になる施設の情報を表示→園見学申込できる！
12. Vue2→Vue3移行みちのり
13. • 地図機能リリース当時はVue2専用モジュールで実装 • そのわずか半年後にフロントのNuxt2→3移行対応 はじめに
14. • 地図表示・操作には GoogleMap を使用 • 使用モジュール ◦ vue3-google-map ◦ @googlemaps/js-api-loader ◦ @types/google.maps はじめに
15. 絞り込み検索との連動 自宅情報の取得 はじめに 「移行」といっても、地図機能やることたくさんあるんだよなぁ… モジュール差し替え GoogleMapsAPIとの疎通 イベント処理 フリーワード検索との連動 ハーフモーダルの取り込み 現在地取得 エラーハンドリング マーカー切替 Options→Composition移行 JS→TS移行
16. 段階的に開発することにした 動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
17. ① Nuxt3バージョンアップ対応用に新規リポジトリを作成 ② 1ストーリー(タスク)ごとに新規リポジトリに既存コードを置く ③ コードのエラー・レガシーな部分を直していく 段階的開発を支えたNuxt2→3移行プロセス
18. ④ 受け入れテストを通過したら検証環境にデプロイ ⑤ チーム内デモでフィードバックをもらう 　　※フィードバックを受けての追加作業は、②以降を繰り返し 段階的開発を支えたNuxt2→3移行プロセス
19. 動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
20. 動かない地図を表示する • 地図が出るか？ • マーカー出るか？ • オプション設定効いているか？ • イベントに反応するか？ など、最低限＆最重要部分を確認
21. 動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
22. • 地図操作イベントを実装 ◦ click, centerChange, zoomChange, etc. • OptionsAPI→CompositionAPIへ　 　 置き換え 地図を動かす
23. 動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
24. マーカーをカスタマイズする • クリックされた施設はアクティブマーカー • それ以外の施設は非アクティブマーカー • 各施設マーカーの選択状態をstoreで管理 アクティブな施設 非アクティブな施設
25. 小噺：マーカーをsvgにしたい
26. 小噺：マーカーをsvgにしたい GoogleMapsドキュメントには「できる」と書いてある
27. 色々試してみた 小噺：マーカーをsvgにしたい
28. 小噺：マーカーをsvgにしたい 色々試してみた
29. 小噺：マーカーをsvgにしたい 色々試してみた
30. 小噺：マーカーをsvgにしたい 色々試してみた
31. 小噺：マーカーをsvgにしたい 色々試してみた
32. 小噺：マーカーをsvgにしたい 色々試してみた
33. 小噺：マーカーをsvgにしたい 色々試してみた
34. 小噺：マーカーをsvgにしたい つまり、これは…
35. 結果、見送り 😭 小噺：マーカーをsvgにしたい • 影や白抜きなどpathのみで表現できない 　 マーカーは色を変えられない • 色を変えられたとて「この色＝この施設種別」 　 という情報はユーザーにとって認知負荷
36. 動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
37. ジオコーディングできるようにする • 地図表示・操作に直接関わらない処理 　 には別モジュールを使用 ◦@googlemaps/js-api-loader • TS 用の型ライブラリも使用 ◦@types/google.maps
38. 🚀 地図機能のVue3移行DONE！🚀
39. • ストーリー(タスク)を小さく分割 ◦ 優先度(重要度)高い仕様から実現 ◦ 時間は有限！提供価値は増やす・手戻り範囲は減らす • ペア・モブプロ作業を本格導入 ◦ 各メンバーの知識・経験を総動員 ◦ 常に壁打ち・レビューできる相手がいる安心感 移行を後押した取り組み バーチャルオフィスツールで会話→
40. 価値 • コミュニケーション • シンプルさ • フィードバック • 勇気 • リスペクト 原則 • 人間性：みんなが自分らしくいられるチームで • ふりかえり：起きたことから学んで、再現性を 　ハンドリング • ベイビーステップ：小さく始める、小さく進める 　　　　　　　　　　　　　　　　　　　など プラクティス • 受け入れテスト • 持続可能なペース • TDD • ペアプログラミング 　　　　　　　　など 価値・原則を意識しながらプラクティスを実行することで、「価値を体現できている状態」へ 開発手法 XP(エクストリーム・プログラミング)に則り、 アジャイルなチームを目指す
41. 余談 Dynamic MapsとStatic Mapsは利用料金が異なる ◦ Dynamic Maps… $700 (100,000req) ◦ Static Maps…… $200 (100,000req) Dynamic Maps Static Maps
42. さいごに
43. コドモンでのアジャイル開発 なぜXPを導入し、どう実践しているのか お話しします！
44. コドモン採用ページ コドモンでは一緒に働きたい仲間を募集しています！ せきねこの カジュアル面談
45. Thank you!