> 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/tips-and-tricks/api-crud.md).

# 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)