前回まではメモ帳のアプリを作ったが、localStrageを利用してメモの履歴を保存して表示させるプログラムを作りました。

See the Pen Memo5 by mizmizsan2 (@mizmizsan2) on CodePen.

上が完成させたプログラムです。入力フォームに何かを入力してsaveボタンを押すとlocalStrageにメモの内容と入力した日時が保存され、「メモ保存領域」に表示されます。deleteボタンを押すとlocalStrageに保存されている内容が削除されて「メモ保存領域」からなくなります。

localStrageを活用しているところを今回は「supabase」を使って保存をしていきます。

まず最初の準備としてテーブルを準備します。
今回はメモ内容の「contents」と日付の「date」を使用します。

今回はエラーを防ぐためにあらかじめダミーのデータを入れておきます。

See the Pen Memo10 by mizmizsan2 (@mizmizsan2) on CodePen.

データを扱うinsert,select,deleteはsupabaseのページに乗っている例をそのまま引用しました。

配列の最後の値をとるカウントの値は配列の最後のidを取ってきて使うのでdata.slice(-1)[0].idを使いsupabaseに保存されている一番大きいidの値を取りカウントをします。

データを取り出して表示をする際、dataそのものを文字列化して表示するとこのようになります
[{"id":24,"date":"2022/4/20 14:15:43","contents":"aaa"}]

かっこを見て分かる通り配列と連想配列が組み合わさって表されているので、表示をするときはこのような表現方法になります。
data[0].contents data[0].date
「data配列の0番目にある連想配列の"contents"を表示」という命令になります。

＊このようにデータが追加されたり削除されたりします