PL-900に一発合格出来ました！ (2).jpg

春に植えたバジルとゴーヤの苗がすくすくと育ち、持て余しております。
まだゴーヤは有限個しか実が生らないため、隣家に配ることで事なきを得ているのですが、バジルは本当に無限です。

ジェノベーゼだの、カプレーゼだの、いろいろ試したのですが、飽きてきています。

そう、これはマンネリ。マンネリを打破するには、新しいことに挑むしかない！
というわけで、今回はこちら！

やったことないモダンな技術に触れてみる！Supabase初体験 with ChatGPT！

今回はめちゃくちゃ簡単なログイン機能付きのTodoアプリを作成してみました。
成果物のリポジトリはこちら。
アカウント登録とか、ログアウトの機能とかはつけていないし、CSSも作りこめていないですが、悪しからず！

バジルのレシピは、引き続き募集中です。

Supabaseとは
AIと進める爆速TODOアプリ開発
AIだと解決できなかったところ
まとめ

1. Supabaseとは

いつも通り、公式の記述をパクってきてGoogle翻訳しました。

SupabaseはPostgres開発プラットフォームです。Postgresデータベース、認証、インスタントAPI、エッジ関数、リアルタイムサブスクリプション、ストレージ、そしてベクター埋め込み機能を活用してプロジェクトを開始しましょう。

要するに、バックエンド全部乗せプラットフォームです。
Firebaseが基になっており、SQLが使えたり、柔軟な認証機能が使えたりします。

こういうプラットフォームをBaaS（Backend as a Service）と呼びます。

ひとくちメモ --- BaaS ---
BaaS（Banking as a Service）という全く同じ略され方をする、全然違う意味の言葉があります。
銀行のサービスをAPIなどとして提供することを指す言葉のようです。
お気を付けください！
------

ちなみに、なんでSupabaseを選んだのかというと、ChatGPTに「なんかモダンな開発をやってみた～い」と相談したところ教えてくれました。

実際に使ってみると、アカウントを登録してからDBが作成できるところまで5分程度で行けてしまい、「こいつはすげぇや」と思いました。

2. AIと進める爆速開発

まず、大まかに今回作ったものの紹介を。

使ったもの
・バックエンド：Supabase
・フロント：Vue3 + TypeScript

機能
・認証（Supabaseの機能でメール/パスワード認証）
・Todo管理（追加・表示・チェック）

実装の流れとしては、

Supabaseのアカウント登録～プロジェクト作成
テーブル作成
フロント実装

という順序でやりました。
トータル１時間半くらいで、ローカルで動かしつつDBと通信できるところまで行きました。

1. Supabaseのアカウント登録～プロジェクト作成

Supabaseの公式サイトでアカウント登録 → プロジェクトを作成。ここまでは完全にGUIで進められます。

ですが、、、
実はこのあたりが、一番ChatGPTの言う通りにはいかなかったところかもしれません。
というのも、UIの場所ってやっぱりチャットだけの情報では理解が難しいのと、デザインが変わるとUIの場所も変わるので、AI側が最新の情報を上手く出力できなかったりする部分があります。

UI迷子マーン

今日の一句
UIは、ユーザーインターフェイスなんだから、ユーザーの俺が頑張って探す

といいつつも、ある程度の手順を出してもらったり、公式のドキュメントや参考になりそうなQiitaのリンクを出してもらったり、使い方を工夫して開発の速度を上げました。

2. テーブル作成

Todoを保存するためのテーブルを作成しました。
普通に質問したら、GUIでテーブルを作成する案内をされて、上記の件で「トホホ、UIはコリゴリだよ」状態だったので、SQLで出力させました。

-- テーブル作成
create table if not exists public.todos (
id uuid primary key default gen_random_uuid(),
user_id uuid not null,
title text not null,
done boolean not null default false,
inserted_at timestamp with time zone default timezone('utc', now())
);

「いいじゃ～ん」と思ったそこのあなた。
ちょっと待って、プレイバック。

せっかくBaaSなんですから、セキュリティ関係の設定もしなきゃいけません。
行レベルのセキュリティや、ポリシーなども有効にしてもらえるように追加で指示をだして、最終的には以下のようなクエリができあがりました。

-- テーブル作成
create table if not exists public.todos (
id uuid primary key default gen_random_uuid(),
user_id uuid not null,
title text not null,
done boolean not null default false,
inserted_at timestamp with time zone default timezone('utc', now())
);

-- RLS有効化
alter table public.todos enable row level security;

-- SELECTポリシー（自分のだけ見れる）
create policy "ユーザーのTODOのみ選択可能"
on public.todos for select
using (auth.uid() = user_id);

-- INSERTポリシー（自分のTODOだけ登録可）
create policy "ユーザーのTODOだけ登録可能"
on public.todos for insert
with check (auth.uid() = user_id);

-- UPDATEポリシー（必要なら）
create policy "ユーザーのTODOだけ更新可能"
on public.todos for update
using (auth.uid() = user_id);

こんな感じのテーブルが作れました。GUIDとかが含まれてたので、一部を黒塗りにしています。

3. フロント実装

自分の実力的に一番自信があったのがここですが、一番AIが頼りになったのもここだったかもしれません。
npmインストールのコマンドとか、適当なTodo画面の生成とか、実装の7~8割はChatGPTに出力してもらい、
レビューして修正しつつ、気に入らない所とかAIの生成だと足りていない部分（routerの実装が結構抜けてた印象）を追加で書き足したりしました。

ログイン画面

Todo画面

自分でも理解している分、AIがすっ飛ばしても、「ここはこう書きゃいけるでしょ」みたいな感じでその場で補完ができたので、かなり理想的な開発体験ができた気がします。

まとめ

Supabase × ChatGPTで開発してみて、とにかく開発スピードが速く、このビッグウェーブに乗り遅れてしまうと本当に時代に取り残されてしまうんだろうなと実感しました。

Supabaseは、大規模なアプリケーションに対してはまだまだ課題がありそうでしたが、スタートアップやMVP開発、社内ツールなど限定的な用途での利用であればかなり効果を期待できる選択肢だと思いました。

AIとの開発については、やっぱりまだ課題感が見え隠れするものの、付き合い方を間違えなければ、とても強力なツールであることを再認識しました。

今後も、どんどん新しいことに挑戦していきたいです！
手始めに、バジルとゴーヤを蒸すところから始めてみようと思います。

最後に

弊社では、今回のようなモダンな技術を取り入れた開発も、Azureを使用してしっかり組んでいく開発も、どちらもご対応が可能になっております。

また、フルスクラッチでの開発にとどまらず、PowerPlatformなどのローコード開発の受託や支援なども行わせていただいております。

お客様の要件に合わせて、最適な開発をご提案いたしますので、開発でお困りの際には、ぜひ弊社にお声がけいただけたらと思います。

Supabase初体験！with ChatGPTで爆速BaaS構築！