個人のガチャ履歴を記録・管理するWebアプリ「PullLog」のフロントエンドリポジトリです。
本アプリはNuxt.js 3 + PrimeVue 4 + Pinia 3 + TailwindCSS 4 + TypeScript + Luxon + Chart.jsを中心技術として構築されています。
 |
 |
 |
|---|---|---|
| アプリ管理 | 履歴登録・管理 | 統計・分析 |
- 主な特徴
- 技術スタック
- セットアップ方法
- ディレクトリ構成
- 主要な設計・開発指針
- ストア責務分離方針
- コーディング規約
- 開発・運用Tips
- デプロイ・ホスティング
- ライセンス
- コントリビューション
- 関連リンク
- 個人のガチャ履歴（タイトル・日付・回数・最高レア・課金額・タグ等）を直感的UIで登録・管理
- PrimeVueベースの快適なUI/UX
- Luxonを用いたタイムゾーン対応
- Chart.jsによる可視化グラフ（回数推移・課金推移など）
- ピンポイントキャッシュや最適化済みPiniaストア
- Zodを使った型安全なフォームバリデーション
- SCSSによる柔軟なカスタムスタイリング
- テーマ切り替え（ダーク／ライト）機能
- UIの言語切り替え（日本語／英語／中国語）機能（※ v1時点）
- ソーシャルログイン対応（※ v1時点では Google OAuth のみ）
- 認証付き・API連携（詳細はサーバーリポジトリ参照）
- フレームワーク: Nuxt.js v3.17.5
- UIフレームワーク: PrimeVue v4.3.5
- 状態管理: Pinia v3.0.3
- スタイル: TailwindCSS v4.1.10, SCSS
- 言語: TypeScript
- 日付管理: Luxon v3.6.1
- グラフ描画: Chart.js v4.5.0
- マークダウン制御: Marked v15.0.12
- ソート制御: SortableJS v1.15.6
- バリデーション: Zod v3.25.67
- パッケージ管理: pnpm
- API通信: fetch（useFetchは非推奨／APIプロキシ・
.env/runtimeConfig経由で設定） - その他: Ulid, ESLint, PostCSS, TypeDoc, Biomeなど
- Node.js (v20以上推奨)
- pnpm
- APIエンドポイントや各種秘匿情報は
.envファイルで管理できます。 - 必要に応じて下記のようなファイルをルート直下に作成してください。
# .env.example
APP_NAME=PullLog
APP_VERSION=0.9.0
COPYRIGHT=© 2025 MAGIC METHODS
DEFAULT_LOCALE=en
API_BASE_URL=http://localhost:3000/api
API_PROXY=/api
SECRET_API_KEY=foo-bar-1234
GA_ID=G-xxxxxxxxxx
GOOGLE_ADSENSE_ACCOUNT=ca-pub-xxxxxxxxxxxxxxxx
GOOGLE_CLIENT_ID=xxxxxxxxxx-xxxxxxxxxx.apps.googleusercontent.com
DEMO_EMAIL=
DEMO_PASSWORD=
IS_DEBUG=true
MOCK_MODE=false.envファイルはGit管理対象外（.gitignore）です。- 複数環境（ローカル・本番など）で値を切り替えて運用します。
pnpm installpnpm run devhttp://localhost:3000でアプリが起動します- APIバックエンド（pullog-api等）も別途起動しておいてください
- APIエンドポイント（例：
/api/など）へのリクエストは、フロントエンドからバックエンドサーバへプロキシ経由（nuxt.config.tsで設定）で自動ルーティングされます。
ローカル開発時はAPI_BASE_URLの設定やCORS制御の心配なく利用できます。本番ビルド時は実サーバ用のAPI URLをapp.config.tsで指定してください。 - VHOST設定等で localhost 以外のホストを利用すると Google OAuth が失敗するため、ソーシャル連携ログインをする場合のホスト名は localhost 固定化が必須です。
pnpm run build
pnpm run preview※主要部分抜粋
/
├── components/ # Vueコンポーネント群
│ ├── chart/ # 個別グラフコンポーネント群
│ ├── common/ # 共通コンポーネント群
│ └── ***.vue # 各種コンポーネント
├── composables/ # カスタムフック・共通ロジック
│ ├── useAdManager.ts
│ ├── useAPI.ts # API制御コンポーザブル
│ ├── useAuth.ts # 認証制御コンポーザブル
│ ├── useChart.ts # グラフ制御コンポーザブル
│ ├── useConfig.ts
│ ├── useConsent.ts
│ ├── useGoogleAuth.ts
│ ├── useMarkdownContent.ts
│ ├── usePkce.ts
│ ├── useStats.ts
│ └── useWebIcon.ts # Webアイコン制御コンポーザブル
├── config/ # アプリ設定（リポジトリ管理下からは除外）
├── directives/ # Vueディレクティブ拡張
├── i18n/ # ロケール定義
│ └── locales/ # 言語ファイル群
├── layouts/ # レイアウトファイル
│ ├── auth.vue # 認証画面系レイアウト
│ ├── default.vue # アプリ画面レイアウト
│ ├── error.vue # エラー画面レイアウト
│ └── landing.vue # ランディングページレイアウト
├── middleware/ # ミドルウェア（認証ガード等）
├── pages/ # ルーティング単位ページテンプレート
│ ├── auth/ # 非認証系ルーティングページ
│ ├── error/ # エラー系ルーティングページ
│ ├── index.vue # ランディングページ
│ └── ***.vue # 認証済みルーティングページ
├── plugins/ # 各種プラグイン
├── public/ # 静的ファイル
│ ├── docs/ # 各種文書Markdown群（利用規約など）
│ └── images/ # 公開用画像群
├── stores/ # Piniaストア定義
│ ├── globalStore.ts # グローバルストア
│ ├── useUserStore.ts # ユーザー管理
│ ├── useAppStore.ts # アプリケ―ション管理
│ ├── useLogStore.ts # 履歴データ管理
│ ├── useStatsStore.ts # 統計データ管理
│ ├── useOptionStore.ts # プリセット・オプション管理
│ ├── useCsrfStore.ts # CSRFトークン管理
│ └── useLoaderStore.ts # ローディング状態管理
├── theme/ # PrimeVueテーマ定義
│ ├── preset.ts # グローバルプリセット定義
│ └── ptPreset.ts # 各コンポーネントPassThrough定義
├── types/ # 型定義
├── utils/ # 共通ユーティリティ
├── assets/styles/ # ビルトインスタイル群
│ ├── index.scss # オーバーライドスタイルインポータ―
│ ├── _***.scss # 各種オーバーライドスタイル定義
│ ├── tailwind_v4.scss # TailwindCSS拡張スタイルインポータ―
│ └── _twe-***.scss # 各種TailwindCSS拡張スタイル定義
├── api/ # API定義
│ ├── endpoints.ts # RESTエンドポイント定義（APIプロキシまで）
│ └── index.ts # サービスレイヤー用ラッパーメソッド（未使用）
├── server/ # サーバーサイド処理（Nitro用）
│ ├── api/ # APIプロキシ（RESTエンドポイント準拠）
│ │ ├─ apps/
│ │ ├─ auth/
│ │ ├─ logs/
│ │ ├─ stats/
│ │ ├─ user/
│ │ └─ [...path].ts # APIプロキシ・フォールバック
│ └── utils/ # APIプロキシ用ユーティリティ
├── .env # 環境設定
├── app.vue # アプリケーションコンテナ
├── app.config.ts # Nuxtアプリ設定
├── tailwind.config.ts # TailwindCSS設定
├── nuxt.config.ts # Nuxt設定
├── package.json # パッケージ管理
└── README.md # このファイル
- ストアの責務分離
各ストアは以下の責務を担います（詳細は各ファイルコメント参照）useUserStore: ユーザー認証・情報管理useAppStore: アプリケーション情報useLogStore: ガチャ履歴ログ取得・キャッシュuseStatsStore: 統計値管理・計算useOptionStore: ユーザー設定・選択肢useCsrfStore: CSRFトークン管理useLoaderStore: グローバルローディング状態管理globalStore: 他で使わないグローバルな値の一時保持
- 型安全
すべて TypeScript で実装、anyや非nullアサーション（!）は（原則）禁止。型定義はtypes/へ集約し、declare global {...}でオートインポートに対応させる。 - 日付管理
Luxon を利用し、全て ISO8601 文字列または Date 型で厳密管理。 - グラフ
Chart.js を直接ラップした共通コンポーネントを用意し、テーマ切り替え時もリアルタイム反映。 - フォームバリデーション
PrimeVue の Form は使用せず、 Zod によるバリデーションのみ使用。 - SCSSスタイル
assets/styles配下にSCSSで記述。TailwindCSSで基本設計し、細かい上書きはSCSSで。
原則コンポーネント側にスタイルタグ（scoped）は埋め込まず、必要に応じて PrimeVue の PassThrough やcomputedで対応する。 - ロケール
i18n によるロケール管理を行い、View側のコードは原則として
t()メソッドでの翻訳テキスト引き当て方式で記述する。
- 状態管理の粒度：
1つのストアに複数の責務を持たせず、担当範囲を限定 - キャッシュ制御：
不要なキャッシュは必ず破棄。エラー時や未取得データはキャッシュしない（特に空配列キャッシュに注意） - 再利用性・テスタビリティ：
ロジックは Pinia ストアか composables に集約し、Vueコンポーネントは出来る限りUIに専念させる
- インデントはスペース4つ
- セミコロンは原則不要
- 非nullアサーション（
!）は禁止 - 型安全最優先。
anyは原則禁止 - SCSSまたはTailwindでスタイル
- composable/コンポーネントにはTypeDoc準拠のJSDocコメント推奨
- API通信にはfetch（useFetchは不使用）
- APIエンドポイント定義は
utils/endpoints.tsで一元管理 - テーマ/ロケール等の設定値は
useOptionStoreおよびローカルストレージに保存 - テーマ切り替え時の遅延はグローバルCSSに
transition: none !importantを一時的に付与することで解消 - マークダウンファイルをfetchで取得する場合は
public/配下に配置 - エラー画面カスタマイズは
layouts/error.vueで対応（Nuxtのデフォルトと競合する場合は注意） - コミット前に必ず
pnpm run lintを実行 - APIプロキシ設定
- Nuxtの
nuxt.config.tsにて/api/などのパスは自動でバックエンドAPI（API_BASE_URL）へプロキシ転送されるように設定済み - 開発時はCORS問題を気にせずAPI通信が可能
- バックエンドのURLを切り替える場合は
runtimeConfigのapiBaseURLを編集 fetchなどでのリクエスト先は絶対パス・相対パスどちらでも可（詳細はcomposables/useAPI.ts等参照）
- Nuxtの
- runtimeConfig / .env管理
- Nuxt 3の
runtimeConfig（nuxt.config.tsのruntimeConfigセクション）で環境ごとの設定値（APIエンドポイント等）を一元管理 - 例えば
process.env.API_BASE_URLはuseRuntimeConfig().public.apiBaseURLから取得可能 - 開発/本番でのAPIルートの切り替えは
.envまたはnuxt.config.tsの該当箇所を編集 - .envの変更を反映するには、開発サーバ再起動が必要
- Nuxt 3の
mainブランチへのpush時に本番ビルドが行われ、ホスト先である Cloudflare に自動でデプロイされます。
-
以下、コマンドラインからの手動デプロイの方法を記載予定
-
さらに Cloudflare でのホスティングの設定等を追記予定
なお、NitroのNodeサーバでAPIプロキシを動かす必要があるため、 Cloudflare Workers でのホスティング必須です。
MAGIC METHODS に帰属します。
関係各位のPull Request・Issue歓迎です。
設計や方針の議論はDiscussionsまたはIssueで行ってください。
（補足）
運用や設計方針の見直しは適宜Issue/PRで反映していきます。最新情報はGitHubリポジトリおよび本READMEを参照してください。