ArcGIS Developers 開発リソース集 > 技術 Tips 集 > ArcGIS Maps SDK for JavaScript > マップコンポーネントへの移行ガイド > 移行のヒント

移行のヒント

出典：ArcGIS Maps SDK for JavaScript - Tips for migrating

移行のヒント

バージョン 4.30 で ArcGIS Maps SDK for JavaScript に Web コンポーネントが追加されました。これらのコンポーネントはカスタム HTML 要素として構築されているため、最新のブラウザーで標準的に使用でき、フレームワークに依存しません。SDK では、コンポーネントは、API の定型コードの多くをカプセル化することにより、一般的なコーディングパターンを簡素化します。

アプリケーションは、カスタム HTML 要素を使って宣言的に定義できるようになり、ビューやコンテナ、モジュールのインポートなどの設定が不要になります。コンポーネントのスクリプトを読み込むだけで、要素がすぐに使用可能になります。

<!-- Load the JavaScript Maps SDK Map components or other component packages -->
<script
  type="module"
  src="https://js.arcgis.com/4.34/map-components/">
</script>
<body>
  <arcgis-map basemap="topo-vector" zoom="4" center="15, 65"></arcgis-map>
</body>

Getting started

Web コンポーネントが初めての方、あるいはこのトピックの復習が必要な方のために、さまざまなリソースが用意されています。

すぐにコーディングを始めたい場合は、コンポーネントのチュートリアルや GitHub にあるコードサンプルを調べてみましょう。
属性やプロパティの扱い方、変更の監視などについては、プログラミングパターンのガイドトピックをお読みください。
プロパティ、メソッド、イベントを確認するには、リファレンスページをご覧ください。
JavaScript Maps SDK コンポーネントでアプリを構築するブログ (Build GIS Web Apps with the JavaScript Maps SDK components) をご覧ください。
MDN ウェブコンポーネントリソースページをご覧ください。

基本的な実装

コンポーネントを使用することで、JavaScript Maps SDK でアプリケーションを実装するたびに繰り返し必要になるコードを減らすことができます。例えば、以下は SDK の CDN からモジュールを使用してシンプルなマップを作成する JavaScript コードです。

const [Map, MapView] = await $arcgis.import([
  "@arcgis/core/Map.js",
  "@arcgis/core/views/MapView.js",
]);
const map = new Map({
  basemap: "streets-vector",
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 14,
  center: [8.5, 47.37],
});

以下は、Map コンポーネントを使った HTML による同等のコードです。このスニペットは、コンポーネントに直接属性を設定する方法を示しています。

<arcgis-map zoom="14" center="8.5,47.37" basemap="streets-vector"></arcgis-map>

コンポーネントベースのパターンでは、view.ui.add を使って UI 要素を手動で配置する必要がなくなり、DOM に直接統合されます。レイアウトやスタイリングは標準の HTML や CSS の挙動に従うため、SDK 固有の構文やインポートを必要とせず、より柔軟なデザインが可能になります。

カスタム機能の実装

Map コンポーネントがロードされた後に実行される機能を実装するには、HTML 要素をクエリで取得し、その要素のオブジェクトを使用してイベントリスナーを設定したり、プロパティを取得または設定したり、コンポーネントに直接メソッドを実装したりします。

以下のスニペットでは、いくつかのプロパティを設定し、ビューの準備が整うのを待ってからマップの itemId をコンソールに出力しています。このシンプルな例では、モジュールのインポートは不要です。

<arcgis-map></arcgis-map>
<script type="module" src="/main.js"></script>

// Query for the HTML element
const viewElement = document.querySelector("arcgis-map");

// Set map properties programmatically
viewElement.zoom = 14;
viewElement.center = [8.5, 47.37];
viewElement.basemap = "streets-vector";

// Wait for the view to be ready
await viewElement.viewOnReady();

// Log the map's item id
console.log(viewElement.itemId)

コンポーネントは、プロパティを通じてプログラム的に構成することも、カスタム要素内で属性を使って直接設定することも可能です。プロパティの更新、イベントの監視が可能で、viewOnReady() のようなライフサイクルメソッドが公開されているため、アプリケーションのロジックフローを制御できます。

コンポーネントによってアプリケーションのセットアップは簡素化されますが、ほとんどのプロジェクトでは、上記のようにカスタム動作をサポートするためのコア API を引き続き使用できます。必要に応じてビューを構成したり、追加機能を統合したりするために、$arcgis.import() を使ってモジュールを動的にインポートすることが可能です。

必要に応じて、アプリケーションは CDN とバニラの HTML / JavaScript を使って構築することも、npm を使って JavaScript のバンドラーやフレームワークでローカルに構築することも可能です。

詳細は開発の手順をご覧ください。