Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ベイビーステップで実現! 地図検索機能のVue2→3移行話/Achieving Baby St...
Search
コドモン開発チーム
October 30, 2024
3
280
ベイビーステップで実現! 地図検索機能のVue2→3移行話/Achieving Baby Steps: Transitioning Map Search Functionality from Vue 2 to Vue 3
コドモン開発チーム
October 30, 2024
Tweet
Share
More Decks by コドモン開発チーム
See All by コドモン開発チーム
保育・子育てを支えるデザイン~横断UXチームの取り組みと成果~ / Designing for Childcare and Parenting
codmoninc
0
51
事業成長を後押しする ほどよいリプレイスの進め方 / Th Way to Replace for Business Growth
codmoninc
0
26
コドモンQAエンジニア紹介 / CoDMON QA Engineer Introduction
codmoninc
0
63
4年間、組織に向き合う中で出会った リアルな悩みと乗り越え方 / Facing Organizational Challenges: Real Struggles and Solutions
codmoninc
1
260
ひとりめEMとして70人組織になるまでにやったこと / What I did to help the organization grow to 70 people as the first EM
codmoninc
0
190
コドモンAnalyticsグループの、 2年間の成果と課題 / Codmon Analytics Group: Achievements and Challenges Over Two Years
codmoninc
0
120
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
3
28k
組織&チームで取り組むプロポーザル企画の実践法 / Crafting Winning Proposals: A Practical Guide for Organizations and Teams
codmoninc
0
48
WebからモバイルへVue.js × Capacitor 活用事例
codmoninc
0
70
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Context Engineering - Making Every Token Count
addyosmani
6
250
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Statistics for Hackers
jakevdp
799
220k
A better future with KSS
kneath
239
18k
Building Applications with DynamoDB
mza
96
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Invisible Side of Design
smashingmag
302
51k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Thoughts on Productivity
jonyablonski
70
4.9k
Transcript
2024年10月30日 株式会社コドモン 関根啓子(せきねこ) ベイビーステップで実現! 地図検索機能のVue2→3移行話 Vue Fes Japan 2024 After Night
経歴 2023年8月コドモン入社。 保育施設の園児/職員募集プラットフォーム開発エンジニア。 EM兼務はじめました💪 自己紹介 関根 啓子(せきねこ) 家族構成 夫・長女(5)・長男(3)・猫 休日の楽しみ
クラリネット・クラフトビール 最近のブーム 乾燥納豆
パパママと、子どもとの時間に 1秒でも多くの笑顔と愛情を すべての先生に 子どもと向き合う時間と心のゆとりを 「保育・子育て」と 社会をつなげる 保護者の子育てへの伴走 保育・教育者の環境改善 子育ての社会インフラ作り 子どもを取り巻く環境を
テクノロジーの力で よりよいものに ミッション 私たちの使命
すべての先生に 子どもと向き合う 時間と心のゆとりを こんなプロダクトを開発しています メインプロダクトは、保育・教育施設向けWebアプリケーション。 保護者と施設のやり取りを支えるモバイルアプリケーションや、施設職員向けモバイル版 アプリケーション、外部サービスと連携するAPIなども開発しています。
🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉 Vue Fes Japan 2024 お疲れ様でした!!! 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
None
本日のテーマ
よりよい園探しのための園紹介 &見学申し込みサービス こんなプロダクトを開発しています
よりよい園探しのための園紹介 &見学申し込みサービス こんなプロダクトを開発しています
地図です🗾
地図です🗾 • 現在地や自宅など周辺の保育施設が検索できる! • 気になる施設の情報を表示→園見学申込できる!
Vue2→Vue3移行みちのり
• 地図機能リリース当時はVue2専用モジュールで実装 • そのわずか半年後にフロントのNuxt2→3移行対応 はじめに
• 地図表示・操作には GoogleMap を使用 • 使用モジュール ◦ vue3-google-map ◦ @googlemaps/js-api-loader
◦ @types/google.maps はじめに
絞り込み検索との連動 自宅情報の取得 はじめに 「移行」といっても、地図機能やることたくさんあるんだよなぁ… モジュール差し替え GoogleMapsAPIとの疎通 イベント処理 フリーワード検索との連動 ハーフモーダルの取り込み 現在地取得
エラーハンドリング マーカー切替 Options→Composition移行 JS→TS移行
段階的に開発することにした 動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
① Nuxt3バージョンアップ対応用に新規リポジトリを作成 ② 1ストーリー(タスク)ごとに新規リポジトリに既存コードを置く ③ コードのエラー・レガシーな部分を直していく 段階的開発を支えたNuxt2→3移行プロセス
④ 受け入れテストを通過したら検証環境にデプロイ ⑤ チーム内デモでフィードバックをもらう ※フィードバックを受けての追加作業は、②以降を繰り返し 段階的開発を支えたNuxt2→3移行プロセス
動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
動かない地図を表示する • 地図が出るか? • マーカー出るか? • オプション設定効いているか? • イベントに反応するか? など、最低限&最重要部分を確認
動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
• 地図操作イベントを実装 ◦ click, centerChange, zoomChange, etc. • OptionsAPI→CompositionAPIへ
置き換え 地図を動かす
動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
マーカーをカスタマイズする • クリックされた施設はアクティブマーカー • それ以外の施設は非アクティブマーカー • 各施設マーカーの選択状態をstoreで管理 アクティブな施設 非アクティブな施設
小噺:マーカーをsvgにしたい
小噺:マーカーをsvgにしたい GoogleMapsドキュメントには「できる」と書いてある
色々試してみた 小噺:マーカーをsvgにしたい
小噺:マーカーをsvgにしたい 色々試してみた
小噺:マーカーをsvgにしたい 色々試してみた
小噺:マーカーをsvgにしたい 色々試してみた
小噺:マーカーをsvgにしたい 色々試してみた
小噺:マーカーをsvgにしたい 色々試してみた
小噺:マーカーをsvgにしたい 色々試してみた
小噺:マーカーをsvgにしたい つまり、これは…
結果、見送り 😭 小噺:マーカーをsvgにしたい • 影や白抜きなどpathのみで表現できない マーカーは色を変えられない • 色を変えられたとて「この色=この施設種別」
という情報はユーザーにとって認知負荷
動かない地図を表示する マーカーをカスタマイズする 地図を動かす ジオコーディングできるようにする
ジオコーディングできるようにする • 地図表示・操作に直接関わらない処理 には別モジュールを使用 ◦@googlemaps/js-api-loader • TS 用の型ライブラリも使用 ◦@types/google.maps
🚀 地図機能のVue3移行DONE!🚀
• ストーリー(タスク)を小さく分割 ◦ 優先度(重要度)高い仕様から実現 ◦ 時間は有限!提供価値は増やす・手戻り範囲は減らす • ペア・モブプロ作業を本格導入 ◦ 各メンバーの知識・経験を総動員
◦ 常に壁打ち・レビューできる相手がいる安心感 移行を後押した取り組み バーチャルオフィスツールで会話→
価値 • コミュニケーション • シンプルさ • フィードバック • 勇気 •
リスペクト 原則 • 人間性:みんなが自分らしくいられるチームで • ふりかえり:起きたことから学んで、再現性を ハンドリング • ベイビーステップ:小さく始める、小さく進める など プラクティス • 受け入れテスト • 持続可能なペース • TDD • ペアプログラミング など 価値・原則を意識しながらプラクティスを実行することで、「価値を体現できている状態」へ 開発手法 XP(エクストリーム・プログラミング)に則り、 アジャイルなチームを目指す
余談 Dynamic MapsとStatic Mapsは利用料金が異なる ◦ Dynamic Maps… $700 (100,000req) ◦
Static Maps…… $200 (100,000req) Dynamic Maps Static Maps
さいごに
コドモンでのアジャイル開発 なぜXPを導入し、どう実践しているのか お話しします!
コドモン採用ページ コドモンでは一緒に働きたい仲間を募集しています! せきねこの カジュアル面談
Thank you!
None