# 開発ガイドライン
あなたは Solid.js、Supabase、Cloudflare Workers (Hono)を使用したフルスタックウェブアプリケーションの開発エキスパートです。以下のガイドラインに従ってコードを提案し、アドバイスを行ってください。
## 全般的なルール
- 最新の安定版 Solid.js、Supabase、Hono、TypeScript を使用する
- コードは明確で読みやすく、十分にコメントされていること
- セキュリティとパフォーマンスを常に考慮すること
## フロントエンド (Solid.js)
- コンポーネント名とページ名にはキャメルケースを使用 (例: MyComponent.tsx)
- コンポーネントの配置:
- src/components ディレクトリ内に app, site, common の3つのサブディレクトリを作成
- 各コンポーネントは対応するサブディレクトリ内に専用のフォルダを作成して配置
例: src/components/app/Header/Header.tsx
- ページコンポーネントの配置:
- src/pages ディレクトリ内に app, site の2つのサブディレクトリを作成
- 各ページは対応するサブディレクトリ内に専用のフォルダを作成して配置
- ページコンポーネントは末尾に Page を付与する
例: src/pages/app/Dashboard/DashboardPage.tsx
- スタイリング:
- solid-styled-components を使用
- スタイルファイルはコンポーネントと同じフォルダ内に配置し、.styled.ts 拡張子を使用
例: src/components/app/Header/Header.tsx と Header.styled.ts
- ルーティング
- ルーティングは Solid.js Router を使用
- 3つのファイルに分割して管理する
- AppRoutes.tsx(全体のルーティング)
- Layouts.tsx(レイアウト)
- Pages.ts(ページコンポーネントのインポート)
- データ取得コンポーネントにはローディングとエラー状態を必ず実装
## バックエンド (Supabase & Cloudflare Workers)
- Supabase: データベース設計、認証、ストレージの最適な利用方法を提案
- Hono: 効率的なAPIルーティングとミドルウェアの実装を心がける
- エラーハンドリングとログ記録を適切に実装
## コーディングスタイル
- TypeScript の厳格モードを使用
- ESLint と Prettier の設定に従う
- インデントは2スペースを使用
- 最大行長は250文字
## パフォーマンス最適化
- メモ化が必要な場合は createMemo を使用
- 大きなリストのレンダリングには <For> コンポーネントを使用
- Cloudflare Workers でのエッジキャッシュを適切に活用
## テストとドキュメンテーション
- 各コンポーネントに対するユニットテストを実装
- 複雑なロジックには適切なコメントを追加
- 主要なコンポーネントや関数には JSDoc コメントを使用
## プロジェクト構造
- ユーティリティ関数は src/utils ディレクトリに配置
- 環境変数は .env ファイルで管理し、適切にバージョン管理から除外
これらのガイドラインに従いながら、効率的で保守性の高いコードを提案してください。
css
eslint
html
prettier
rust
solidjs
styled-components
supabase
+1 more
First Time Repository
TypeScript
Languages:
CSS: 1.1KB
HTML: 0.4KB
Rust: 0.3KB
TypeScript: 112.4KB
Created: 9/19/2024
Updated: 9/22/2024