hi guys
フロントをnuxtで
バックをnextでっていう指令を受けたので勉強のためにアプリケーション作ったよ
完成品はこんな感じだよ
この記事の目的
- 作成したアプリの概要を共有
- 使用した技術スタックや機能要件を解説
- 開発中に苦労した点や改善すべき部分を振り返る
作成したアプリケーションの概要
アプリの目的
テナント・商品・注文・売上を管理できる 簡易管理システム を開発しました。このシステムは、複数のテナントを所有するオーナーが各テナントの情報や売上状況を一元管理できるツールとして利用されることを想定しているよ
主な機能
-
アカウント管理
- ユーザーの作成・編集・削除
-
テナント管理
- テナントの作成・編集・削除
- オーナーごとのテナント表示
-
商品管理
- 商品の登録・編集・削除
- テナントごとの商品表示
-
注文管理
- 注文の作成・削除
- 注文履歴表示
-
売上管理
- 全期間の総売上表示
- テナントごとの売上表示
- 期間を指定した絞り込み機能
技術要件
フロントエンド
-
Nuxt.js
- モダンなフロントエンドフレームワーク
-
Tailwind CSS
- スタイリングの効率化を図るために採用
-
TypeScript
- 型安全なコーディングでバグを減らす
バックエンド
-
Next.js
- APIエンドポイントの実装に利用
-
Prisma
- データベースとのやりとりを簡素化
-
TypeScript
- フロントエンド同様、型安全を確保
データベース
- MySQL
機能要件
アプリは以下の要件を満たすように設計しました。
基本設計
- ユーザーごとに複数のテナントを管理可能
- テナントには複数の商品を紐づけ可能
- 商品に紐づく注文を管理
画面要件
-
アカウント管理画面
- ユーザー情報のCRUD操作
-
テナント管理画面
- オーナーごとにテナントを表示し、CRUD操作可能
-
商品管理画面
- テナントごとに商品を表示し、CRUD操作可能
-
注文管理画面
- 注文履歴を表示し、CRUD操作可能
-
売上管理画面
- 全期間・期間別・テナント別の売上表示
改善すべき部分
いっぱい改善案があるけど、最低限必要な部分
1. バリデーション
現状、フロントエンド・バックエンドの両方で入力バリデーションが不十分な箇所があります。特に以下を改善したいです：
- フロントエンドでのリアルタイムバリデーション
- サーバーサイドでの詳細なエラーメッセージ
2. UI/UX
- デザイン性に乏しい
- 操作性を高めるために、以下を追加予定：
- 検索機能
- ページネーション
3. ログイン機能
- 現在は認証機能が未実装であり、誰でもシステムにアクセスできる状態です。
- ClerkやJWTを使った認証機能の実装を検討しています。clerkが簡単だからそっち予定
4. テスト
- 手動テストのみで動作確認を行っており、自動テストは未実装です。
- JestやCypressを用いたテストを導入予定です。
苦労したポイント
-
バックエンドとフロントエンドのデータ連携
- Prismaで関連データ（例：テナント情報を持つ商品）を取得する際の設定に時間がかかりました。
-
型定義
- TypeScriptの型エラーに悩まされることが多く、型の設計には工夫が必要でした。
-
CORSエラー
- フロントエンドとバックエンド間の通信で何度もCORSエラーが発生し、その都度調整が必要でした。
学びと感想
- Nuxt.jsとNext.jsは割と直感的で使いやすかったです。ルーティングの機能便利！
- 今後は改善点を一つ一つ修正し、さらなるスキルアップを目指していきたいです。