React

react-windowで地図UIが劇的改善!サクサク表示の裏側

お疲れ様です。SJC共同開発推進室の境田です。

地図画面のパフォーマンス問題、「重い」「カクつく」「固まる」といった経験はありませんか?
私も同じ課題に直面し、当初は地図画面の最適化(useRef、クラスター表示、ルート表示の一本化など)に注力しましたが、改善は見られませんでした。

本当の原因は地図ではなく、サイドパネルでの大量画像表示とそれに伴う状態の密結合にあったのです。

今回は、この根本原因を特定し、仮想化ライブラリ react-window を導入するだけで劇的なパフォーマンス改善を実現した経験を、具体的なコード例と共に紹介します。
同様の悩みを抱える方の解決の糸口になれば幸いです。
続きを読む

Reactの状態管理ライブラリ「Jotai」を採用した背景

こんにちは。
開発本部 SJC共同開発推進室の中野です。

ReactでWebフロントエンドの開発を行う際、多くの開発者が「状態管理ライブラリ」について一度は頭を抱える思います。

ReduxやZustandそして本記事で取り扱うRecoilやJotaiのような多種多様な状態管理ライブラリが存在しますが、「これが最適解!」と断言できるものは存在しません。
そのため、ライブラリ選定で多くの開発者が混乱することでしょう。
(私自身もかなり迷いました…

そこで今回は、現在担当しているプロジェクトで大活躍中の状態管理ライブラリ、Jotaiについて
なぜJotaiを採用したのか」というバックグラウンドに焦点を当て、
RecoilとJotaiで迷っている方、あるいは「そもそもJotaiって何?」という方に向けて、Jotaiの概要とその魅力をご紹介します。

続きを読む

ReactでGoogleMapsAPIを使いこなす|高度なマーカーの作成

こんにちは。
開発本部 SJC共同開発推進室の中野です。

Webフロントエンドで地図を実装する際、多くの開発者が最初に頭に浮かべるのは「Google Maps API」だと思います。

Google Maps API には、地図表示だけでなく、非常に強力な機能が備わっています。
その中でも特に注目すべき機能──それは 2023年5月にリリースされた 「高度なマーカー」です。

通常の地図マーカーでは表現不可能だった、より豊富な情報を表示できるこの機能は、一度使うと病みつきになること間違いなしだと思います。

今回の記事では、Google Maps APIの「高度なマーカー」をReactでどのように実装するかに焦点を当て、その魅力をご紹介します。

続きを読む