Skip to main content

​
ローカル環境セットアップ

Jeliqからエクスポートしたコードをローカル環境で動作させるための手順を解説します。

​
前提条件

以下のツールがインストールされている必要があります。
ツールバージョン確認コマンド
Node.js18.x以上node -v
npm または yarn最新版npm -v / yarn -v
Git最新版git --version
Node.jsのバージョン管理には、nvmやvoltaの使用を推奨します。

​
セットアップ手順

1

リポジトリのクローン

Jeliqからエクスポートされたリポジトリをクローンします。
git clone https://github.com/yourcompany/your-app.git
cd your-app
2

依存パッケージのインストール

npm install
# または
yarn install
3

環境変数の設定

プロジェクトルートに.env.localファイルを作成し、必要な環境変数を設定します。
# .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
.env.localファイルはGitにコミットしないでください。機密情報が含まれています。
4

開発サーバーの起動

npm run dev
# または
yarn dev
ブラウザでhttp://localhost:3000にアクセスしてアプリを確認します。

​
Supabaseの設定

​
プレビュー環境のSupabaseを使用する場合

Jeliqのプレビュー環境で使用しているSupabaseに接続する場合は、Jeliqの管理画面から接続情報を取得してください。

​
新しいSupabaseプロジェクトを使用する場合

本番環境用に新しいSupabaseプロジェクトを作成する場合の手順です。
1

Supabaseプロジェクトの作成

  1. Supabaseにログイン
  2. 「New Project」をクリック
  3. プロジェクト名、パスワード、リージョンを設定
  4. 「Create new project」をクリック
2

接続情報の取得

  1. プロジェクトの「Settings」→「API」を開く
  2. 以下の情報をコピー：
    • Project URL → NEXT_PUBLIC_SUPABASE_URL
    • anon public key → NEXT_PUBLIC_SUPABASE_ANON_KEY
3

マイグレーションの実行

supabase/migrations/ディレクトリにあるマイグレーションファイルを実行します。方法1: Supabase CLIを使用
# Supabase CLIのインストール
npm install -g supabase

# ローカルにSupabaseをセットアップ
supabase init

# リモートプロジェクトにリンク
supabase link --project-ref your-project-ref

# マイグレーションを実行
supabase db push
方法2: SQL Editorで直接実行
  1. Supabaseダッシュボードの「SQL Editor」を開く
  2. マイグレーションファイルの内容をコピー&ペースト
  3. 「Run」をクリック

​
開発用コマンド

コマンド説明
npm run dev開発サーバーの起動
npm run buildプロダクションビルド
npm run startプロダクションサーバーの起動
npm run lintESLintによるコード検証
npm run type-checkTypeScriptの型チェック

​
トラブルシューティング

対処法：
  1. Node.jsのバージョンを確認（18.x以上が必要）
  2. node_modulesとpackage-lock.jsonを削除して再インストール 
    rm -rf node_modules package-lock.json
npm install
確認事項：
  1. .env.localファイルが存在するか
  2. 環境変数名が正しいか（NEXT_PUBLIC_プレフィックスが必要）
  3. 値が正しいか（余計なスペースや改行がないか）
  4. Supabaseプロジェクトがアクティブか
対処法：
  1. マイグレーションファイルの順序を確認（日付順に実行）
  2. 依存関係のあるテーブルが先に作成されているか確認
  3. エラーメッセージを確認し、個別に対処
対処法：
  1. npm run type-checkで型エラーを確認
  2. npm run lintでLintエラーを確認
  3. エラーメッセージに従って修正

​
IDE設定

​
VS Code推奨拡張機能

以下の拡張機能のインストールを推奨します。
  • ESLint - コード品質のチェック
  • Prettier - コードフォーマット
  • Tailwind CSS IntelliSense - Tailwindクラスの補完
  • TypeScript - 型サポート

​
推奨設定（.vscode/settings.json）

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}

​
次のステップ

ローカル環境でアプリが動作することを確認したら、以下のドキュメントを参照してください。

品質保証チェックリスト

本番化前に確認すべき項目

カスタマイズガイド

コードのカスタマイズ方法