arcgis-coding-components

ArcGIS コーディングコンポーネント

Arcade 式エディターを Web アプリケーションに組み込む場合に、このスキルを使用します。@arcgis/coding-components パッケージは、Arcade 式の作成、テスト、デバッグに使える多機能なコードエディターの Web コンポーネント arcgis-arcade-editor を提供します。これは 5.0 で追加された新しいコンポーネントパッケージで、4.x に相当するものはありません。

インポート方法

CDN（ビルドツール不要）

<script src="https://js.arcgis.com/5.0/"></script>

<script
  type="module"
  src="https://js.arcgis.com/5.0/coding-components/"
></script>

ESM を直接インポートする（ビルドツール使用）

import "@arcgis/coding-components/components/arcgis-arcade-editor";

arcgis-arcade-editor コンポーネント

構文ハイライト、診断、コード補完、ドキュメントサイドパネルを備えた、Arcade 式用の高機能コードエディターです。

プロパティ

プロパティ	属性	型	デフォルト	説明
script	script	string	""	Arcade スクリプトの内容（読み書き可能）
profile	-	IEditorProfileDefinition	-	編集コンテキストを定義するプロファイルのメタデータ（JS で設定）
testData	-	IEditorTestContext	-	式の検証に使用するテストデータコンテキスト（JS で設定）
snippets	-	ApiSnippet[]	-	スニペットパネルに表示するコードスニペットのコレクション（JS で設定）
suggestions	-	IEditorCodeSuggestion[]	-	ユーザーに表示するコード補完候補（JS で設定）
editorOptions	-	IEditorOptions & IGlobalEditorOptions	-	Monaco 形式のエディターオプション（JS で設定）
hideSideBar	hide-side-bar	boolean	false	最小限の UI にするため、サイドアクションバーを非表示にする
hideDocumentationActions	-	boolean	false	サイドパネルのドキュメントアクションを非表示にする
openedSidePanel	opened-side-panel	string	"none"	現在開いているサイドパネルの名前
sideActionBarExpanded	side-action-bar-expanded	boolean	false	サイドアクションバーを展開するかどうか

メソッド

メソッド	戻り値	説明
setFocus()	void	エディターにフォーカスを設定します
componentOnReady()	Promise<void>	コンポーネントの読み込み完了時に解決します

イベント

イベント	詳細	説明
arcgisScriptChange	string	スクリプトの内容が変更されたときに発生します（デバウンスあり）
arcgisDiagnosticsChange	Diagnostic[]	診断（エラー／警告）が変更されたときに発生します

基本的な使い方

最小限のエディター

<arcgis-arcade-editor
  script="return $feature.Population * 2;"
  style="width: 600px; height: 400px;"
>
</arcgis-arcade-editor>

スクリプトの変更を監視する

<arcgis-arcade-editor id="editor" style="width: 600px; height: 400px;">
</arcgis-arcade-editor>

<script type="module">
  const editor = document.querySelector("#editor");
  editor.script = "return $feature.Name;";

  editor.addEventListener("arcgisScriptChange", (event) => {
    const newScript = event.detail;
    console.log("Script updated:", newScript);
  });

  editor.addEventListener("arcgisDiagnosticsChange", (event) => {
    const diagnostics = event.detail;
    const errors = diagnostics.filter((d) => d.severity === "error");
    if (errors.length > 0) {
      console.warn("Script has errors:", errors);
    }
  });
</script>

プロファイルコンテキストを設定したエディター

const editor = document.querySelector("arcgis-arcade-editor");

// Define the editing profile - tells the editor what variables are available
editor.profile = {
  id: "popup",
  title: "Popup Expression",
  description: "Expression for popup content",
  variables: [
    {
      name: "$feature",
      type: "Feature",
      description: "The current feature",
    },
    {
      name: "$layer",
      type: "FeatureSet",
      description: "The feature's parent layer",
    },
  ],
};

テストデータを設定したエディター

const editor = document.querySelector("arcgis-arcade-editor");

// Provide test data for expression validation
editor.testData = {
  spatialReference: { wkid: 4326 },
  features: [
    {
      attributes: {
        Name: "Test Feature",
        Population: 50000,
        Area: 125.5,
      },
      geometry: {
        type: "point",
        x: -118.24,
        y: 34.05,
      },
    },
  ],
  fields: [
    { name: "Name", type: "esriFieldTypeString", alias: "Name" },
    { name: "Population", type: "esriFieldTypeInteger", alias: "Population" },
    { name: "Area", type: "esriFieldTypeDouble", alias: "Area" },
  ],
};

カスタムスニペットを設定したエディター

