Supabase Launch Week 8 3日目 Supabase Studio 3.0 の紹介

#  2日目

Supabase Launch Week 8 2日目 ローカル開発の新機能 について - Qiita

https://qiita.com/masakinihirota/items/05daaf462c6e7f53741d



# 3日目 翻訳

Supabase Studio 3.0 の紹介。

今回の追加機能
AI SQLエディター
ビジュアルスキーマ図
新しいラッパーの追加
その他

これから実装予定の機能も紹介されていました。
早ければ来週中にも実装される予定の機能もあるようです。


ブログでの紹介
Supabase Studio 3.0: AI SQL Editor, Schema Diagrams, and new Wrappers

https://supabase.com/blog/supabase-studio-3-0

動画での紹介
Supabase Studio 3.0: AI SQL Editor, Schema Diagrams, and new Wrappers

https://supabase.com/blog/supabase-studio-3-0



# Supabase Studio 3.0

* SQLエディタ内のSupabase AI: インラインAIがいつでもお手伝いします。
* スキーマビジュアライザー: - すべてのテーブルスキーマを視覚的に確認できます。
* ロール管理: - テーブルデータへのきめ細かなアクセス。
* 共有SQLスニペット: - チームでスニペットを共有できます。
* データベースのマイグレーション用UI: - あなたのデータベースをレシート付きでマイグレーションできます。
* Wrappers UI: - 簡単に外部データをクエリできます。

SQLエディタ内でSupabaseのAIが回答します。
AIはChatGPTやGitHub Copilot chat並みの性能があると思いますし、無料です。
ただAIの提案（＝AIが出力する文）に関しては懐疑的な目で見ておく必要があります。

テーブルが視覚化されます。

ロール管理 不明

スニペット SQLのスニペットとは何なのか？

データベース移行UI データベース移行とは何なのか？

Wrappers UI ラッパーとは何なのか？






# Supabase AI (SQLエディタ内に実装)

Supabase AI は SQLエディター内で直接実行して利用出来るようになりました。

テーブルの提案と
SQL文の提案


## 場所
Supabase Studio 左サイドバーの SQL Editor を選択。

## 使用例1

### SQL文の提案、生成、登録、実行までの流れ
AIにコメントを書いてSQL文を提案してもらいます、そして生成されたSQL文をYour queriesに登録します。
登録したSQL文を実行することで、SupabaseのDBに反映されます。

### 手順
New Query (デフォルト) を選択します。

背景が暗い緑色の **Ask Supabase AI to build a query** の場所に、
日本語でコメントを書きます。

※ ↑の場所が見当たらなかったらAIへの入力ウィンドウを閉じてしまっているかもしれません。
右側に緑のひし形と◯の緑のアイコンをクリックして、再度AIへの入力ウィンドウを表示させてください。

そうすると、Supabase AI が SQL文を生成してくれます。
※あくまでもSQL文を提案してくれるだけです。

「社員を管理するテーブルを作成してください」と入力すると、
以下のようなSQL文が生成されます。（生成後に翻訳文を挿入しています。）

```
-- en:Supabase AI is experimental and may produce incorrect answers
-- Always verify the output before executing
-- ja:Supabase AIは実験的なものであり、間違った回答を出す可能性があります。
-- 実行する前に常に出力を確認してください。

create table
  employees (
    id bigint primary key generated always as identity,
    name text,
    age integer,
    department text,
    position text
  );

```

右上の 緑ボタン Accept change を押すと、Your queries に登録されます。

※ SQL文として実行はしていないため、SupabaseのDBには反映されていません。
あくまでもSQL文として新しく登録されただけです。

生成されたSQL文をSupabaseのDBに反映させるためには、右下のボタン RUN CTRL + ENTER を押します。


## 使用例2

「国の名前を取り出すSQL文を書いてください」と入力すると、
以下のようなSQL文が生成されます。（生成後に翻訳文を挿入しています。）

```
-- en:Supabase AI is experimental and may produce incorrect answers
-- Always verify the output before executing
-- ja:Supabase AIは実験的なものであり、間違った回答を出す可能性があります。
-- 実行する前に常に出力を確認してください。

select
  name
from
  countries;
```

これでテーブルの提案とSQL文の提案ができるようになりました。


## AIでテーブル設計は必要か？

以前は、テーブル設計は別の場所で行い、Webアプリのテーブル設計が完成したらSQL文を作成していました。
そして、PlantUMLで設計図を作成し、git管理下に置いておき、 PlantUMLからSQL文に変換するために、GitHub Copilot chatなどを利用していました。

しかし、今後は、テーブルの設計図に沿って、Supabaseというデータベース上で直接テーブルを作成していくことになるかもしれません。


