アプリ作成記録

おに

ポートフォリオ制作のアプリをスクラップで残していく予定。
Figmaである程度のワイヤーは出来上がったのでまずは環境構築から。

おに

技術選定は以下の通り

フロントエンド

TypeScript
React
Next.js

バックエンド

Supabase

ORM

Prisma

コード解析

ESLint

フォーマッター

Prettier

CSSフレームワーク

TailwindCSS
shadcn/ui

インフラ・CI / CD

Vercel

テスト

Jest

おに

まずはNext.jsのインストールから

npx create-next-app@latest

おに

いつの間にやらv15まできてる

おに

gitのcommitにルールを設けたいので調べてみる

おに

Zennにあった

おに

上記の記事の内容に沿いつつ、ChatGPTですぐに生成できるようにした。

chore: 🔧 #456 プロダクションに影響のないタスクファイルの修正
docs: 📚 #789 READMEファイルの更新
feat: ✨ #123 新しいログイン機能の追加
fix: 🐛 #234 ログインバグの修正
refactor: ♻️ #345 コードのリファクタリング
style: 💄 #567 コードフォーマットの修正
test: ✅ #678 テストコードの追加と修正

おに

tsconfig.jsonを下記のURLから一部引用して修正

tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
+   "forceConsistentCasingInFileNames": true,
+   "noImplicitReturns": true,
+   "noUncheckedIndexedAccess": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

おに

prettierとESLint周りの設定を追加
markuplintの追加
husky, lint-stagedの追加

おに

markuplint

コマンド経由のリントだと通るけど、拡張機能側のリントが通らない
jsx-parserが見つからないとerrorでるけどインストールしてる

時間かかりそうなのでとりあえず放置

おに

Github-flowを導入して、issueドリブン開発で開発を進めていく
以下参考

Github-flow

issueドリブン開発

https://kk-web.link/blog/20221202

おに

ディレクトリ構成について以下を参考に開発を進める

おに

公式のAuth認証を参考にGitHub認証を実装

おに

認証後にアカウント情報を紐づけて登録させたいので、PrizmaでSupabaseにusersとprofilesテーブルを作成して、usersとauth.usersを紐づける。
手順としては以下の通りにする予定

GitHub認証を実装
Prizmaを利用してprofiles, usersテーブルを作成してマイグレーションを行う
supabaseで作成したusersテーブルとauth.usersを連携
React Hook FormとZodを利用してアカウント作成用フォームを作成
作成したフォームとprofileテーブルの連携
認証後にアカウント作成が済んでいるかどうかをチェックする実装を行う

ひとまずできるかどうかが曖昧なのでひとつずつ実践していく。

おに

GitHub認証とフォームの見た目を作成したので、ひとまずPrismaのセットアップから。

公式を参考にセットアップ

おに

初回のマイグレーション処理などにはsesstionモードを、CRUD処理にはTranscationモードを利用する
- 今回はマイグレーションなのでSessionモードを利用してマイグレーションを行う

# Transactionモード（アプリケーション用）
DATABASE_URL="postgres://[db-user].[project-ref]:[db-password]@aws-0-[aws-region].pooler.supabase.com:6543/[db-name]?pgbouncer=true&connection_limit=1"

# Sessionモード（マイグレーション用）
MIGRATION_DATABASE_URL="postgres://[db-user].[project-ref]:[db-password]@aws-0-[aws-region].pooler.supabase.com:5432/[db-name]"

おに

設定後マイグレーションを実行

npx prisma migrate dev --name init

完了するとSupabase側にテーブルが作成される。

おに

テーブルは作成されたが、Authenticationで作成されたauth.usersとPrismaで作成したusersが別物なので、連携させる必要がある。

連携にはSupabaseで用意されているトリガー機能を利用して、サインアップ後にusersにデータを追加するように設定する。

おに

SQLエディターで以下を実行

-- 既存のトリガーを削除
DROP TRIGGER IF EXISTS on_auth_user_created ON auth.users;

-- トリガー関数を作成
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS trigger AS $$
BEGIN
  INSERT INTO public.users (id, email, created_at, updated_at)
  VALUES (NEW.id, NEW.email, NEW.created_at, NEW.updated_at);
  RETURN NEW;
END;
$$ LANGUAGE plpgsql
SECURITY DEFINER
SET search_path = public;

-- 新しいトリガーを作成
CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

トリガー関数の中身はテーブルで利用するカラムに合わせて適宜修正を行う必要がある。
実行後、GitHub認証でサインアップされた場合に自動的にpublic.usersにもユーザーが登録される。

参考

おに

PrismaスキーマからZodスキーマを自動生成できるようにzod-prisma-typesライブラリを利用してスキーマを生成する。