メニュー

サポート

My Esri サイン イン

サポート トップ  >  セットアップ  >  ArcGIS Maps SDK for JavaScript : モジュールのロード

FAQ
ArcGIS Maps SDK for JavaScript : モジュールのロード

ナレッジ番号：5740 | 登録日：2024/03/26 | 更新日：2024/10/09

概要

ArcGIS Maps SDK for JavaScript は Web ブラウザー向けのアプリケーションや Web サイトに地図画面をはじめとした、GIS 機能を組み込むための API を提供する製品です。
まず、ArcGIS Maps SDK for JavaScript の利用を始めるにあたり、ライブラリを読み込みアプリケーションで利用できるようにする必要がございます。
ライブラリを読み込んだ後も必要となるモジュールをロードする方法がいくつかあり、その例をご紹介します。

ArcGIS Maps SDK for JavaScript を利用するにあたって

AMD モジュール

米国 Esri 社がインターネット上にホストしている CDN を利用する場合は、以下のコードを *.html ファイルに記載することで、ArcGIS Maps SDK for JavaScript を利用できます。
<link rel="stylesheet" href="https://js.arcgis.com/4.x/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.x/"></script>
インターネットに接続できない環境などで CDN を利用しない場合は、ArcGIS Maps SDK for JavaScript のライブラリをダウンロードし、ローカルの Web サーバーに配置することでも利用できます。インストールの詳細な手順はこちらをご確認ください。
<link rel="stylesheet" href="./esri/themes/light/main.css" />
<script src="./init.js"></script>

ES モジュール

ArcGIS Maps SDK for JavaScript は、npm（JavaScriptのパッケージ マネージャー）を使って ES モジュールとしても利用できます。ローカルに API をインストールして、React や Angular などの JavaScript フレームワークや、webpack や rollup.js などのモジュール バンドラーで利用することができます。インストールの方法やその他の詳細はこちらもご確認ください。

米国 Esri 社がインターネット上にホストしている CDN を利用して ES モジュールを使用する場合は、以下のコードを *.html ファイルに記載します。
※ この方法は、現在のところ、開発やプロトタイピングにのみ推奨されています。
<link rel="stylesheet" href="https://js.arcgis.com/4.x/@arcgis/core/assets/esri/themes/light/main.css">
<script type="module">
  // 利用したいモジュールのインポート
  import Map from "https://js.arcgis.com/4.x/@arcgis/core/Map.js";
</script>

モジュールの読み込み方法

モジュールを読み込む方法は、AMD と ESM （ES モジュール）で異なります。
モジュールを読み込んだ後の処理の記述は AMD モジュールと ES モジュールと異なりません。

AMD モジュール

AMD でのモジュールのロードには、通常の function 関数やアロー関数を使用できます。以下は、AMD を使用したモジュールのロードの例です。

function 関数

require(["esri/Map","esri/views/MapView",], function (Map,MapView) {

    // モジュールが読み込まれた後の処理
    const map = new Map({
        // マップの設定
    });
    const view = new MapView({
        // マップビューの設定
    });
);

アロー関数

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {

    // モジュールが読み込まれた後の処理
    const map = new Map({
        // マップの設定
    });
    const view = new MapView({
        // マップビューの設定
    });
});

ES モジュール

ES モジュールは、現代の JavaScript のモジュール システムであり、静的なモジュールのロードを提供します。以下は、ES モジュールを使用したモジュールのロードの例です。
// npm からインストールした場合
import Map from "@arcgis/core/Map.js"
import MapView from "@arcgis/core/views/MapView.js"
// cdn を利用した場合
import Map from "https://js.arcgis.com/4.x/@arcgis/core/Map.js";
import MapView from 'https://js.arcgis.com/4.x/@arcgis/core/views/MapView.js';

// モジュールが読み込まれた後の処理
const map = new Map({
    // マップの設定
});
const view = new MapView({
    // マップビューの設定
});

参考情報

ArcGIS Maps SDK for JavaScript - Install and set up
ArcGIS Maps SDK for JavaScript - インストールおよびセットアップ方法

メタデータ

機能

種類

製品

このナレッジはお役に立ちましたか？