## 翻訳の続き

前回のLaunch Week 7 では、Supabase AI をスタジオに追加しました。

テーブル、ビュー、インデックスの作成、データベース関数の作成、RLSポリシーの作成など、あらゆる種類の一般的なタスクをSupabase AIに依頼することができます。

このリリースの後、2つの重要な気づきがありました：

人々は、コンピュータに SQL を書いてもらうことが大好きである！
多くの方々が、SQL エディターをプロジェクトの中心（そしてエンジン）として使用しています。
今日、私たちはSQLエディターの大幅な改良をリリースします。
まず、Supabase AIをエディターに直接追加しました。いつでもアクセス可能で、手助けしてくれます。
以前と同様に、プロンプト（注文テーブルを作成してください）を与えると、SQLを返してくれます。

Supabase AIは、エディタ内のSQLスニペットを認識し、あなたのためにそれを修正することができます。
例えば、customersをcustomer_ordersに変更するように頼むことができます。ChatGPTと会話するのと同じように、コードを操作することができます。


# diff ビュー

次に、Supabase AI があなたの SQL スニペットに加えた変更の diff ビュー を追加しました。
何を変更してほしいかを Supabase AI に伝え、Git の diff と同じように可視化することができます。
このビューから、差分を承認したり拒否したり、納得いくまでSupabase AIに変更を依頼し続けることができます。

```元のテーブル
create table
  employees (
    id bigint primary key generated always as identity,
    name text,
    age integer,
    department text,
    position text
  );

```

Supabase AIに
「給料の項目を追加してください。」
と日本語で入力すると、以下のように変更されます。

```変更後のテーブル
reate table
  employees (
    id bigint primary key generated always as identity,
    name text,
    age integer,
    department text,
    position text
  );

alter table employees
add salary numeric;


```

ここからさらに、
Accept additionのすぐ右にあるドロップダウンメニューから、

* Compare as addition（デフォルト値:最初はメニューに表示されない）
* Compare as change
* Compare as new snippet

を選択できます。

※注意: Compare as addition（デフォルト値）は現在選択されるので最初のメニューには表示されません。
ドロップダウンメニューには残りの2つ↑が表示されます。

Compare as addition（デフォルト値）
左に元のSQL文と、右に新しいSQL文を比較して、差分を確認できます。
元のSQL文と新しく追加されたSQL文の両方がマージされて Your queries に登録されます。

Compare as change
追加されたSQL文だけが Your queries に登録されます。

Compare as new snippet
新しく追加されたSQL文だけが、新しいスニペットとして Your queries に登録されます。
（元のSQL文は消えてなかったことになります。）

※ Ctrl + Z で元に戻せます。
※ Ctrl + y で元に戻したものを再度戻せます。



## 翻訳の続き

私たちは長い間、開発者にSQLの使い方を簡単に教えるにはどうしたらいいかと考えてきました。
幸いなことに、私たちはこの問題を早急に解決する必要はありませんでした。

SupabaseのAI を使えば、数百万人にスケールアップするために週末を丸々費やす必要もないだろう。
SQL Editorにアクセスして試してみてください！

今後数ヶ月のうちに、Supabase AI を Studio のより多くの部分に導入する予定です。
Postgresを使うことで、SQLとちょっとしたAIでできることがたくさんあります。
SupabaseのAIアイコンから目を離さないでください。


これらの大規模なAI機能とともに、私たちはスタジオの他の部分にも多くの新しい改良を加えました。これらの機能のいくつかは、コミュニティからのリクエスト、またはコミュニティメンバー自身による貢献によるものです。

📢 以下の機能および改良の多くは、ユーザーからのリクエストによるものです！



# Schema Visualizer

左サイドバーのDatabaseから Schema Visualizer を選択。
右画面上の schema から スキーマ名を選択
例
public schema （デフォルト）
auth schema

選択すると、スキーマ内のテーブルが表示されます。

データベースのテーブルとリレーションを点線でつなぐ
マウスホイールで拡大縮小
テーブルを移動させても、その位置は保存されないようです。
テーブル配置情報の保存方法は見つかりませんでした。


## 翻訳の続き

ここしばらくの間、多くのSupabaseユーザーはZernoniaのSupabase Schema可視化ツールを使用してきました。
これは素晴らしいツールでしたが、多くのユーザーはこのようなものが直接Studioに統合されることを望んでいました。

私たちは Github に Issue を開設し、1日か2日でこの機能が動き出しました。
数週間後、この機能は洗練され、マージされた。オープンソースの力を目の当たりにして感動しました。
この機能は些細なものではなかったし、コミュニティ・メンバーがわずか2週間で機能リクエストから製品化まで持っていったのを見ると、頭が下がる思いだ。間違いなく、私たちは最高のオープンソースコミュニティのひとつです。kamilogorekとadiologydevに心から感謝する！

