ArcGIS API for JavaScript - フレームワークやビルド ツールとの連携を容易にする ES modules について -

[#1]

ES modules はすでにご存知の方も多いかと思います。ES modules は、主要なブラウザで採用されている、モダンな JS を扱うための公式の標準化されたモジュール システムです。ArcGIS API for JavaScript の ES modules は、@arcgis/core を通じて npm からインストールして利用することができます。

ArcGIS API for JavaScript バージョン 4.18 では、、APIとフレームワークやビルドツールとの統合を大幅に容易にすることを目的としています。4.19では、これらのモジュールが本番環境で使用可能になりました。ES modules のインストールに関する簡単な概要は、APIドキュメントの Build with ES modules ガイドのトピックをご覧ください。

本記事では、ES modules について ArcGIS Blog でも紹介されている「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier」と「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier - Part 2」の記事を翻訳して紹介したいと思います。

まず、「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier」では、以下のように ES modules の使い方を中心に紹介しています。

どのようにして始めるのか？

NPM を使って、新しい ES modules パッケージ (@arcgis/core) をインストールします。

npm install @arcgis/core

その後、import ステートメントを使用して、個々のモジュールをアプリケーションにロードします。ES modules のパッケージの命名規則では、/core が使用され、AMD CDN  modules で使用される /esri とは異なります。

import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';

const webmap = new WebMap({
  portalItem: {
    id: '05e015c5f0314db9a487a9b46cb37eca',
  },
});

const view = new MapView({
  container,
  map: webmap
});

2番目のステップは、API のアセット（スタイル、イメージ、フォント、ローカリゼーションファイルを含む）を @arcgis/core/assets フォルダからビルドフォルダにコピーすることです。ビルドツールによって様々な方法がありますが、簡単な方法は、ビルドプロセス中に実行される NPM スクリプトを設定することです。例えば、npm install ncp を実行し、package.json にフォルダをコピーするスクリプトを設定します。これは React の例です。

{
    "script": {
        "start": "npm run copy && react-scripts start",
        "build": "npm run copy && react-scripts build",
        "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
    }
}

最後のステップは、CSS の設定です。テーマを選び、@arcgis/core/assets/esri/themes/ からテーマファイルをプロジェクトにコピーするようにコードを設定します。ここでは React の例を紹介します。

// React - index.js
import '@arcgis/core/assets/esri/themes/dark/main.css';

以上で、API を自分のアプリケーションに取り込むことができました。あとは、ビルドを実行すれば、API の ES modules が他のすべてのインポートと一緒にバンドルされます

次に「ArcGIS API for JavaScript - Working with frameworks and build tools just got easier - Part 2」では、以下のように ES modules のメリットや ES modules の移行に関するトピック、フレームワークを使用する場合の検討事項などを紹介しています。

なぜ ES modules なのか？

ほとんどのローカルビルドでは、ES modules が動作します。ローカルビルドとは、アプリケーションコードと一緒に API モジュールをインストールし、消費し、コンパイルすることです。これが何を意味するのか、詳しくは以下をご覧ください。

ここでは、そのメリットをまとめてご紹介します。

• コードの簡素化
• 最新ブラウザでのネイティブサポート
• 最小限の設定
• 最新のフレームワークやビルドツールとのシームレスな統合

ES modules は、API コードを require() 文で囲む必要がないため、AMD modules よりも簡単に使用することができます。ES modules は、ネイティブの import 文によってアプリケーション内で参照されます。これは、ECMA 2015（ES6）仕様がすべての主要なブラウザベンダーによって採用されたために実現しました。また、ES modules は、ほとんどの最新のフレームワークではデフォルトでサポートされています。

以下は、ES modules と AMD modules を並べた 2 つのコードスニペットです。

それに比べ、AMD は ECMA 規格ではなく、API 仕様に基づいています。ブラウザでネイティブにサポートされていないため、AMD は Dojo や RequireJS などの別のモジュールローダーを必要とします。このため、フレームワークを使用する際には、特別な設定やヘルパーライブラリ、esri-loader や arcgis-webpack-plugin などの追加プラグインが必要になります。

4.19 の新機能は？

4.19では、いくつかの機能改善に加えて、インストールとセットアップを簡素化しました。@arcgis/core の NPM インストールでは、API で使用されるアセットを実行時に取得するデフォルトの方法として CDN を使用するようになりました。API のアセットを node_modules からプロジェクトにコピーする必要はもうありません。アセットには、スタイル、画像、ウェブ ワーカー、ウェブ アセンブリー、ローカライゼーション ファイルが含まれます。プライベートネットワーク上でアプリを実行している場合など、ローカルでアセットを扱う必要がある場合は、config.assetsPath  でデフォルトを上書きすることができます。

サンプルはどこにありますか？

https://github.com/Esri/jsapi-resources/tree/master/esm-samples では、様々な基本的な入門サンプルを用意しています。API の ES modulesをReact、Angular、webpack、rollup.js などと組み合わせて使用する例があります。サンプルの使用に関する質問や、ES modules に関するその他の質問があれば、リポジトリの issue ページに投稿することができます。

AMD modules を使用していますが、切り替える必要がありますか？

JavaScriptフレームワークを使用せずに AMD モジュールを使用している場合や、ローカルビルドを作成していない場合は、移行する必要はありません。

フレームワークを使用している場合や、すでに esri-loader や arcgis-webpack-plugin を使用している場合は、ES modules への移行をお勧めします。

この2つのモジュールタイプの違いについて、多くの質問を受けます。ここで重要なのは、AMD modules と ES modules の間で、基本的な API の機能は全く同じであるということです。大きく異なるのは、ブラウザ、フレームワーク、ビルドツールがモジュールとどのように連携するかという点です。

フレームワークの使用やローカルビルドを検討すべきでしょうか？

JavaScript アプリケーションの規模が大きくなってくると、新しい機能を追加することが難しくなってきます。フレームワークを使用することは、バニラ HTML/JavaScript で作られたアプリと比較して、フロントエンドアプリのスケーラビリティ、生産性、パフォーマンスを向上します。

フレームワークは、スケーラブルなアプリケーションの構築に必要な足場を提供します。Angular、React、VueJS などの主要なフレームワークは、大規模で高性能なアプリケーションを構築する企業によって実世界でテストされてきました。これらのフレームワークには、定型的なコードやコンポーネント、内蔵されたユニットテスト、状態管理、頻繁に使用されるワークフローのためのデザインシステム、そしてこれらすべてをサポートする世界規模のコミュニティが用意されています。フレームワークの基盤構築やメンテナンスにどれだけの時間が費やされたかを考えれば、同じものを作り直すために費やす時間はありません。

フレームワークには、webpack や rollup.js などのモジュールバンドラーが付属しています。これらのバンドラーは、フレームワークを使わずに単体で使用することもできます。バンドラーの役割は、アプリケーションのコードと依存関係をコンパイルし、最適化されたチャンク（バンドル）に分割して、本番環境に投入することです。この最適化ステップの目的は、可能な限り最速のロードパフォーマンスを提供することです。下図はバンドルがディスク上でどのように見えるかを示すスクリーンショットです。

HTML アプリで ES modules を使用することはできますか？

ES modules は、テストとプロトタイピングのためにのみ、CDN 経由で提供されています。これはパフォーマンス上の理由によるもので、ES modules の CDN ビルドは高速ロードには最適化されていません。本番環境では、ローカルビルドのみを使用することをお勧めします。なぜなら、最適化をより細かくコントロールできるからです。Esri のサンプルリポジトリには、ES modules CDN のサンプルがあります。

まとめ

私たちは、新しい ES modules に興奮していますし、皆さんもそうであることを願っています。ぜひ、お試しください。基本的なスタート ガイド：ArcGIS API for JavaScript SDK Guide Topic - Build with ES modules とサンプル アプリをご覧ください。

■関連リンク

• ESRIジャパン Web サイト
  • ArcGIS API for JavaScript
• Esri 社（米国）Web サイト
  • ArcGIS API for JavaScript