Mapbox Search JS
現在のバージョン：v1.0.0-beta.24
- チェックアウトのUXを向上させる
- インタラクティブな場所検索
- 住所フォームの自動入力
- フルカスタマイズ可能
Mapbox Search JSは、Mapbox Search Serviceを使用してインタラクティブな場所検索エクスペリエンスを構築するためのクライアントサイドJavaScriptライブラリのセットです。Mapbox Search JSを使用してWebブラウザに住所の自動入力機能を追加したり、Mapbox GL JSマップに検索ボックスを追加したり、提案の座標をプログラムで取得したりすることができます。
- 既存のHTML5
autocompleteタグと互換性があります - デザインシステムに合わせてフレキシブルにテーマ設定可能
- アクセシビリティ最優先（ARIA）、モバイルとデスクトップのネイティブ
- Google Tag Manager、HTMLカスタム要素、Reactに対する一流のサポート
機能
Mapbox Search JSには、Address Autofill、Search Box、およびGeocodingの3つの主要な機能が含まれています。WebおよびReactプロジェクトで使用する際に、Search JSは豊富なインタラクティブなUIコンポーネントを提供します。また、Search JS Coreフレームワークを使用してこれらの機能用の独自のUIを構築することもできます。
ユースケース
Mapbox Search JSのユースケースには以下が含まれます：
- 顧客のコンバージョン率向上のための住所の自動入力
- 住所の検証と配送先の確認
- マップを制御するためのインタラクティブな検索体験
- Web、Node.js、React Nativeを通じて検索APIとインターフェースを接続
Mapbox Search JSでできることについてのさらなるインスピレーションは、チュートリアル、例、およびMapboxの顧客ショーケースページを参照してください。
構造
Mapbox Search JSには３つのフレームワークが含まれています。それぞれが@mapboxネームスペースの下で個別のパッケージとしてnpmで公開されています：
- Search JS Web (
@mapbox/search-js-web) - Search JS React (
@mapbox/search-js-react) - Search JS Core (
@mapbox/search-js-core)
Search JS WebとSearch JS Coreは、Mapbox CDNを介して<script>タグを使用して組み込むこともできます。
Search JS Web
Search JS WebはMapbox Search JSのメインエントリーポイントであり、Search JS Coreの上に豊富なUIコンポーネントを提供します。
これらはHTMLカスタム要素として定義されており、<button>や<input>などのビルトインと同じ忠実度を持っています。Web Quickstart Guides:
基本を理解したら、Webリファレンスで詳細なドキュメントを探索してください。
Search JS React
Search JS ReactはReactで豊富なUIコンポーネントを提供し、Search JS Webの上に構築されています。これは大規模なアプリケーションにおいてMapbox Search JSの推奨エントリーポイントです。
React Quickstart Guides:
基本を理解したら、Reactリファレンスで詳細なドキュメントを探索してください。
Search JS Core
Search JS CoreはMapbox Search Serviceのための高レベルフレームワークを提供します。このフレームワークはAPIに対して強力なタイプ定義を提供し、リクエスト/レスポンスを自動的に処理し、セッショントークンを管理することができます。
Coreフレームワークのクラスを使用して、独自の位置検索や住所の自動入力用の実装とUIを構築することができます。
Search JS CoreはSearch JS Webやその他のフレームワークで消費されます。Web技術に依存していないため、ほとんどのJavaScript環境で使用できます。Web、Node.js、React Nativeの公式サポートを提供しています。
Coreリファレンスで詳細なドキュメントを探索してください。