隠し部屋の秘境

豆知識的な小ネタ見つけては投稿していきます

Denoでsupabaseを使うまでの一連の流れ

この記事では、Denoからsupabaseにアクセスする方法を解説していきます。
まだ習いたての初心者でにわかですが、
にわかだからこそ初心者向けにはわかりやすい説明ができるのでは?と思っています。
単純に説明が下手、とかがなければね。

この記事の対象

  • とりあえず動いて、データベースが使えればいいと言う人
  • jsでサーバースクリプト作ってる人

分かり易さ優先で厳密な事には一切触れません。
安全性もあったもんじゃありません。

また、前提としてある程度は自分で調べて見たものとして、
少なくとも次の事が押さえてあるとします。

  • Denoのserveが使える
  • supabaseのアカウントがありプロジェクトがありパスワードを覚えている

この上で、Denoでsupabaseが使えるために追加で必要な事が次のたった2つです!

タスク

  1. SQLiteの構文を理解する
  2. それをjsに組み込む方法を理解する

既に分かるものは無視しておk
それでは順番に行こう

1. SQLiteの構文

項目1としましたが正直、後回しでもいいです。
まずはじめに言います。
インストール関連の必要は全くありません。
SQLiteはあくまでデータベースのための文法(→単なる知識教養)という認識でいいと思います。
MySQLというのもあるようですが、SQLiteとは別物っぽいです。

なので、実際にDenoではSQLiteのソフトは不要なので、そっちは勉強用に使うくらいでいいかと。

データベースを扱う際に大抵欲しいのが取得,追加,更新,削除。この辺りだと思います。
ここでも軽く触れはしますが、それよりもおすすめの記事がございます。m(*_ _)m

ここで触れるのは最低限だけの事です。

2. jsに組み込む方法

まずはサーバースクリプトを開きます。
importは次のものを追加します▶︎
import * as postgres from "https://deno.land/x/postgres@v0.14.0/mod.ts"

次にスクリプトの最初らへんに次のものを追加します▶︎
const pool = new postgres.Pool(接続文字列)
ここで「接続文字列」は次の場所にあります。

ここまでの内容はserveの外側に記述するものですが、これ以降は内側に記述します。

  • データベースの接続と解放

supabaseを使う始めの位置に記述します▶︎

const connection = await pool.connect();
一方、使い終わりの位置に記述します▶︎
connection.release();

  • データベースの操作

SQLite構文を次のように埋め込んで記述します▶︎

const response = await connection.Query`
SQL構文
`;
例えば、testというテーブルのうち、idというカラムが'foo'という値の行の、barというカラムに変数buzという値をセットする場合は次のようにします。
const response = await connection.Query`
UPDATE test SET buz=${buz} WHERE id=${'foo'}
`;
あとは始めと終わりの間は自由にデータベース操作ができます。

ここで注意事項はあります。

  • テーブル名及びカラム名には大文字とハイフン(-)が使えません。アンダーバー(_)は使えることを確認。

大文字はsupabase側で勝手に小文字に変換され、ハイフンはエラーになります。

  • 値以外の構文の部分を関数や変数で普通に作ろうとするとエラーになります。逆に値は直接埋め込んでも可です。

その理由はこちらを参考に分かります。
テンプレートリテラル (テンプレート文字列) - JavaScript | MDN

またGETリクエストの場合、返ってくる値はJSON形式となっており、テーブルのデータはrowsに格納されています。要するに、
response.rows
でお目当てのデータを取得できるかと思います。

まとめ

この記事の全体の構造

  1. 前提
  2. SQLiteの構文
  3. jsに組み込む方法
    • serve関数外でsupabaseの準備
    • serve関数内でsupabaseの操作