【備忘録】「CRUD」ってなに？「Web APIの作成」って何をしているの？

こんにちは。

Webの学習で「CRUD」という概念に遭遇し、初見で戸惑う部分がありました。また、同じく学習中に「APIを作成する」機会があり、こちらも理解の追いつかない部分がありました。

そのため学習内容の記録としてCRUDとWeb APIについてこの記事でまとめてみようと思います。

当記事は学習内容のアウトプットを目的とした記事のため、一部正確でない説明をしている可能性がございます。予めご了承ください。

CRUDについて

CRUDとはデータ操作の4つの基本機能のこと。

• Create(作成・新規登録)
• Read(読み取り・取得)
• Update(更新)
• Delete(削除)

の4通り。いずれもデータを取り扱うアプリやソフトウェアには必須の機能。

CRUDは機能なのでシステムによって実現方法が変わってくる。
CRUDを実現するための手段として、HTTPを用いたWebAPIであったり、データベース内の機能が存在するというイメージ。

データベースとCRUD

データベースのSQL文でCRUDを実現する記述がある。

対応関係としては以下の通り。

• Create(作成・新規登録)：INSERT文
• Read(読み取り・取得)：SELECT文
• Update(更新)：UPDATE文
• Delete(削除)：DELETE文

HTTPメソッドとCRUD

Web上ではHTTPを用いてサーバとブラウザ間でデータをやり取りしている。　

ブラウザからサーバへ送信する要求がHTTPリクエスト、サーバからブラウザに送信する情報がHTTPレスポンス。

送信/受信するリソースに応じて実行する処理がHTTPメソッドであり、HTTPメソッド上で指定されたリソースへの処理が実質的にCRUDの役割を果たしている。

HTTPメソッドでCRUDに対応するものは以下の通り。

• Create(作成・新規登録)：POSTメソッド　
  • パラメータの格納場所：ボディ
• Read(読み取り・取得)：GETメソッド
  • パラメータの格納場所：クエリ
• Update(更新)：PUTメソッド
  • パラメータの格納場所：ボディ
• Delete(削除)：DELETEメソッド
  • パラメータの格納場所：クエリ

これらのメソッドを用いることでブラウザとサーバサイドとのデータ処理を可能にしている。

HTTPとCRUDとWebAPI

上記のような処理を行ってブラウザとサーバ間でデータをやり取りすることが可能になる。

一方で、特定のアプリやソフトウェアではフロントエンド部分とバックエンド部分を分離させ、バックエンド部分にデータを格納させたい場合がある。

そのようなケースでバックエンド側に「WebAPIを作成」し、ブラウザ側(＝フロントエンド側)からのリクエストをバックエンド側で処理する場合がある。

Web APIの構成

Web APIの構成要素のうち著名なものとして6つの構成要素がある。

• リソース
• メソッド
• リクエストボディ
• レスポンスボディ
• レスポンスヘッダ
• ステータス

例えばPOSTならリクエストボディにPOST(追加)したい内容が含まれている、といったイメージ。

フロントエンド側の処理例

フロントエンド側でHTTPリクエストを送信するためにはfetch APIが用いられる。

fetch APIはJavaScript内でHTTPリクエスト/レスポンスを実現させるためのAPI。

そのためJavaScriptを用いたフロントエンド部分とバックエンドの連携にはfetch APIを使う。

バックエンド側の処理例

フロントエンド・バックエンド間でデータのやり取りをする場合に、バックエンド側でWeb APIを作成し、フロントエンドから送られた情報をデータベースに格納したりリソースを作成したりする。

フロントエンドから送られたリクエストボディの情報をjsonに格納する、といったケースが具体例。

このようなAPI(REST API)開発を補助するフレームワークとしてExpressやHonoといったものがある。

まとめ

調査した結論として、

• CRUDは「作成」「読み取り」「更新」「削除」というデータ操作の4機能のこと
• データベースではSQL文、Web上ではHTTPメソッドを用いてCRUDを実現している
• サーバサイドでCRUDを実現する手段としてWebAPIも用いられる。その手段としていくつかのフレームワークが存在する

ということがわかりました。

データ処理周りの知見はまだまだ乏しいので今後も学習・理解を続けていきたいです。

参考文献

『プロになるためのWeb技術入門』著：小森裕介

『フロントエンド開発セキュリティ入門』著：平野昌士

CRUD - MDN Web Docs 用語集 | MDN
https://developer.mozilla.org/ja/docs/Glossary/CRUD

HTTPメソッド(CRUD)についてまとめた #Web - Qiita
https://qiita.com/fukuma_biz/items/a9e8d18467fe3e04068e

JavaScriptのFetch API について #promise - Qiita
https://qiita.com/sotasato/items/31be24d6776f3232c0c0