Maps JavaScript API 向け React コンポーネントの紹介

※この投稿は米国時間 2023 年 11 月 3 日に、Google Cloud blog に投稿されたものの抄訳です。

Maps JavaScript API Maps がリリースされた 2005 年当時、ウェブのパフォーマンスは現在とは大きく異なるものでした。それ以降、フロントエンド ウェブ フレームワークの登場により、フロントエンド デベロッパーがユーザー フレンドリーなインターフェースを作成する方法も大幅に簡素化されました。現在、React.js は最も人気のあるフロントエンド ウェブ フレームワークであり、フロントエンド ウェブ デベロッパーの半数以上に使用されています。Google Maps Platform では、React デベロッパーをサポートするため、まずは Maps JavaScript API を読み込むためのラッパー ライブラリと、Maps JavaScript API を React アプリに統合する方法を説明した一連の動画を提供しました。

この初期サポートを発展させ、このたび、@vis.gl/react-google-maps のアルファ版をリリースする運びとなりました。これは、React ウェブアプリに Maps JavaScript API コンポーネントを統合するためのライブラリとして Google が支援する形で初めて作成されたものです。Maps JavaScript API の要素に対応する React コンポーネントと、マップ インスタンスと追加ライブラリにアクセスするためのフックがパッケージに含まれているため、読み込み時間が短縮され、コードベース全体の管理が容易になります。このパッケージを使用することで、デベロッパーは、地理空間エクスペリエンスを備えたウェブ アプリケーションを迅速かつ容易に作成でき、ライブラリが最新の状態に保たれるという安心感も得られます。

vis.gl react-google-maps ライブラリの使用方法

このライブラリは、npm で @vis.gl/react-google-maps として提供されています。使い方は、まずコードで API プロバイダをインポートし、Maps JavaScript API と、Map コンポーネントなどの必要なコンポーネントを読み込みます。

次に、「use Maps Library」フックをインポートして、Maps JavaScript API のサービスとライブラリにアクセスします。

OpenJS Foundation への貢献

React パッケージについては、その寿命と健全性を維持する目的で、オープンソースにすることを Google は当初から検討していました。OpenJS Foundation には、node.js、jQuery、Webpack、Electron、deck.gl を含む vis.gl など、JavaScript コミュニティ向けの重要なオープンソース プロジェクトが多数あります。OpenJS Foundation のスチュワードシップに基づき、Google マップ上の高パフォーマンスな WebGL ベースのデータ可視化オーバーレイを可能にする @deck.gl/google-maps に関しては、vis.gl コミュニティが管理者として最適であり、このライブラリに依存するすべてのデベロッパーのために品質と寿命を保証できるだろうと考えました。

Google は、このパッケージが最新かつ健全であることを保証するために取り組んでいます。オーナーとして vis.gl チームがこのパッケージを保守しており、GitHub での pull リクエストやリリースの管理も担当しています。

利用方法

@vis.gl/react-google-maps は、デベロッパー向けに GitHub と npm で提供されています。また、react-google-maps ウェブサイトでは、サンプルやドキュメントもご覧いただけます。ぜひお試しになって、Google Maps Platform Discord サーバーの #react チャネルからご感想をお聞かせください。

Google Maps Platform の詳細については、ウェブサイトをご覧ください。

- Google Maps Platform、デベロッパー リレーションズ担当責任者 Mike Pegg