# API経由のCRUD操作の実現方法

DashcombではAPI経由のCRUD操作が簡単に実現できます。CRUD操作とはデータを操作する際の種別で、Create（作成）、Read（参照）、Update（更新）、及びDelete（削除）です。[IDE画面のコンポーネント](/dashcomb-help-center/ide/ui-component.md)をドラッグ＆ドロップして、APIデータの収集や表示、アクションの指定、通知の表示などが実現できます。

## 準備

* 接続用REST APIや接続設定をしておきます。
* APIデータの作成用、参照用、更新用、及び削除用の管理画面を作っておきます。

## 実現

* CRUD操作は新規作成、参照表示（N件、1件）、参照＆更新、削除機能を分けて、画面ベースの実現方法をご紹介します。
* Create（新規作成機能）
  * 管理画面の[クエリ領域](/dashcomb-help-center/ide/query-region.md)で「API」タブをクリックします。
  * 「+」アイコンを押して、API名を作成します。（例えば `api_add`）
  * データソースリストから用意したREST APIを選びます。
  * 「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
    * ここでは初期の「アクション無し」を選びます。
  * 続いては「POST」を選んで、エンドポイントに `/hoge` などを入力します。
  * Dashcombの[Input](/dashcomb-help-center/ide/ui-component/input.md)などをドラッグ＆ドロップし、入力ボックスを作成します。
    * 引数 `{{input名.value}}` を「POST」のJSON入力ボックスなどに埋め込みます。
  * APIを「保存」します。
  * Dashcombの[Button](/dashcomb-help-center/ide/ui-component/ui-component-button.md)をドラッグ＆ドロップし、新規登録用ボタンを作成します。
  * [Button](/dashcomb-help-center/ide/ui-component/ui-component-button.md)アクションの「タイプ」に「クエリ実行」を選びます。
  * 「クエリ」に先ほど作成したAPI（例では `api_add`）を指定します。（バリデーションなどを加えるのも可能）
    * 詳細は[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)にご参照ください。
  * 「保存」ボタンを押すと、シンプルな新規作成機能の画面が出来上がります。

***

* Read（参照表示機能　N件）
  * 管理画面の[クエリ領域](/dashcomb-help-center/ide/query-region.md)で「API」タブをクリックします。
  * 「+」アイコンを押して、API名を作成します。（例えば `api_list`）
  * データソースリストから用意したREST APIを選びます。
  * 「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
    * ここでは初期の「アクション無し」を選びます。
  * 続いては「GET」を選んで、エンドポイントに `/hoge` などを入力します。
  * APIを「保存」します。
  * Dashcombの[Table](/dashcomb-help-center/ide/ui-component/table.md)などをドラッグ＆ドロップし、表示リストを作成します。
    * 例えば、オブジェクト名は `table1` とします。
    * 取得データ `{{api_list.data.contents}}` を[Table](/dashcomb-help-center/ide/ui-component/table.md)の「ソースデータ」に埋め込みます。
  * 「保存」ボタンを押すと、複数データの参照表示画面が出来上がります。
* Read（参照表示機能　1件）
  * 管理画面の[クエリ領域](/dashcomb-help-center/ide/query-region.md)で「API」タブをクリックします。
  * 「+」アイコンを押して、API名を作成します。（例えば `api_detail`）
  * データソースリストから用意したREST APIを選びます。
  * 「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
    * ここでは初期の「アクション無し」を選びます。
  * 続いては「GET」を選んで、エンドポイントに一意検索の条件 `/hoge?filters=id[equals]{{table1.selectedRow.id}}` などを入力します。
  * APIを「保存」します。
  * Read（参照表示機能　N件）で作成された[Table](/dashcomb-help-center/ide/ui-component/table.md)のアクションに詳細表示用のボタンを追加して、アクション「タイプ」に「クエリ実行」を選びます。
  * 「クエリ」に `api_detail` を指定します。
    * 詳細は[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)にご参照ください。
  * Dashcombの[Input](/dashcomb-help-center/ide/ui-component/input.md)などをドラッグ＆ドロップし、入力ボックスを作成します。
    * そのデフォルト値に `{{api_detail.data.contents[0].id}}`、`{{api_detail.data.contents[0].name}}` などを入力します。
  * 「保存」ボタンを押すと、ユニークデータの参照表示画面が出来上がります。

***

* Update（参照＆更新機能）
  * Read（参照表示機能　1件）で作成された詳細表示用のボタンをクリックし、一意検索用のキーを取得して、引数としてこの詳細画面に渡します。
    * 詳細は[画面遷移の実現方法](/dashcomb-help-center/tips-and-tricks/view-transition.md)にご参照ください。
  * 管理画面の[クエリ領域](/dashcomb-help-center/ide/query-region.md)で「API」タブをクリックします。
  * 「+」アイコンを押して、API名を作成します。（例えば `api_update`）
  * データソースリストから用意したREST APIを選びます。
  * 「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
    * ここでは初期の「アクション無し」を選びます。
  * 続いては「PATCH」を選んで、エンドポイントに `/hoge/{{渡された引数}}` などを入力します。
  * Dashcombの[Input](/dashcomb-help-center/ide/ui-component/input.md)などをドラッグ＆ドロップし、入力ボックスを作成します。
    * 一意検索の結果 `{{api_detail.data.contents[0].コラム名}}` をデフォルト値に入力します。
    * 引数 `{{input名.value}}` を「PATCH」のJSON入力ボックスなどに埋め込みます。
  * APIを「保存」します。
  * Dashcombの[Button](/dashcomb-help-center/ide/ui-component/ui-component-button.md)をドラッグ＆ドロップし、更新用ボタンを作成します。
  * [Button](/dashcomb-help-center/ide/ui-component/ui-component-button.md)アクションの「タイプ」に「クエリ実行」を選びます。
  * 「クエリ」に `api_update` を指定します。（バリデーションなどを加えるのも可能）
    * 詳細は[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)にご参照ください。
  * 「保存」ボタンを押すと、シンプルな参照更新機能の画面が出来上がります。

***

* Delete（削除機能）
  * 管理画面の[クエリ領域](/dashcomb-help-center/ide/query-region.md)で「API」タブをクリックします。
  * 「+」アイコンを押して、API名を作成します。（例えば `api_delete`）
  * データソースリストから用意したREST APIを選びます。
  * 「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
    * ここでは初期の「アクション無し」を選びます。
  * 続いては「DELETE」を選んで、エンドポイントに一意検索の条件 `/hoge/{{table1.selectedRow.id}}` などを入力します。
  * Read（参照表示機能　N件）で作成された[Table](/dashcomb-help-center/ide/ui-component/table.md)のアクションに削除用のボタンを追加して、アクション「タイプ」に「クエリ実行」を選びます。
  * 「クエリ」に `api_delete` を指定します。
    * 詳細は[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)にご参照ください。
  * 「保存」ボタンを押すと、ユニークデータの削除機能が出来上がります。

## 参照項目

* [Tableの使い方](/dashcomb-help-center/ide/ui-component/table.md)
* [アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)
* [コラムエディタ](/dashcomb-help-center/ide/property-region/column-editor.md)
* [ViewやSection](/dashcomb-help-center/ide/layout-component.md)
* [APIの認証情報の設定](/dashcomb-help-center/tips-and-tricks/set-auth-in-api-request.md)
* [APIのリクエストに複雑データ対応](/dashcomb-help-center/tips-and-tricks/add-complicated-data-to-api-request.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/api-crud.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.