Reactを使ったYahoo!地図の技術刷新への挑戦 #yjbonfire
1.6K Views
August 20, 20
スライド概要
Bonfire Frontend #6 での登壇発表内容です。
イベントページ URL は こちらです。
https://yj-meetup.connpass.com/event/181363/
Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。
様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します！
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
Reactを使った Yahoo!地図の技術刷新への挑戦 一円 真治 Bonfire Frontend #6 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
自己紹介 • 一円 真治 (@1coin178) • 移動交通本部(名古屋) • Yahoo!地図 • これまで:カーナビ・地図・検索 • ヤフー名古屋TechMeetup運営 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2
今回の話 運用モードだったYahoo!地図(PC版)の リニューアル版をReactを使って実装 • リリースへの取り組み • 実装で考えたこと・苦労話etc… Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 3
Yahoo!地図について 周辺検索 住所検索 ルート検索 雨雲・混雑 印刷 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 4
新しいYahoo!地図 ドメインを分けてベータ版並行リリース! (2020/03) map.yahoo.co.jp/maps beta-map.yahoo.co.jp Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 6
ベータ版リリースの理由 新しいサービス コアバリュー の検証 ユーザビリティの検証 ベータ版使ってもらえるのか? 🤔 → ユーザ数確保が課題 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
対策①：誘導動線設置 旧版→リニューアル版自動リダイレクト オプトイン Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 8
対策①：誘導動線設置 旧版→リニューアル版自動リダイレクト オプトイン 東京都 - Yahoo!地図 map.yahoo.co.jp/address?ac=13 - キャッシュ Yahoo!地図では、東京都の地図情報及び航空写真を提供しております。主要な施設名、地 名、住所、郵便番号などから詳細地図の検索が可能です。 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 9
対策②：誘導動線設置 ユーザフィードバックの収集動線を大きく Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 10
対策の結果:ユーザフィードバック • 最大100件以上/日 • 機能追加の優先順位付けに活用 印刷機能の改善 多 旧版の横 印刷機能を実装 距離計測の実装 多 優先度 高、coming soon表記 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
技術刷新への 取り組み Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
下準備 • 現在の動作仕様をソースコードから確認 • (複雑な)URL仕様を解析 • アクセスログから利用パターン洗い出し、 利用ケースを元に実装の優先度を決定 • 既存機能をMapboxで表現できるか試行錯誤 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 13
Mapboxについて • 開発者向けロケーションプラットフォームを提供 • Yahoo!地図は地図レンダリングにmapbox-gl-jsを利用 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
採用技術 mapbox Redux express TypeScript Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
どうSPA+地図を設計したか • まず、社内のReact先行事例を参考に • re-ducksパターン: 1機能1ディレクトリ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 16
どうSPA+地図を設計したか • まず、社内のReact先行事例を参考に • re-ducksパターン: 1機能1ディレクトリ • 地図 + Componentはレイヤー構造 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 17
Componentのレイヤー構造 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
どうSPA+地図を設計したか • まず、社内のReact先行事例を参考に • re-ducksパターン: 1機能1ディレクトリ • 地図 + Componentはレイヤー構造 • 地図インスタンスの扱い • シングルインスタンス • Reduxと分離 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 19
全体データフロー Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
成功談: React hookに書き換え • 課題:初期はclass Componentで実装 • props増、componentDidUpdateの比較がif-else文の嵐… • がんばった: Hook対応バージョンにアップデート • React・React-router・React-redux • チーム内で2週間程使って、リリース前に書き換え • 結果: 見通しが改善し、リリース可能な状態まで持っていけた Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
失敗談: SSR考慮不足 SSR(SeverSideRendering)フレームワークを 初期から導入すべきだった 地図がSSRできないこともあり、 CRA(create-react-app)ベースで実装 >< • 理由①: SEO観点 • 現対策: cheerioでmeta tag書き換え • 今後: RAZZLE, NEXT.jsの利用 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
取り組み中: 旧仕様URLとの互換 • 変換パターンチェックを E2EテストフレームワークCypressで自動化 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
なぜ技術負債と戦うことができたのか 正直、つらいことも多かった。。が • 個人的にプロダクトや領域が好きである • 技術的挑戦によるスキルアップ • mapboxを使った地図サービス作成というレア経験 • ヤフーの他サービス等との連携で未来をつくる、ワクワク Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 24