シーシャ検索アプリ
シーシャ（水タバコ）のフレーバーを検索・閲覧できるWebアプリケーションです。豊富なフレーバーデータベースから、お気に入りのフレーバーを簡単に見つけることができます。
🌟 機能
- 高速検索: キーワードでフレーバーを即座に検索
- メーカー別フィルタリング: お気に入りのメーカーで絞り込み
- 詳細情報表示: 各フレーバーの詳細な説明とイメージ
- ページネーション: 大量のデータを見やすく表示
- レスポンシブデザイン: スマートフォンからデスクトップまで対応
- ダークモード対応: 目に優しい暗いテーマ
- アニメーション: Framer Motionによる滑らかな画面遷移
🛠 技術スタック
フロントエンド
- Next.js 16: React フレームワーク（App Router使用）
- React 19: UIライブラリ
- TypeScript 5.9: 型安全性とコード品質の向上
- Tailwind CSS 4: 最新のユーティリティファーストCSS
- Framer Motion 12: アニメーションライブラリ
- Heroicons 2: アイコンライブラリ
インフラ
- Cloudflare Workers: サーバーレスランタイム（
@opennextjs/cloudflare 経由）
- Cloudflare Assets: 静的アセット配信 + SSGキャッシュ
開発ツール
- Node.js 22.12.0 LTS: 最新のLTSランタイム
- pnpm 10.x: 高速で効率的なパッケージマネージャー
- Biome: コード品質管理（Linter）
- Vitest 4: TypeScript対応テストフレームワーク
- React Testing Library: コンポーネントテスト
📦 インストールと起動
必要な環境
- Node.js 22.12.0 LTS（.node-versionで指定）
- pnpm 10.x 以上
セットアップ手順
- リポジトリをクローン
git clone https://github.com/yourusername/shisha-search.git
cd shisha-search
- 依存関係をインストール
pnpm install
- 開発サーバーを起動
pnpm dev
- ブラウザで http://localhost:3000 を開く
その他のコマンド
# プロダクションビルド
pnpm build
# プロダクションサーバー起動
pnpm start
# Cloudflare Workers ローカルプレビュー
pnpm preview
# Cloudflare Workers 本番デプロイ
pnpm deploy
# テスト実行
pnpm test
# テスト（ウォッチモード）
pnpm test:watch
# TypeScript型チェック
pnpm typecheck
# コード品質チェック
pnpm lint
🏗 プロジェクト構成
shisha-search/
├── app/ # Next.js App Router
│ ├── api/ # APIルート（TypeScript）
│ │ ├── search/ # 検索API (route.ts)
│ │ ├── manufacturers/ # メーカー一覧API (route.ts)
│ │ └── flavor/[id]/ # フレーバー詳細API (route.ts)
│ ├── brands/[slug]/ # ブランド詳細ページ（SSG）
│ ├── flavor/[id]/ # フレーバー詳細ページ（動的SSR）
│ ├── ClientHome.tsx # クライアントサイドホームコンポーネント
│ ├── layout.tsx # ルートレイアウト
│ ├── page.tsx # ホームページ
│ └── globals.css # グローバルスタイル（Tailwind v4対応）
├── components/ # 再利用可能なコンポーネント（TypeScript）
│ ├── SearchBar.tsx # 検索バー
│ ├── BrandList.tsx # メーカーフィルター
│ └── ShishaCard.tsx # フレーバーカード
├── types/ # TypeScript型定義
│ └── shisha.ts # データ型インターフェース
├── data/ # データ層
│ ├── shishaData.js # フレーバーデータベース（2.5MB+）
│ ├── shishaMethods.ts # データ操作ユーティリティ（TypeScript）
│ ├── brandImages.ts # ブランドロゴURL解決（サーバー専用）
│ ├── brandDescriptions.ts # ブランド説明文（手動管理）
│ ├── flavorImages.ts # フレーバー画像URL解決
│ ├── curatedPicks.ts # Editor's Selection フレーバーリスト
│ └── homeSections.ts # トップページセクション構成
├── lib/ # ライブラリとサービス
│ ├── search/ # ファジー検索（Fuse.js）
│ ├── services/ # テスト用モックデータ
│ └── utils/ # ユーティリティ関数
├── scripts/ # ビルド補助スクリプト
│ ├── build-data.ts # searchIndex.json / brands.json 生成
│ └── build/ # prebuild フック用スクリプト
├── .node-version # Node.js バージョン指定
├── open-next.config.ts # Cloudflare Workers 設定
├── wrangler.jsonc # Wrangler（Cloudflare CLI）設定
├── postcss.config.js # PostCSS設定（Tailwind v4対応）
├── tsconfig.json # TypeScript設定
└── public/ # 静的ファイル
└── images/ # 画像アセット（brands/ / flavors/）
🔍 主要機能の詳細
検索機能
- 複数キーワードでのAND検索対応
- メーカー名、商品名、説明文から検索
- リアルタイムフィルタリング
ページネーション
- 1ページあたり12件表示
- サーバーサイドページネーション
- URLパラメータによる状態管理
メーカーフィルター
- 全メーカーの動的取得
- ワンクリックでフィルタリング
- 「すべてのブランド」オプション
🧪 テスト
# 全テストを実行
pnpm test
# カバレッジレポート付きでテスト
pnpm test:ci
# 特定のテストファイルを実行（Vitest はパスの部分一致でフィルタ）
pnpm test -- ShishaCard
🚀 デプロイ
本アプリケーションは Cloudflare Workers にデプロイされています（@opennextjs/cloudflare 使用）。
# ローカルで Workers 動作確認
pnpm preview
# 本番環境へデプロイ
pnpm deploy
🤝 コントリビューション
プルリクエストを歓迎します！
- フォークする
- フィーチャーブランチを作成 (
git checkout -b feature/amazing-feature)
- 変更をコミット (
git commit -m 'Add amazing feature')
- ブランチにプッシュ (
git push origin feature/amazing-feature)
- プルリクエストを作成
コーディング規約
- TypeScript厳格モードに従う
- Biome (
pnpm lint) のルールに従う
- コンポーネントは関数コンポーネントで実装（.tsxファイル）
- Tailwind CSS v4のユーティリティクラスを使用
- 型定義を明確に記述
- テストを書く（Vitest + React Testing Library）
📝 ライセンス
このプロジェクトはMITライセンスの下で公開されています。
🙏 謝辞
- フレーバーデータの提供元
- オープンソースコミュニティ
- すべてのコントリビューター
質問や提案がある場合は、Issueを作成してください。