const editor = document.querySelector("arcgis-arcade-editor");

editor.snippets = [
  {
    name: "Format Currency",
    description: "Format a number as US currency",
    code: 'Text($feature.Value, "$#,###.00")',
  },
  {
    name: "Concatenate Fields",
    description: "Join two text fields with a separator",
    code: 'Concatenate([$feature.FirstName, $feature.LastName], " ")',
  },
];

最小限のエディター（サイドバーなし）

<arcgis-arcade-editor
  hide-side-bar
  script="return Round($feature.Value, 2);"
  style="width: 400px; height: 200px;"
>
</arcgis-arcade-editor>

マップと連携する完全な例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Arcade Editor</title>
    <script src="https://js.arcgis.com/5.0/"></script>
    <script
      type="module"
      src="https://js.arcgis.com/5.0/coding-components/"
    ></script>
    <script
      type="module"
      src="https://js.arcgis.com/5.0/map-components/"
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        display: flex;
        flex-direction: column;
      }
      arcgis-map {
        flex: 1;
      }
      #editor-panel {
        height: 300px;
        border-top: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <arcgis-map id="map" item-id="YOUR_WEBMAP_ID">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>
    <div id="editor-panel">
      <arcgis-arcade-editor id="editor"></arcgis-arcade-editor>
    </div>

    <script type="module">
      const mapElement = document.querySelector("#map");
      const editor = document.querySelector("#editor");

      await mapElement.viewOnReady();
      const view = mapElement.view;
      const layer = view.map.layers.getItemAt(0);
      await layer.load();

      // Set initial script
      editor.script = 'return $feature.Name + " (" + $feature.Type + ")"';

      // Configure profile from layer fields
      editor.profile = {
        id: "popup",
        title: "Popup Expression",
        variables: [
          { name: "$feature", type: "Feature", description: "Current feature" },
        ],
      };

      // Listen for changes and apply to popup
      editor.addEventListener("arcgisScriptChange", (event) => {
        console.log("Expression:", event.detail);
      });
    </script>
  </body>
</html>

よくある落とし穴

1. coding-components スクリプトが読み込まれていない：arcgis-arcade-editor 要素はコア SDK とは別に読み込む必要があります。

   
   <script src="https://js.arcgis.com/5.0/"></script>
   <arcgis-arcade-editor></arcgis-arcade-editor>
   

   
   <script src="https://js.arcgis.com/5.0/"></script>
   <script
     type="module"
     src="https://js.arcgis.com/5.0/coding-components/"
   ></script>
   <arcgis-arcade-editor></arcgis-arcade-editor>
   

   影響： 要素が認識されず、空の状態で表示されます。

2. エディターのサイズが指定されていない：エディターを表示するには、幅と高さを明示的に指定する必要があります。

   
   <arcgis-arcade-editor></arcgis-arcade-editor>
   

   
   <arcgis-arcade-editor
     style="width: 600px; height: 400px;"
   ></arcgis-arcade-editor>
   

   影響： エディターの高さがゼロになり、表示されません。

3. profile または testData を HTML 属性として設定している：これらのプロパティには複雑なオブジェクトを指定するため、JavaScript 経由で設定する必要があります。

   影響： 値は警告なしに無視され、エディターで自動補完や検証を行うためのコンテキストが不足します。

4. arcgisScriptChange のデバウンスを行っていない：このイベントはキー入力のたびに発火します（内部でデバウンスされますが、それでも頻繁に発生する可能性があります）。ハンドラーで時間のかかる処理を行わないでください。

   // Anti-pattern: expensive operation on every change
   editor.addEventListener("arcgisScriptChange", async (event) => {
     await compileAndExecuteArcade(event.detail); // too frequent
   });
   

   // Correct: add your own debounce for expensive operations
   let timeout;
   editor.addEventListener("arcgisScriptChange", (event) => {
     clearTimeout(timeout);
     timeout = setTimeout(() => {
       compileAndExecuteArcade(event.detail);
     }, 500);
   });
   

   影響： 入力中に UI がフリーズしたり、サーバーへのリクエストが過剰に発生したりします。

リファレンスサンプル

• Arcade 関連のサンプルを検索して、式編集ワークフローを確認してください。

関連スキル

• Arcade 式言語の構文と使用パターンについては、arcgis-arcade を参照してください。
• エディターパネルを配置するレイアウトコンポーネントについては、arcgis-widgets-ui を参照してください。
• ポップアップコンテンツで Arcade 式を使用する方法については、arcgis-popup-templates を参照してください。
• Arcade を利用した視覚変数とレンダラーについては、arcgis-visualization を参照してください。