4時間でNext.js x Tailwind使ってWebアプリ作ってデプロイしてみた（コード公開）
夏休みの帰省中に台風通過に当たってしまい、家から出られなくなってしまって時間が空いたので、サクッとアプリを作ってみました。
作ったアプリはこちらになります。
夏休みといえばラジオ体操ということで、あのハンコを押す記録カードのように気軽にスタンプ押して記録できるアプリを作って欲しいというリクエストがありまして、このアプリになりました。
今回のコードはこちらで公開しています。
前提条件
- 環境構築、デプロイ含めて１日以内で終わらせること。
- お出掛け等、イベント発生したら、アプリ制作を言い訳にせずに参加すること。
構成
- Next.js （AppRouter）
- TypeScript
- Tailwind
- Storybook
- デプロイ：Vercel
実装前に、Figmaでワイヤーフレームを作成しています。
振り返り
React、Next.jsをそれなりに仕事で使ってきた経験を踏まえて、「今アプリを0→1で作ったら、一日でどのくらいのものが作れるのだろうか」という日頃からの疑問があり、それを解消する良い機会となりました。
朝9時くらいから作り始めて、19時過ぎにデプロイしましたが、家で昼ごはん食べたり、台風明けのお出かけでカフェに行ったり、夕飯を食べに行ったりしたので、環境構築から実装してデプロイまでの時間は大体４時間くらいだと思います（Figmaの作成時間を含めると５時間くらいかと）。
１日でデプロイまでやり切るという制約もあるので、どこまで実装するかという区切りをつけることも大事かと考え、今回はフロントエンドのみでやれる機能に着目して進めました。正直バックエンドまで構築して実装するとなると、１日だとさらに中途半端になったかなと思います。
ラジオ体操のスタンプカードといえばカレンダー表記ということで、今回は2023年8月のみのカレンダーを作りました。カレンダーをどう実装するかは初めての経験でしたが、今回の実装を通じてより本格的な実装イメージが明確になったのは良い経験でした。
バックエンドがなくリロードしたら当然記録が消えてしまうので、アプリとしては正直不十分ですが、一日でどのくらい実装できるかが測れてとても良い経験でした。
今後の機能追加の見通し
作ってみて分かりましたが、機能次第では面白いアプリになりそうな感触があったので、時間を見つけて機能追加していきたいと考えています。その過程で、Next.jsのAppRouterやRSC等の新機能も試していきたいと考えています。
今のところ想定している機能は以下のとおりです。「こんな機能どう？」というアイデアも歓迎です。コメントお待ちしています。
- ログイン認証
- 本格的なカレンダー機能
- スタンプ日にやったことを記録できる
- カレンダー切替（目的別カレンダー作成）
- カスタムデザイン（スタンプ、各種配色）
- ネイティブアプリ化（React Native or Flutter）
バックエンドをどうするかは悩んでいます。久しぶりにFirebaseを使うか、NextAuthやSupabase等を試してみるか、もしおすすめ等ありましたらコメント頂きたいです。
Discussion