出典：Calcite Design System - Get Started
Calcite コンポーネントは、Web アプリケーションを構築するための、柔軟でフレームワークに依存しない Web コンポーネントの豊富なライブラリです。Web コンセプトのページ では、Calcite Design System の構成要素について説明しています。
例題、プロパティ、スロット、スタイル、イベント、モードなどの API リファレンスについては、コンポーネント ドキュメントをご覧ください。以下の手順で、Calcite コンポーネントを使い始めることができます。
まず、Calcite コンポーネントを使用するには、ArcGIS アカウントが必要です。アカウントをお持ちでない場合は、無料で作成することができます。
作成方法は、開発者アカウントの作成をご覧ください。
次に、CDN（Content Delivery Network）または NPM（Node Package Manager）ライブラリを使用して、Calcite コンポーネントを読み込みます。
Calcite コンポーネントをロードする最も一般的な方法は、ArcGIS CDN にホストされているバージョンを使用することです。コンポーネントは、HTML ドキュメントの head セクションに <script> タグを配置することでロードできます:
<script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>
これらのタグを追加すると、他の HTML 要素と同様にコンポーネントを使用することができます。アプリケーションで使用されるコンポーネントのみが読み込まれます。
Calcite コンポーネントは、NPM パッケージとしても提供されています。使い始めるには、まずパッケージをインストールし、以下のステップに従います。また、様々なフレームワークやビルドツールを使用したサンプルはこちらでご覧いただけます。
npm install @esri/calcite-components
一部のコンポーネント（例：calcite-icon、calcite-date-picker）は静的リソースに依存しています。デフォルトでは、リソースは CDN から自動的に配信されるため、ほとんどのケースで手動でのパス設定が不要になります。
ローカルにアセットをホストしたい場合やオフライン環境をサポートする必要がある場合は、アセットをプロジェクトのディレクトリにコピーできます。互換性を維持するため、ローカルのアセットは「assets」という名前のディレクトリに配置してください。
例えば、次のコマンドを使用してアセットをコピーできます。
cp -r node_modules/@esri/calcite-components/dist/calcite/assets/* ./public/assets/
アセットが用意できたら、アプリケーション内でアセットのパスを設定してください
import { setAssetPath } from "@esri/calcite-components";
setAssetPath("/path-to-your-assets/");
最後に、カスケーディング スタイル シート（CSS）を読み込みます。これもフレームワークやビルド ツールに依存しますが、多くの場合、JavaScript で直接読み込むことができます。
import "@esri/calcite-components/dist/calcite/calcite.css";
Calcite Components は、異なる用途に対応するため、2 つのビルドを提供しています
カスタム要素 は、フロントエンド フレームワークを利用する場合に推奨されるビルドです。 必要に応じて個々のコンポーネントをインポートできます。 アセットをローカルでホストする場合またはカスタム CDN を使用する場合のみ、アセットのパスを設定する必要があります。
import { setAssetPath } from "@esri/calcite-components/dist/components";
setAssetPath("/path-to-your-assets/");
次に、必要なコンポーネントをインポートします。これにより、カスタム要素が自動的に定義されます。
import "@esri/calcite-components/components/calcite-button";
import "@esri/calcite-components/components/calcite-icon";
import "@esri/calcite-components/components/calcite-slider";
ディストリビューション ビルドでは、グローバル ウィンドウ オブジェクトにカスタム要素を定義する必要があります。カスタム要素 ビルドと同様に、ローカルまたは CDN ホストされたアセットを使用するかを選択できます。
import { defineCustomElements } from "@esri/calcite-components/loader";
// CDN hosted assets (default)
defineCustomElements();
// Or, for local assets:
// defineCustomElements({ resourcesUrl: "/path-to-your-assets/" });
このアプローチでは、個々のコンポーネントをインポートする必要はありません。すべてのコンポーネントはグローバルに登録されているためです。
TypeScript の設定方法については、 TypeScript section of the Framework integration を参照してください。