こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。
会の概要
GO株式会社といえば、タクシーアプリ『GO』のスマートフォン用アプリとアプリのためのAPIを開発しているイメージが強いと思いますが、裏側にはWebアプリケーションもあります。今回はタクシーアプリ『GO』を利用するタクシー事業者様の業務を支える「GO管理画面」におけるReactの活用事例について紹介します。
『GO』が収集しているタクシー位置情報を活用し、リアルタイムにマップへ描画するタクシー運行管理システムや、試行錯誤する中で行き着いたライブラリ選定やコンポーネント構成など、私達がReactを活用するなかで出会った改題やその解決方法についてお話します。
会の様子
講演1. Reactで地図上にタクシーをゴリゴリ描画する方法
最初に、GOアプリの「リアルタイム運行管理」機能を支える技術に関して話がありました。
技術選定
地図描画する際の技術選定時には、
- ベースマップ(Google Mapなど)
- マップライブラリ(Leafletなど)
- Reactラッパー(react-leafletなど)
を考慮しているということで、各要素を選ぶ際の注意点に関して説明がありました。
まず、ベースマップはReactラッパーとマップライブラリで何を選ぶかによって選択可能なベースマップが異なってくる点には注意が必要ということです。
次に、マップライブラリは、画面描画速度が画面描画方式によってかなり変わってくる点に注意が必要ということです。
最後に、Reactラッパーは、個人運営/企業運営か？とTypeScriptのサポートがあるか？に2点に関しては確認するようにしたほうがいいという話がありました。
上記の点を考慮したうえで、Goアプリでは、
- ベースマップ...Mapbox
- マップライブラリ...Mapbox GL JS
- Reactラッパー...visgl/react-map-gi
を使用しているということでした。
描画を軽くするための技術選定
描画方式を高速なものとするためには、DOM操作を伴わないようにする+WebGLを用いた高速描画をするようにすることが重要だということでした。
また、そもそもの描画回数を減らすようにすることも重要だということです。
また、マーカー/レイヤー2つの描画方式に関してはメリデメがある*1ので、その点にも注意が必要だということでした。
講演2. 最近の推しフロントエンド構成
続いて、「GO管理画面」(タクシー会社の事務所などで使われる管理画面)を作るにあたって、採用した技術や技術選定に関して話がありました。
- React v17
- React Router v5
- Vite
- Storybook
- MUI v5
- Emotion
- react-hook-form + yup
- Vitest
- Cypress
プロダクト開発直後にStorybookを導入した結果メンテナンスがつらくなったことや、パフォーマンス測定の仕組みが作れていない点は反省材料だということですが、Atomic Designをやめたことで過剰な設計から脱せたことやwebpackではなくviteを使用したことでビルド時間が1/3になったことは非常によかったということです。
全体的に無難な構成にできていて、今もう一度技術選定することになっても同じ技術選定を行うかな？という話が出ていました。
会全体を通した感想
採用している技術の紹介にとどまらず、どのような理由で採用しているかの詳細な説明や、採用してしばらく運用した上でのふりかえりなどが聞けたのは非常に有意義でした。
また、地図描画の部分に関しては、描画を高速にするために苦労したストーリーが聞けたのが面白かったです。
