✨
【Next.js】タスクマネージャーアプリを作る
タスクマネージャーアプリの作成を複数回に分けて、動画で紹介します。
技術スタック
- Bun
- TypeScript
- hono
- Next.js
- Tailwind CSS
- shadcn/ui
- cloudflare D1
- drizzle
データテーブル
tasks table
| カラム名 | データ型 | 主キー | 備考 |
|---|---|---|---|
| id | integer | ○ | |
| title | text | タスク名 | |
| description | text | タスク内容 | |
| due_date | text | 期日 | |
| completed | boolean | 完了有無 | |
| important | boolean | 重要有無 | |
| user_id | text | ユーザーID |
動画
1. レスポンシブ対応ヘッダーを作る
ヘッダーには、アプリロゴと検索窓とユーザー登録ボタンとログインボタンを表示します。
また、レスポンシブに対応して、認証のボタンは2つのボタンとドロップダウンメニューで切り替えるようにします。
上記の動画でレスポンシブに対応したヘッダーを作成ができるようになります。
2. レスポンシブ対応サイドバーを作る
サイドバーには、ボタンを配置して、ボタンにはアイコンとタイトルを表示します。
また、レスポンシブに対応して、ボタンのタイトルの表示を切り替えるようにします。
最後に、ヘッダーとサイドバーを固定して、スクロールしても動かないようにします。
そうすることで、ナビゲーションや検索に素早くアクセスできるようになり、ユーザー体験の向上につながります。
3. Hono+drizzleを使って、APIのGETメソッドを作る
データベースを準備して、REST APIのGETリクエストを作成します。
データベースはCloudflareが提供しているD1を使って、honoとdrizzleを導入してAPIを作成します。
Honoは軽量で高速なWebフレームワークで、drizzleは、データベース向けに設計されたORMです。
4. shadcn/uiのCard Componentを使って、タスク詳細カードを作る
タスクマネージャーアプリのタスク詳細カードを作成します。
shadcn/uiのカードコンポーネントを導入して、タスク詳細カードを作成します。
Discussion