Google Maps Platform が React インテグレーション ライブラリ 1.0 を発表

※この投稿は米国時間 2024 年 5 月 14 日に、Google Maps Platform blog に投稿されたものの抄訳です。

編集者注: この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2024 シリーズの一部です。最新情報の詳細を確認するには、5 月 16 日の I/O 技術セッションか、Maps Compose ライブラリのワークショップに登録してください。

これまで数か月にわたって着実な成長を遂げ、コミュニティから積極的なサポートを得てきましたが、このたび React Google Maps ライブラリのリリースを発表いたします。これは Maps JavaScript API の React インテグレーション ライブラリの公式 1.0 リリースです。昨年 11 月の最初のアルファ版リリースから構築されたこのライブラリにより、React.js のデベロッパーは豊富な地理空間エクスペリエンスを素早く構築できるようになりました。

React Google Maps ライブラリが提供するもの

• React インテグレーション: 直感的な開発体験により Maps JavaScript API の要素を React のコンポーネントとして取り入れ、状態管理と、基礎となるマップ インスタンスにアクセスするためのフックを完備。

• 拡張性: コンテキストとフックにより、特定のユースケースに適したカスタム コンポーネントの作成が可能。

• フレームワーク スイートのインテグレーション: React Google Maps ライブラリとデータ可視化パワーハウスである deck.gl の強みを組み合わせ、Google マップ上に魅力的な 2D および 3D の WebGL/WebGPU ビジュアリゼーションをオーバーレイ。

React サポートの歴史

現在と比較してウェブの状況が大きく異なっていた 2005 年のことです。Maps JavaScript API はオンライン マッピングを一変させ、その後の数年間で、React のようなフロントエンド フレームワークはウェブ開発に革命をもたらしました。

Google は React の優位性を認識し、ラッパー ライブラリとチュートリアルを活用したサポートを開始しました。それを基に React Google Maps ライブラリのアルファ版リリースが誕生しました。これは React コンポーネントと、Maps JavaScript API を簡単に統合するためのフックを提供する、Google が資金提供した最初のライブラリです。

オープンなコラボレーションへの貢献

react-google-maps の健全で持続可能な環境を醸成するために、Google は OpenJS Foundation と提携しました。この財団は、node.js、ESLint、Jest など、重要な JavaScript プロジェクトを手掛けたことで知られています。OpenJS Foundation は、地理空間データ可視化フレームワークのスイートである vis.gl をホストしており、vis.gl は 5 年間にわたり @deck.gl/google-maps を維持してきました。vis.gl は react-google-maps にオープンなガバナンスを提供し、Google はその維持と進化に積極的に貢献します。

React Google Maps ライブラリの使用: CARTO 社の例

CARTO と deck.gl が提供する大規模な地理空間アプリケーションの多くは、Google Maps Platform とのインテグレーションにより、開発者にもエンドユーザーにも使い慣れた環境を提供しています。不動産や環境分野でのユースケースの可視化では、高解像度の衛星画像やストリートビューとのスムーズなインテグレーションがなければ、そのインパクトははるかに小さいものになることでしょう。

最新の React と deck.gl が使用されたアプリケーションにおいて、React Google Maps ライブラリはこのインテグレーションをより簡単で、シームレスで、信頼性の高いものにします。Google マップを React コンポーネントとして扱うことで、必須である Maps JavaScript API を宣言的な UI に変換する負担がなくなります。さらに、deck.gl とのシームレスなインテグレーションにより、パフォーマンスの高い地理空間ビジュアリゼーションを簡単に作成できます。

実際に簡単な例をご紹介します。

ここまで見てきたように、@vis.gl/react-google-maps で利用可能なフックとコンポーネントを使用することで、貴重な開発時間を節約し、アプリケーションの複雑さを軽減できます。これにより、アプリケーションは Google マップのほとんどの機能について、メンテナンスがより容易で常に最新の状態が保たれる React のネイティブ バージョンが利用できるようになり、他のコードベースとも適合します。

使ってみる

ドキュメントとサンプルは React Google Maps ライブラリのウェブサイトでご覧ください。一般的なユースケース（例: Place Autocomplete）や複雑なユースケースについて開発者をさらにサポートするために、ステップバイステップのチュートリアル codelab や、このライブラリの React コンポーネントを他のウェブ コンポーネントと統合するためのコードサンプルも提供しています。このライブラリについて他の開発者とやり取りを行うには、Google Maps Platform Discord サーバーの #react チャネルに参加してください。最後に、React で Maps JavaScript API を使用するために、こちらの動画チュートリアルのプレイリストで学習されることもお薦めします。

Google は、React Google Maps ライブラリが「1.0」という一つのマイルストーンに到達したことで、React ベースの Google Maps Platform プロジェクトの新しい時代が到来すると信じています。このエキサイティングな取り組みを共に体験して下さりありがとうございます。

-Google Maps ソリューション エンジニア、Ken Nevarez