今回はExpressとSQLite3でWebAPIを作成してHTMLでそれを利用するというものを作成しました
以前につくったWishListとほぼ同様のものです
前回はEJSを使ってフロントエンドの処理をサーバー側で準備して表示しました
要するにURIにアクセスがあったらそれに対するレスポンスとして、データなどすべてをEJSのテンプレートにはめ込んだ状態でHTMLにレンダリングしてブラウザ上に表示するという形をとっていました
今回は、サーバー側はあくまでデータベースとの間で必要なデータの抽出を行い、ブラウザ側に返すというWebAPIとしての機能だけを実装しました
そして、クライアント側の処理はHTMLとJavascriptで動的に動かして表示する内容を更新するという形式にしました
できあがったものはこんなかんじです
今回はCSSも頑張ってみました
WebAPIの概要
URIは
| URI | Method | 内容 |
| /api/v1/wishlist | GET | データの取得 |
| /api/v1/wishlist | POST | データの追加 |
| /api/v1/wishlist/:id | PUT | データの更新 |
| /api/v1/wishlist/:id | DELETE | データの削除 |
基本的にMethodで処理を分ける形式をとりました
そして、データベースの処理は基本となるCRUDをすべて組み込みました
APIのコードはこんな感じです
/api/v1/wishlistへのGETメソッドによるリクエストの処理
今回もサーバーはExpressで準備をしました
ただし、EJSのテンプレートを利用しないためExpressGeneratorは使用していません
今回は const path = require(‘path’);でpathモジュールを組み込んで、
app.use(express.static(path.join(__dirname, ‘public’)));でpublicフォルダに入っているファイルをHTMLなど静的ファイルを利用できるようにしています
あとは上記で記したURIの設計通りにWebAPIを実装しました
GETメソッド /api/v1/wishlistはすべてのデータの取得です
app.get(‘/api/v1/wishlist’, (req, res) => {処理}
で、/api/v1/wishlistに対してGETメソッドでリクエストを投げた場合の処理をかいています
処理の内容については
const db = new sqlite.Database(‘wishlist.db’);でデータベースを開き
db.serialize(() => {処理}
でデータベースとのやり取りを同期処理で実装しています
順番通りにSQLクエリを実施してデータの処理を行います
※この処理はすべてのURIで共通です
db.all(“select * from wishlist”, (err, rows) => {処理}
でwshlistテーブルに入っているデータをすべて取得しています
取得したデータはrowsに格納されています
エラーの場合はerrにその内容が入ります
そして、処理のところでres.json(rows)として、rowsをjson型のデータにしてresponseとして返しています
/api/v1/wishlistへのPOSTメソッドでのリクエストの処理
POSTはデータの追加です
データの追加ですのでPOSTメソッドの際はbodyにデータを入れてリクエストが投げられると想定しています
let wish = req.body.wish let memo = req.body.memo let finished = req.body.finished
という形でbodyに入れてクライアント側から送信されたデータをそれぞれの変数の中に格納しています
そして、POSTメソッドはデータの追加で、データの取得ではないため結果を返す必要がありません
そこでdb.exec()で処理をします
`insert into wishlist (wish, memo, finished) values(“${wish}”,”${memo}”,”${finished}”)`
insertはデータベースへの追加です
wishlistテーブルのwish, memo, finishedのカラムに先ほどクライアント側から取得した値を追加するという処理をしています
その後の処理は画面の更新をして表示しなおしています
/api/v1/wishlist/:id へのPUTメソッドでのリクエストの処理
PUTは更新の処理です
bodyでデータを受け取るという点はPOSTメソッドと同様です
URIを見てもらうとわかりますが、末尾にidを入れています
これによって任意のデータを更新ようにします
const id = req.params.idでid番号を取得して変数idに代入し、それをSQLクエリで検索にかけて更新するデータを特定しています
update wishlist set wish=”${wish}”, memo=”${memo}”, finished=”${finished}” where id=”${id}”の部分です
UPDATEもレスポンスでデータを送信する必要がありませんので、db.exec()を使用しています
また、SQLクエリ後の処理もブラウザの更新です
/api/v1/wishlist/:id へのDELETEメソッドでのリクエストの処理
DELETEは削除の処理です
削除ですのでクライアント側とのデータのやり取りはありません
削除するデータの指定をして削除のクエリをデータベースに投げるだけです
データの特定はURIの末尾のidで検索をかけてレコードを特定しています
delete from wishlist where id=”${id}” これがSQLクエリになります
WHEREで抽出条件を提示しているというのはここまでと共通していますね
自分もまだSQLクエリについては全く勉強していないので、いずれ勉強したいと思います
今回はWebAPIをの実装までの説明となります
次回はWebAPIを叩くためのHTMLの説明をします
コメント