Skip to main content

​
生成されるコード

Jeliqで生成されるコードの特徴と構成について解説します。

​
コードの特徴

​
TypeScriptベース

全てのコードはTypeScriptで記述されており、型安全性が確保されています。 
// 型定義の例
interface Customer {
  id: string
  name: string
  email: string
  status: 'active' | 'inactive'
  createdAt: Date
}

// 型を使用した関数
async function getCustomer(id: string): Promise<Customer | null> {
  const { data, error } = await supabase
    .from('customers')
    .select('*')
    .eq('id', id)
    .single()

  if (error) return null
  return data
}

​
モダンなReactパターン

Server ComponentsとClient Componentsを適切に使い分けています。 
// Server Component（デフォルト）
async function CustomerList() {
  const customers = await getCustomers()
  return (
    <ul>
      {customers.map(customer => (
        <li key={customer.id}>{customer.name}</li>
      ))}
    </ul>
  )
}

// Client Component（インタラクティブな部分）
'use client'

function CustomerForm() {
  const [name, setName] = useState('')
  // ...
}

​
一貫したコーディングスタイル

ESLintとPrettierによるコード品質の維持。

​
ファイル構成

詳細なファイル構成についてはアーキテクチャを参照してください。

​
生成されるコンポーネント

​
UIコンポーネント

  • Button、Input、Selectなどの基本UI
  • Table、Card、Modalなどの複合コンポーネント
  • フォームコンポーネント

​
レイアウトコンポーネント

  • Header、Sidebar、Footer
  • ページレイアウト
  • レスポンシブ対応のグリッド

​
機能コンポーネント

  • 認証フォーム
  • CRUD操作のフォーム
  • データテーブル（ソート、フィルター対応）

​
データアクセス

Supabase Clientを使用した型安全なデータアクセス。 
// データ取得
const { data, error } = await supabase
  .from('customers')
  .select('id, name, email, orders(id, amount)')
  .order('created_at', { ascending: false })

// データ作成
const { data, error } = await supabase
  .from('customers')
  .insert({ name, email })
  .select()
  .single()

// データ更新
const { error } = await supabase
  .from('customers')
  .update({ name })
  .eq('id', customerId)

// データ削除
const { error } = await supabase
  .from('customers')
  .delete()
  .eq('id', customerId)

​
品質について

  • 長所: 迅速なプロトタイピング、一貫した構造
  • 改善が必要な場合がある点: エラーハンドリング、テスト、パフォーマンス最適化
本番利用前には品質保証チェックリストに従ってレビューを実施してください。