ExpressとSQLite3で作成したWebAPIをHTMLで利用する

まずは前回のおさらいです

前回Expressでサーバーを構築してSQlite3のデータベースを利用して情報のやり取りをするためのWebAPIをさくせいしました

必要なパッケージは

この３つです

そしてAPIのコードはこちらです

今回はこのWebAPIを利用するためのHTMLを書いてみましたのでそちらの解説をしていきたいと思います

index.htmlでホーム画面を作成

最終的にこの画面を作成します

サーバーをスタートしてhttp://localhost:3000にアクセスするとindex.htmlが読み込まれてこの画面が表示されます

ということでindex.htmlです

GETメソッドでデータを抽出して表示する

まずはGETメソッドでアクセスしてすべてのデータを表示します

こんな感じでHTMLのテーブルを利用して表示します

テーブル部分は34行目～46行目です

ここにWebAPIにGETメソッドでアクセスして取得したデータを表示します

GETメソッドはfetchメソッドを利用して実装しました

９～11行目でJavascriptを読み込んでいます

GETメソッドを使ってすべてのデータを読み込んでいるのはwishlist.jsです

GETメソッドはwishlist.jsのWishListModuleでモジュール化した即時関数のなかにつくったfetchAllList()関数でfetchメソッドを実行しています

ここでは、ホーム画面にアクセスしたら自動的にすべてのデータを読み込む必要があるため、特にボタンなどトリガーは用意していません

読み込まれて、関数が実行されたら良いだけです

ということで、関数を実行する必要があるので

11行目でindex.jsを読み込んでそこでfetchAllList()関数を実行しています

この3行目です

これによってGETメソッドが実行されてデータを取得しています

関数の説明は以下のとおりです

BASE_URL = “http://localhost:3000/api/v1/wishlist”でWebAPIのURIを変数に代入しています

そしてURIに対して

const res = await fetch(BASE_URL)

でfetrchメソッドを実行しています

GETメソッドは特にオプションで指定する必要はありません

これですべてのデータがresに入っています

あとはこれを

const wishlist = await res.json()

としてwishlistの中に配列の形で代入

res.json()とすることで、jsonをJavascriptの配列に変換して利用できるようにしています

そしてfor (let i in wishlist) {処理}

でデータの数だけ処理を実行します

処理の内容は

先ほどのindex.htmlのテーブルのボディーに入れる内容をつぎつぎに読み込んで差し込んでいるというかたちです

document.getElementById(‘wishlist-content’).insertAdjacentHTML(‘beforeend’, body);

この部分でDOM操作をして抽出したデータをwishlist-contentというidを振っていたテーブルのボディーの後ろ’beforeend’にbodyの中身を付け加えて表示しています

あと、データのレコードごとに編集画面へのリンクと削除ボタンを加えています

POSTメソッドは<form>タグで実装

POSTメソッドでリストへの新規登録を行うようにしていますがそちらの実装は

<form>タグで実装しています

<form action=”/api/v1/wishlist” method=”POST” class=”add-form”>ここでURIを指定してPOSTメソッドでアクセスするようにしています

また、inputタグのname要素はWebAPIで設定した通りにしています

今回はこの辺で！

YouTubeもよろしくです！