はじめに
2026 年 5 月 27 日 (水) から 29 日 (金) にかけて開催された第23回 GISコミュニティフォーラムでは、多くのユーザー様にご来場いただき、ArcGIS Enterprise や ArcGIS 開発製品に関してもさまざまなセッションや展示を実施しました。フォーラムの様子や特にご好評いただいたセッションについては先日投稿しました「第23回GISコミュニティフォーラムで ArcGIS Developers/ArcGIS Enterprise のセッションと展示を行いました！」の記事でもご紹介しています。
本記事では、その中でも ArcGIS Maps SDK for JavaScript のコンポーネントをテーマに実施したセッション「コンポーネント時代の ArcGIS Web アプリ開発」の内容をセッション当日にご紹介したポイントを中心に振り返っていきます。
ArcGIS Maps SDK for JavaScript 最新情報
ArcGIS Maps SDK for JavaScript は Web ブラウザー上で動作する GIS アプリケーションを開発できる SDK です。2D / 3D の表示に対応した地図アプリを開発可能なほか、ArcGIS Online をはじめとした ArcGIS プラットフォームとの高い親和性、ES Modules、TypeScript、React などのモダンなコーディング環境にも対応しています。
2026 年 2 月に ArcGIS Maps SDK for JavaScript バージョン 5.0.0 がリリースされました。このリリースでは新機能としてトゥルー カーブのサポートやフィーチャ テーブルの機能強化、また 3D シーンの表現が強化されました。新機能の詳細については「ArcGIS Maps SDK for JavaScript バージョン 5.0 をリリースしました！」をご覧ください。
2026 年 6 月に ArcGIS Maps SDK for JavaScript バージョン 5.1.0 がリリースされました。バージョン 5.1.0 の新機能については「ArcGIS Maps SDK for JavaScript バージョン 5.1 をリリースしました！」をご覧ください。
また、このリリースから SDK のバージョン表記と今後のリリース計画がセマンティック バージョニングに移行しました。セマンティック バージョニングでは 3 桁の数字を左から順に「メジャー リリース」、「マイナー リリース」、「パッチ リリース」を表しており、バージョン番号を見るだけで SDK のバージョンアップを行う際の影響を把握できます。
セマンティック バージョニングに移行した後も、リリースの間隔は現在と同じく 2 月、6 月、10 月の年 3 回です。この内、2 月がメジャー リリース、6 月、10 月がマイナー リリースです。
コンポーネントによるアプリ開発
近年、Web アプリ開発では Web コンポーネントが主要な技術として定着しつつあります。Web コンポーネントは、カスタム要素、シャドウ DOM、HTML テンプレートといった技術を組み合わせて、再利用可能な UI と機能をカスタム HTML タグとして提供する仕組みです。
必要な機能を HTML タグの記述だけで実装できる点が特長で、特定のフレームワークに依存せず、React や Vue、Angular などのフレームワークでも再利用しやすいというメリットがあります。また、スタイルや振る舞いがカプセル化されることで、アプリを構成する UI 部品としてさまざまなアプリで共通して利用しやすいという点もポイントです。
ArcGIS の Web コンポーネント
ArcGIS にも Web アプリ開発に活用できるさまざまな Web コンポーネントが用意されています。セッションではコンポーネントそれぞれの機能を網羅的にご紹介しましたが、本記事ではその中でも「マップ コンポーネント」、「AI コンポーネント」、「Calcite Design System」を振り返ります。
マップ コンポーネントでは 2D マップであれば arcgis-map、3D シーンであれば arcgis-scene を使って地図要素をアプリに組み込めます。また、拡大縮小ボタン (arcgis-zoom) や検索欄 (arcgis-search)、凡例 (arcgis-legend) といった地図アプリに欠かすことのできない機能もコンポーネントとして用意されており、これらを組み合わせることで基本的な地図アプリケーションを HTML タグを記述するのみで構築できます。
さらに、JavaScript と組み合わせることで、レイヤー操作やイベント発火時の処理など、より業務に即した実装にも対応しています。
AI コンポーネントは ArcGIS Maps SDK for JavaScript バージョン 5.0.0 で実装されたベータ版の機能で、自然言語を使ってマップを探索、操作することができます。AI コンポーネントでは「どこ？」、「何？」、「どのように？」のそれぞれの質問に対応するエージェントを追加し、場所への移動、データの検索やフィルタリング、文脈に応じたヘルプの表示を実現できます。
AI コンポーネントについては「ArcGIS Maps SDK for JavaScript でお手軽 地図 AI アプリケーション開発」でも紹介しているので、ぜひそちらもご覧ください。
Calcite Design System は ArcGIS Online や ArcGIS Maps SDK for JavaScript のコンポーネントにも使われている、ArcGIS と親和性の高いデザイン システムです。ボタンやスイッチといった基本的な UI パーツに加え、Calcite Shell を使ったアプリ全体のレイアウト構成にも対応しています。Calcite Shell を活用したレイアウトの作成については「Calcite を使った簡単 Web アプリ開発」でも紹介しているので、ぜひそちらもご覧ください。
コンポーネントへの移行
ArcGIS Maps SDK for JavaScript では、これまで広く利用されてきたウィジェット (esri/widgets 名前空間) ベースの開発がすでに非推奨となっており、また 2027 年 2 月頃にリリースが予定されているバージョン 6.0.0 からはウィジェットがリタイアとなりご使用いただくことができなくなります。今後、既存のアプリのバージョン アップをご検討いただいている場合や、新たにアプリの開発を予定されている場合にはコンポーネントを中心とした実装への移行をお願いいたします。
アプリケーション作成デモ
今回のセッションではデモンストレーションとして、実際に ArcGIS の Web コンポーネントを使ったアプリ開発の流れをご紹介しました。当日使用したコードを下に記載しております。ぜひ CodePen やお手元の html ファイルに貼り付けるなどをお試しいただき、実際の動作もご確認ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calcite Design System - Calcite Shell</title>
<!-- ArcGIS Maps SDK for JavaScript のロード -->
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<style>
/* ページ全体 */
html, body, calcite-shell {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* コンポーネントの UI 幅を調整 */
arcgis-legend, arcgis-bookmarks, arcgis-basemap-gallery {
width: 100%;
}
/* ヘッダー右側のスイッチのラベルを調整 */
.theme-switch-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
padding-inline: 0.75rem;
white-space: nowrap;
}
</style>
</head>
<!-- class 属性を使って mode の指定を追加 -->
<body class="calcite-mode-light">
<calcite-shell>
<calcite-navigation slot="header">
<!-- ヘッダーの更新 -->
<!-- 左側タイトル -->
<calcite-navigation-logo slot="logo" heading="日本の鉄道路線" scale="l">
</calcite-navigation-logo>
<!-- 右端にテーマ切り替えスイッチを配置 -->
<div slot="user" class="theme-switch-label">
<calcite-icon icon="brightness" scale="l"></calcite-icon>
<calcite-switch id="themeSwitch"></calcite-switch>
<calcite-icon icon="moon" scale="l"></calcite-icon>
</div>
</calcite-navigation>
<calcite-shell-panel id="shellPanelStart" slot="panel-start">
<!-- ウィジェットを配置するアクション バーを配置 -->
<!-- アクションバー -->
<calcite-action-bar slot="action-bar">
<calcite-action text="凡例" id="legendAction" icon="legend" scale="l"></calcite-action>
<calcite-action text="ブックマーク" id="bookmarkAction" icon="bookmark" scale="l"></calcite-action>
<calcite-action text="ベースマップ" id="basemapAction" icon="basemap" scale="l"></calcite-action>
</calcite-action-bar>
<!-- ウィジェット パネル -->
<calcite-panel id="mainPanel" heading="凡例">
<arcgis-legend reference-element="arcgisMap"></arcgis-legend>
<arcgis-bookmarks reference-element="arcgisMap"></arcgis-bookmarks>
<arcgis-basemap-gallery reference-element="arcgisMap"></arcgis-basemap-gallery>
</calcite-panel>
</calcite-shell-panel>
<arcgis-map id="arcgisMap" item-id="63cbd36d395a4ddaa07b169b7d8266c3">
<arcgis-zoom slot="top-left"></arcgis-zoom>
<arcgis-compass slot="top-left"></arcgis-compass>
<arcgis-home slot="top-left"></arcgis-home>
<arcgis-search slot="top-right"></arcgis-search>
<arcgis-layer-list slot="bottom-left"></arcgis-layer-list>
</arcgis-map>
</calcite-shell>
<!-- JavaScript を使って UI の振る舞いを設定 -->
<script type="module">
// ArcGIS Map / パネルの初期化
const arcgisMap = document.querySelector("arcgis-map");
await arcgisMap.viewOnReady();
const shellPanelStart = document.getElementById("shellPanelStart");
const mainPanel = document.getElementById("mainPanel");
const legendAction = document.getElementById("legendAction");
const bookmarkAction = document.getElementById("bookmarkAction");
const basemapAction = document.getElementById("basemapAction");
const legend = document.querySelector("arcgis-legend");
const bookmarks = document.querySelector("arcgis-bookmarks");
const basemapGallery = document.querySelector("arcgis-basemap-gallery");
// 状態管理
const components = {
legend,
bookmark: bookmarks,
basemap: basemapGallery
};
const actions = {
legend: legendAction,
bookmark: bookmarkAction,
basemap: basemapAction
};
let currentTool = "legend";
// まずは全部非表示
Object.values(components).forEach((el) => (el.hidden = true));
function setActiveAction(toolName) {
Object.entries(actions).forEach(([name, action]) => {
action.active = name === toolName;
});
}
function showTool(toolName, heading) {
Object.entries(components).forEach(([name, el]) => {
el.hidden = name !== toolName;
});
setActiveAction(toolName);
if (heading) {
mainPanel.heading = heading;
}
}
// 初期状態：凡例表示 & パネル展開
showTool("legend", "凡例");
components["legend"].hidden = false;
shellPanelStart.collapsed = false;
function attachActionHandler(toolName, heading) {
const action = actions[toolName];
action.addEventListener("click", () => {
if (currentTool === toolName) {
// 同じツール → パネルの開閉
shellPanelStart.collapsed = !shellPanelStart.collapsed;
} else {
// ツール切り替え
currentTool = toolName;
showTool(toolName, heading);
shellPanelStart.collapsed = false;
}
});
}
attachActionHandler("legend", "凡例");
attachActionHandler("bookmark", "ブックマーク");
attachActionHandler("basemap", "ベースマップ");
// テーマ切り替え (ライト / ダーク)
const themeSwitch = document.getElementById("themeSwitch");
const body = document.body;
// スイッチ変更時にライト / ダークを切り替え
themeSwitch.addEventListener("calciteSwitchChange", (event) => {
const isDark = event.target.checked;
if (isDark) {
body.classList.remove("calcite-mode-light");
body.classList.add("calcite-mode-dark");
} else {
body.classList.remove("calcite-mode-dark");
body.classList.add("calcite-mode-light");
}
});
</script>
</body>
</html>まとめ
今回のセッションでは、ArcGIS Maps SDK for JavaScript の最新動向とあわせて、Web コンポーネントを活用した新しい Web アプリ開発の手法をご紹介しました。
Web コンポーネントは、Web アプリを構築する UI とその機能を再利用しやすい形で部品化する技術です。ArcGIS でもこの技術を取り入れ、HTML の記述を中心にアプリを構築できます。また、コンポーネントによって作成された UI に JavaScript を組み合わせることで、用途に応じた柔軟なアプリの構築も可能です。
ArcGIS の Web アプリ開発は Web コンポーネントの技術を取り入れることで、より速く、柔軟な開発が行えるように進化しています。これからの開発や既存アプリの見直しにおいて、本セッションの情報がコンポーネントの活用につながる一助となれば幸いです。
参考リンク
