2025年7月22日火曜日

Supabase に入門した

Use Supabase with React | Supabase Docs をベースに、 VanillaJS で DB に接続しに行ってみた。

前提

  • Supabase プロジェクト作成済み

プロジェクト情報のの確認

  1. プロジェクトページを開く
  2. 右下の情報をメモ
    • Project URL
    • API Key

テーブルの作成

プロジェクトページ -> SQL editor を選択。 表示された SQL エディターで SQL を実行していく。

テーブル作成

-- テーブル作成
create table instruments (
  id bigint primary key generated always as identity,
  name text not null
);
-- テストデータ挿入
insert into instruments (name)
values
  ('violin'),
  ('viola'),
  ('cello');

-- row level security 有効化
alter table instruments enable row level security;

RLS ポリシーの作成

テーブル内のデータを、アノニマスユーザーが読み取り可能に設定。

create policy "public can read instruments"
on public.instruments
for select to anon
using (true);
  • anon: アノニマスユーザー

Vite プロジェクトの作成

プロジェクト作成

node ➜ /workspaces/TIL/supabase (supabase-firststep) $ npm create vite@latest firststep
Need to install the following packages:
create-vite@7.0.3
Ok to proceed? (y) y


> npx
> create-vite firststep


  Select a framework:
  Vanilla

  Select a variant:
  TypeScript

  Scaffolding project in /workspaces/TIL/supabase/firststep...

  Done. Now run:

  cd firststep
  npm install
  npm run dev

Supabase パッケージのインストール

cd firststep && npm install @supabase/supabase-js

環境変数の設定

.env.local を作成し、そこにメモしたプロジェクト情報を指定。

VITE_SUPABASE_URL=<Project URL>
VITE_SUPABASE_ACCESS_TOKEN=<API Key>

実装

src/main.ts:

import { createClient } from "@supabase/supabase-js";

const supabase = createClient(import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY);

const { data } = await supabase.from("instruments").select();

console.log(data);

const app = document.getElementById('app');

if (app) {
  // ルート要素作成
  const root = document.createElement('div');

  // タイトル追加
  const h1 = document.createElement('h1');
  h1.textContent = "Supabase Instruments";
  root.appendChild(h1);

  // リスト作成
  const ul = document.createElement('ul');
  data?.forEach(instrument => {
    const li = document.createElement('li');
    li.textContent = `id: ${instrument.id}, name: ${instrument.name}`;
    ul.appendChild(li);
  });
  root.appendChild(ul);

  // ルート要素をアプリケーションに追加
  app.appendChild(root);

}

動作確認

npm run dev して http://localhost:5173 にアクセスすると、挿入したデータが表示される。 OK.

参考資料

2025年7月12日土曜日

Pull Request 作成ガイドのひな形を作った

毎プロジェクトで作っていて毎回面倒だと思っている気がするのでひな形を作った。

# 開発者向け Pull Request 作成ガイド

以下の手順で開発環境を整え、プルリクエストを送ってください。

## 1. リポジトリをクローンする

まずは GitHub 上のリポジトリをローカルにクローンします。

```sh
git clone https://github.com/YourOrganization/YourRepository.git
cd YourRepository
```

**既に clone 済みの場合**

すでにリポジトリを clone している場合は、main ブランチに移動し、最新のソースコードを取得します。

```sh
git switch main
git pull origin main
```

## 2. 新しいブランチを作成する

開発作業は必ず新しいブランチで行ってください。
ブランチ名は以下のように issue 番号を含め、分かりやすい名前をつけるようにしてください。


例:

```sh
git switch -c 123_add-test
```

## 3. コードを修正する

### 3-1. 修正後、変更内容を確認する

修正を行った後、以下のコマンドで修正ファイルの一覧を確認します。

```sh
git status
```

さらに、修正内容の差分を確認する場合は次のコマンドを使います。

```sh
git diff
```

### 3-2. 修正をステージングする

修正内容をステージング(インデックスに追加)します。

```sh
git add .
```

### 3-3. ステージング後の確認

再度、ステージング済みファイルを確認します。

```sh
git status
```

ステージング済みの差分を確認したい場合は以下を使います。

```sh
git diff --cached
```

### 3-4. コミットする

コミットメッセージは簡潔かつ内容が分かるように記載してください。

例:

```sh
git commit -m "テストを追加"
```


## 4. プルリクエスト作成前に main ブランチへ rebase する

プルリクエストを作成する前に、最新の main ブランチを取り込み、自分のブランチを rebase します。

### 4-1. main ブランチを最新にする

```sh
git switch main
git pull origin main
```

### 4-2 作業ブランチに戻る

```sh
git switch feature/add-login-page
```

### 4-3. main ブランチの最新履歴を取り込む

```sh
git rebase main
```

もしコンフリクトが発生した場合は、表示される指示に従って解決し、以下で rebase を続行します。

```sh
git add .
git rebase --continue
```

## 5. リモートリポジトリへプッシュする

```sh
git push -u origin 123_add-test
```

## 6. プルリクエストを作成する

GitHub 上で以下の手順でプルリクエスト(PR)を作成してください。

1. GitHub のリポジトリページを開く
2. 「Compare & pull request」ボタンをクリック
3. タイトルと説明を入力
    - どのような変更か
    - 関連する Issue があれば番号を記載(例: closes #123)
4. レビューアを指定(必要であれば)
5. 「Create Pull Request」をクリックして作成


## 7. プルリクエストマージ後、main ブランチへ戻る

プルリクエストのマージが完了したら、作業ブランチから main ブランチへ戻します。

```sh
git switch main
git pull origin main
```

## 注意事項

- main ブランチには直接 push しないでください
- 大きな変更の場合は事前に Issue を立てて相談してください
- レビューコメントが付いたら対応をお願いします

変更履歴

日付 内容
2025/7/12 01 新規作成
2025/7/12 02 pull 操作について追加
リベースの説明追加
マージ後 main に戻る手順を追加