Skip to main content

​
カスタマイズガイド

Jeliqで生成されたコードは標準的なNext.js/Reactアプリケーションであり、自由にカスタマイズできます。このガイドでは、よくあるカスタマイズパターンを解説します。

​
UIのカスタマイズ

​
カラースキームの変更

tailwind.config.jsでカラーを変更できます。 
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          // ... 他の色階調
          600: '#2563eb',
          700: '#1d4ed8',
        },
      },
    },
  },
}

​
フォントの変更

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'Noto Sans JP', 'sans-serif'],
      },
    },
  },
}
Next.jsでフォントを読み込む場合： 
// app/layout.tsx
import { Inter, Noto_Sans_JP } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })
const notoSansJP = Noto_Sans_JP({ subsets: ['latin'] })

export default function RootLayout({ children }) {
  return (
    <html lang="ja" className={`${inter.className} ${notoSansJP.className}`}>
      {children}
    </html>
  )
}

​
コンポーネントのスタイル変更

個別のコンポーネントのスタイルは、各ファイル内のTailwind CSSクラスを変更します。 
// 変更前
<button className="bg-blue-600 text-white px-4 py-2 rounded">
  送信
</button>

// 変更後（角丸を大きく、影を追加）
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-shadow">
  送信
</button>

​
機能の追加

​
新しいページの追加

App Routerでは、ファイルを作成するだけでページが追加されます。 
// app/(dashboard)/reports/page.tsx
export default function ReportsPage() {
  return (
    <div>
      <h1>レポート</h1>
      {/* コンテンツ */}
    </div>
  )
}

​
新しいAPIエンドポイントの追加

// app/api/reports/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  // データ取得処理
  const data = await fetchReports()
  return NextResponse.json(data)
}

export async function POST(request: Request) {
  const body = await request.json()
  // データ保存処理
  return NextResponse.json({ success: true })
}

​
外部APIとの連携

// lib/external-api.ts
export async function fetchExternalData() {
  const response = await fetch('https://api.example.com/data', {
    headers: {
      'Authorization': `Bearer ${process.env.EXTERNAL_API_KEY}`,
    },
  })
  return response.json()
}

​
データベースの変更

​
新しいテーブルの追加

  1. マイグレーションファイルを作成
-- supabase/migrations/YYYYMMDDHHMMSS_add_comments_table.sql
CREATE TABLE comments (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  content TEXT NOT NULL,
  user_id UUID REFERENCES auth.users(id),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- RLSを有効化
ALTER TABLE comments ENABLE ROW LEVEL SECURITY;

-- ポリシーを作成
CREATE POLICY "Users can view all comments" ON comments
  FOR SELECT USING (true);

CREATE POLICY "Users can insert own comments" ON comments
  FOR INSERT WITH CHECK (auth.uid() = user_id);
  1. 型定義を更新
// types/database.types.ts に追加
comments: {
  Row: {
    id: string
    content: string
    user_id: string
    created_at: string
  }
  Insert: {
    id?: string
    content: string
    user_id?: string
    created_at?: string
  }
  Update: {
    id?: string
    content?: string
    user_id?: string
    created_at?: string
  }
}

​
既存テーブルへのカラム追加

-- supabase/migrations/YYYYMMDDHHMMSS_add_status_to_customers.sql
ALTER TABLE customers ADD COLUMN priority VARCHAR(20) DEFAULT 'normal';

​
認証のカスタマイズ

​
OAuth認証の追加

Supabaseダッシュボードで設定：
  1. Authentication → Providers
  2. 追加したいプロバイダー（Google、GitHubなど）を有効化
  3. クライアントID/シークレットを設定
フロントエンド側： 
// OAuth認証のボタン
import { supabase } from '@/lib/supabase/client'

export function GoogleSignInButton() {
  const handleSignIn = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: `${window.location.origin}/auth/callback`,
      },
    })
  }

  return (
    <button onClick={handleSignIn}>
      Googleでログイン
    </button>
  )
}

​
カスタム認証ロジック

// lib/auth.ts
import { supabase } from '@/lib/supabase/client'

export async function signInWithCustomLogic(email: string, password: string) {
  // カスタムバリデーション
  if (!isValidEmail(email)) {
    throw new Error('無効なメールアドレスです')
  }

  // Supabase認証
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })

  if (error) {
    throw error
  }

  // カスタム後処理（ログ記録など）
  await recordLoginActivity(data.user.id)

  return data
}

​
状態管理の追加

より複雑な状態管理が必要な場合、Zustandを追加する例： 
npm install zustand

// lib/store.ts
import { create } from 'zustand'

interface AppState {
  sidebarOpen: boolean
  toggleSidebar: () => void
  user: User | null
  setUser: (user: User | null) => void
}

export const useAppStore = create<AppState>((set) => ({
  sidebarOpen: true,
  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
  user: null,
  setUser: (user) => set({ user }),
}))

​
テストの追加

​
Jestのセットアップ

npm install -D jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
}

// __tests__/components/Button.test.tsx
import { render, screen } from '@testing-library/react'
import { Button } from '@/components/ui/Button'

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>)
    expect(screen.getByText('Click me')).toBeInTheDocument()
  })
})

​
よくあるカスタマイズパターン

Tailwind CSSのダークモードを有効にし、トグルボタンを追加します。
next-intlやreact-i18nextを使用して多言語対応を実装します。
ドラッグ&ドロップ対応やプログレス表示を追加します。
react-hot-toastやreact-toastifyでトースト通知を追加します。

アーキテクチャ

コード構造の詳細

品質保証チェックリスト

本番化前の確認事項