> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/ide-and-dashboard-ui.md).

# IDE画面と利用者画面

DashcombのシステムはIDE画面と利用者画面の二つに構成されています。

## IDE画面

IDE画面は開発者が作成したり、テストしたりする場所です。さまざまなツールとUIコンポーネントを提供しています。

主な画面構成は以下になります。

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-5234eed0b2e18ce85386fd5fe58dbd6070e42575%2FIDE%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90.png?alt=media" alt=""><figcaption></figcaption></figure>

### サイドバー

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-7a4c952f2806aaa7a306ac7ea16d5296a195e8f4%2FIDE%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90%EF%BC%9A%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC.png?alt=media" alt=""><figcaption></figcaption></figure>

グローバル的なナビゲーション領域です。主要な機能をここからアクセスします。

### コンテキストメニュー

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-021d03ea4c349e017dcc5caead415b0f0cdced7e%2FIDE%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90%EF%BC%9A%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.png?alt=media" alt=""><figcaption></figcaption></figure>

サイドバーの右には、選択しているメニューに合わせて内容が変化するコンテキストメニューが表示されます。IDE画面では、サイドバー選択したメニューに合わせて、ユーザーメニュー、UIコンポーネント、インスペクタの3つの項目が切り替わって表示されます。

### 画面UIエディタ

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-019043f916d6b418552e4d881f7ba57d629cf978%2FIDE%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90%EF%BC%9A%E7%94%BB%E9%9D%A2UI%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF.png?alt=media" alt=""><figcaption></figcaption></figure>

作成する管理画面を作成する領域です。UIコンポーネントをドラッグアンドドロップして、画面のレイアウトを作成します。

### 連携機能パネル

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-a12c1149e73538a45474218beff003e3c61b88a0%2FIDE%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90%EF%BC%9A%E9%80%A3%E6%90%BA%E6%A9%9F%E8%83%BD%E3%83%91%E3%83%8D%E3%83%AB.png?alt=media" alt=""><figcaption></figcaption></figure>

外部のデータに対する操作を設定する領域です。データベースに対するSQLクエリや、APIエンドポイントへのリクエストを作成することができます。

### プロパティパネル

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-8ad9a5a7f2da7d58eeae4f91c9577a67cb4cd4ee%2FIDE%E7%94%BB%E9%9D%A2%E6%A7%8B%E6%88%90%EF%BC%9A%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%83%91%E3%83%8D%E3%83%AB.png?alt=media" alt=""><figcaption></figcaption></figure>

選択中のView, Section, またはComponentのプロパティの表示・編集を行う領域です。データの入出力のルールや、ユーザーの操作に対するアクション（イベントハンドラ）を設定できます。

選択している内容によって、設定できる項目が異なります。

## 利用者画面

利用者画面は、構築した管理画面をリリースした後に利用者が実際に触れる画面です。

主な画面構成は以下になります。