この素晴らしい新機能にインスピレーションを与えてくれたゼルノニアにも特別な感謝を！OSS FTW。

Supabase Schema

https://supabase-schema.vercel.app/



# Role Management (未実装)

## 翻訳の続き

Postgresにはユーザとロールを管理するためのビルトインサポートがあり、今回のリリースではスタジオでそのためのUIをリリースできることを嬉しく思います。これも非常に一般的な機能要求であり、コミュニティメンバによってほぼ完全に実現されました。

数ヶ月前、HTMHellから突然このPRが届きました。彼らは、私たちのチームからの助けや指示は全く受けずに、すべてを作り上げました。私たちは驚きました。UIに適切に対応するためにバックエンドでいくつか変更を加えましたが、今、私たちはこれを世に送り出す準備がほぼ整いました！

この機能はセキュリティに重点を置いているため、テストを徹底して行いたいと考えており、来週あたりには一般的に利用できるようにしたいと考えている。



# Shared SQL Snippets

SQLスニペットをチームメンバーと共有する機能。
Supabaseには SQL文を共有する機能もある。

## 翻訳の続き
よくリクエストされる機能といえば、これはオールタイム・トップ5に入るだろう。あなたの美しく、手作りのSQLスニペットは、これまであなただけのものでした。しかし今では、それらをチームメンバーと共有し、あなたの技術力に酔いしれることができます。

プロジェクト共通のスニペットを作成することで、共同作業やビルドをより迅速に行うことができます。スニペットを共有するには、Supabase AIが作成した個人的なスニペットをプロジェクトで共有します。スニペットは新しいプロジェクトスニペットリストに表示され、チーム全員が見ることができます。



# Database Migration UI


## 翻訳の続き

スタジオからデータベースのマイグレーションを操作できる新しいUIをリリースします。
データベースのマイグレーションは、バージョン管理されたSQLファイルを使用してデータベースを更新する方法を提供します。
マイグレーションには、データベースに加えたい変更が記述され、データベースに加えられた変更の履歴も記録されます。

CLI からプロジェクトに対してマイグレーションが実行されると、いつ、誰が、どのような変更を行ったかについて、マイグレーションが実行された情報をスタジオで確認できます。マイグレーションを始めるには、ドキュメント↓を参照してください。

Local Development | Supabase Docs

https://supabase.com/docs/guides/cli/local-development#database-migrations




# Wrappers UI (Alpha)

2023年8月10日現在 ドキュメントは 404 not found

Supabase を 外にあるサービスと繋げて、Supabaseの中からクエリを実行してデータが取得できる。（らしい。未確認）

Launch Week 6では、Postgresで海外データラッパーを構築するためのフレームワークであるSupabase Wrappersを発表しました。ラッパーを使うことで、Supabaseプロジェクトはデータのワンストップハブとして機能します。

Wrappersをリリースした当初は、StripeとFirebaseの2つのプロバイダーしかサポートしていませんでした。
現在は6つのプロバイダーに対応しています！今回は、S3、ClickHouse、BigQuery、Logflareのサポートをリリースできることを嬉しく思います！WrappersはSupabaseのプロジェクトに拡張性を与えます。まるで通常のSupabaseテーブルのように、データを直接プロジェクトに取り込むことができます。全く新しい可能性の世界です。

- Stripe: オンライン決済サービスを提供する企業で、クレジットカード決済や定期支払いなどが可能です。
- Firebase: Googleが提供するモバイルアプリやWebアプリの開発プラットフォームで、認証、ストレージ、リアルタイムデータベース、クラウドメッセージングなどの機能を提供しています。
- S3: Amazon Web Services (AWS) が提供するオブジェクトストレージサービスで、大容量のデータを安価に保存することができます。
- ClickHouse: Yandexが提供する分散型カラム指向データベースで、高速なデータ処理が可能です。
- BigQuery: Googleが提供するクラウドベースのデータウェアハウスで、大量のデータを高速に処理することができます。
- Logflare: ログ管理サービスで、複数のログソースからログを収集し、可視化や分析を行うことができます。



ワンストップハブ
複数のサービスや機能を一元的に提供することで、利用者が必要な情報やサービスを簡単に利用できるようにする仕組みのことを指します。例えば、自治体が提供する「ワンストップセンター」では、住民票や税金などの手続きを一括して行うことができます。また、企業が提供する「ワンストップサービス」では、複数のサービスを一元的に提供することで、顧客の利便性を高めることができます。ワンストップハブは、利用者の手間や時間を削減し、サービスの利用をスムーズにすることができます。