メディアアートのためのバックエンド構築入門（Chap.03 追加、更新、削除編）

こちらの記事の続きです。

Chap.03 追加、更新、削除編

最初に実行結果の動画をあげておきます。

サーバのサンプルコード

一応、サンプルを追加、更新、削除に分割して用意したのですが、 前回の内容がわかれば読める気がするので、 全ての処理が含まれるサンプルコードを紹介しようと思います。

実行方法は前回と同じく以下のようになっています。

cd backend-for-new-media-art/chap05-update/node-server
npm install
npm run db:init
npm start

前回は GET http://localhost:3000/balls しかルーティングしていませんでしたが、 このサンプルコードでは以下のようにルーティングしています。

• POST /balls: 円の情報を追加する
• DELETE /balls/:id: 指定したIDの円の情報を削除する
  • :id には削除対象の円のIDを入れる
• PUT /balls/:id: 指定したIDの円の情報を更新する
  • :id には更新対象の円のIDを入れる

ここでHTTPリクエストメソッドについて少し説明しておきます。

HTTPリクエストにはメソッドという情報があります。 例えば GET http://localhost:3000/balls と POST http://localhost:3000/balls は同じURLですが、 HTTPメソッドが異なるので別物のリクエストになります。

このように、同じURLだとしても、メソッドを使い分けることで 「サーバに対してどのようなリクエストを出すのか？」 ということを表現します。

詳細はこちらをご確認ください。

https://developer.mozilla.org/ja/docs/Web/HTTP/Methods

サンプルスケッチ

こちらをスケッチの操作方法は以下のようになっています。

• 作成: キーボードの c を押すとマウスの座標に円が追加される
• 削除: 円にマウスが載っている状態でキーボードの d を押すと円が削除される
• 更新: 円をドラッグ&ドロップすると円の座標が更新される

次の記事では、 前回の記事で少し触れたリレーションを扱おうと思います。