♻️ 過去の自分が作ったWebサービスを作り直してみた（Next.js / TypeScript / Vercel / Supabase）

はじめに

初めまして、マンスールと申します！
独学でエンジニア学習を積み、3年前にフリーターからエンジニアに転職しました！
Web系企業でサーバサイドエンジニアとして働いています！

リプレイスしたアプリについて

フロントエンド知識のキャッチアップの一環として、数年前に作成したWebサービスのリプレイスを行いました！

アプリ概要

アプリ名：　だてまき

URL：　https://datemaki.work

GitHub : https://github.com/yuyamh/datemaki-next

• 日本語教師向けの、作成した「教案」を共有・検索・保存できるWebアプリケーションです。

教案とは
日本語教師が各授業のコマごとに作成する、授業の計画案を指します。
教える単語や項目、時間配分、使用教材を中心に、どのように学習者に日本語を教えるかをあらかじめ授業前に決めておくものです。

アプリ名は「Database for Teachers Making Japanese Lesson Plans」の頭文字を取って「だてまき」と名付けました。

リプレイス前の情報ですが、記事リンク、および、GitHubリンクにて詳細を確認していただけると幸いです。

なぜリプレイスするのか

これら3つの理由から、リプレイスをやってみようと一発奮起しました。

1. フロント領域の知識強化

未経験エンジニア時代は、バックエンド領域の学習で手一杯だったこともあり、Vue.jsやReactといったフロントエンド技術にはほとんど触れないまま転職活動を終えました。
エンジニアとしての実務経験を積んでいく中でも、フロント部分はAdminLTEやFlowbiteといった、ライブラリを使った実装がメインとなっており、技術としてのフロントエンドに触れる機会があまりありませんでした。
「一度しっかりとフロントエンドを学びたい」という思いが以前からあり、これを機にJavaScriptから勉強してみました。

2. 先輩エンジニアとの出会い

実務で関わった先輩エンジニアから、設計や状態管理の考え方を学ぶ機会がありました。
一緒に仕事をする中で、UI設計や状態管理、保守性を意識した実装など、これまではあまり意識してこなかった考え方に触れる機会が増えました。

また、「フロントエンドは画面を作るだけではなく、設計やコードの組み立て方にも面白さがあるから、使う機会がなくても学習してみるといいよ」という提案をいただき、自分でも本格的に学んでみたいという気持ちが強くなりました。

3. 旧アプリの課題を解決したかった

旧アプリを完成させてユーザーの方に使っていただいた際、いくつか改善したい点が見えてきました。

• 投稿に複数のファイルを添付できない
• 投稿ごとのダウンロード数やブックマーク数を確認できない
• よりスムーズで快適に操作できるUIにしたい（ヌルヌル動く見た目）

これらの機能は、当時の自分の技術力では実装できず、そのままになっていました。

そこで今回のリプレイスでは、フロントエンドの学習も兼ねながら、これらの課題を一つずつ解決していこうと考えました。

アプリの機能一覧

以下は、リプレイスで実装した機能と新たに追加した機能の一覧です。

☑️ メイン機能

• 教案投稿機能（CRUD）
• ファイルアップロード機能（ファイル形式 : pdf, ppt, pptx, xls, zip, xlsx, jpeg, jpg, png）
• ファイルダウンロード機能
• 教案検索機能（キーワード、学習者レベル、使用テキスト、並べ替え）
• ブックマーク機能（登録 / 解除 / 一覧）
• コメント機能（CRUD）
• ユーザー検索機能（キーワード）
• ページネーション機能
• プロフィール機能
• レスポンシブ対応（PC / スマートフォン / タブレット）

☑️ 今回新たに追加した機能

1. 投稿に3つまでのファイル添付が可能に

これまで投稿には1ファイルまでしか添付できませんでしたが、教案の表現の幅を広げるため、1投稿につき最大3ファイルまで添付できるようになりました。

これにより、教案ファイルに加えて、授業で使用する絵カードやイラスト、レアリア（生教材）なども一緒に添付でき、授業内容を具体的に共有できるようになりました。

〜 新規投稿画面 〜

〜 投稿詳細画面 〜

2. コメント機能

気になった教案にコメントを投稿できる機能を追加しました。
リプレイス前のシステムでも導入を何度も検討していましたが、時間がなくなんとなく先延ばしにしていました。今回のリプレイスで本腰入れて実装しました。気になった教案に気軽にコメントを残して、投稿者とのやり取りや新しい投稿のきっかけになればと思っています。

なお、自分が投稿したコメントは、後から編集・削除することができます。

3. メールでのお問い合わせ機能

これまではXアカウントのリンクを貼って、「DMしてください」という形でしたが、今回からはメールで直接お問い合わせできるようにしました。
無料枠の範囲ではありますが、Resendを利用してお問い合わせメールを送信できるように実装しています。

4. UI・UX

前回から全体のデザインを見直し、色味を大きく変更しました。
以前は黄色やオレンジを中心としたビビッドなデザインでしたが、今回は白と淡いオレンジを基調にした、シンプルで見やすいUIにしています。

また、shadcn/uiをベースに、タブやカードレイアウトを取り入れながら、シンプルで使いやすい画面構成を意識して作ってみました。

そして、以前はJavaScriptをほとんど使わず、同期処理中心の実装だったため、UXも最低限のものでした。今回は状態管理や非同期処理をガッツリ使ったことで、画面の動きやデータの更新がかなりスムーズになり、ヌルヌル動くアプリになったと思います。

〜 前回 〜

〜 今回 〜

使用技術

フロントエンド

• TypeScript
• Next.js 16.0.10
• React 19.0.0
• Tailwind CSS 4
• Radix UI / shadcn/ui 系コンポーネント
• Lucide React
• React Hook Form
• React Markdown / remark-gfm

バックエンド

• Node.js 22.x
• Next.js Route Handlers
• NextAuth 5.0.0-beta.30 / Auth.js
• Prisma 6.5.0
• PostgreSQL
• Supabase Storage
• bcryptjs
• Zod
• Resend

開発・ビルドツール

• pnpm
• TypeScript 5
• ESLint 9
• Prettier 3
• Prisma CLI
• Turbopack

インフラ / 外部サービス

• Vercel
• Supabase
• PostgreSQL
• Resend

テスト

• Vitest: 4.1.10
• React Testing Library: 16.3.2

その他

• Git / GitHub
• Visual Studio Code
• Codex5.5
• Notion
• FigJam

💬 なぜこの技術選定なのか

メインの技術に対して、なぜその技術を選んだのかを簡単に述べます。

• Next.js
  JavaScriptにかなりの苦手意識があり、いつか本腰入れて学習しないと、と思っていたタイミングで、案件で触れる機会が訪れたため、動画教材やZennで記事を買って学習を始めました。
  学習を進める中で、「Next.jsならフルスタックアプリを作れる」ということを知り、JavaScriptのフレームワークにも挑戦してみようと思ったのが最初のきっかけです。
  また、技術記事が豊富で情報を集めやすかったため、今のうちにしっかり学んでおこうと思い、今回の開発でも採用しました。

• Vercel
  Next.jsでよく使われるサービスだったのと、Next.jsとの相性が良いため、デプロイの手間が少ないことから採用しました（教材で知りました）。
  また、プレビュー環境も簡単に作成できるため、変更内容をブランチごとにすぐに確認しながら開発を進められる点も魅力でした。

• Supabase
  これも教材で学んだのですが、データベースだけではなくストレージにも利用できることを知り、便利だなと思い、そのまま学習して採用させていただきました。今回のアプリに必要な要件を一通り満たせるため、今回の開発には最適な選択だと考えました。

設計書

Figma

ER図

FigJamで作成しました。

テーブル定義書

Postテーブル

Textbookテーブル

Bookmarkテーブル

Userテーブル

Commentテーブル

PasswordResetTokenテーブル

URL設計書

インフラ構成図

テスト設計書

重要なロジックとユーザーフローをカバーすることを優先して、Vitest + React Testing Libraryにてインテグレーションテストを書きました。

振り返り

苦労したこと

1. ほとんど新しく学習する技術だったのでキャッチアップにかなり時間がかかった

今まで、「フロントはBootStrapとjQuery、インフラはAWS、バックエンドはLaravelでやるぜ👍」といった状態でした。
そのため、Next.jsの基礎であるRSCやRoute Handlers、Server Actionsの概念から、Prismaのマイグレーション方法まで、現在メインで使用している技術との違いを理解するのに時間がかかりました。さらに、リプレイスを通じて、実際に手を動かして開発ができるようになるまでもかなり苦労しました。

概念を理解するのが重要だと思ったため、泥臭くハンズオンや技術記事を繰り返し読み返して、実際に実装を試しながら理解を少しずつ深めていきました。

2. コンポーネントの設計

デザインをある程度固めた後は、コンポーネント設計に最も苦労しました。どの要素を親コンポーネントにし、どこで子コンポーネントへ切り出すかの判断が難しく、実装を進めながら何度も設計を見直し、作り直すことを繰り返しました。
この試行錯誤を通して、Next.jsにおけるコンポーネントの再利用性や責務の分離を意識した設計の重要性を学びました。

工夫したこと

1. なるべくコードを追っていって、わからない箇所をつぶすようにして進めた。

後半から、Codexを利用してリプレイスを進めていったのですが、実装した箇所は全て目を通して、ロジックを頭で理解していくことを怠りませんでした。
元々、JavaScriptに慣れていくことが目的だったため、そこは手を抜かずに、自分で理解したうえで実装を進めることを意識しました。
わからない箇所はMDNを読んで理解したり、ChatGPTやCodexなどに解説してもらいながらひとつひとつ疑問を解消していきました。
単にアプリケーションを完成させるだけでなく、使用した技術やコードの仕組みについても自分なりに理解を深めることができました。

2. 目標をしっかりと設定して、スケジュールを意識した

特段、完成期限はありませんでしたが、ダラダラと計画を立てずに進めると学習が長期化してモチベーションの低下にもつながると考えたため、目標を細かく設定することを意識しました。

具体的には、「今月はPrismaを学ぶ」「来月は認証機能とストレージ周りを実装する」といったように、追加する機能と、その実装を通して習得したい技術を月単位であらかじめ決めて開発を進めました。

このように目標を明確にしたことで、毎月モチベーションを維持しながら、計画的に新しい技術を学びつつ開発を進めることができました。

今回学習に使った教材（一部抜粋）

React / TypeScript

Next.js

Figma

おわりに

今回の開発を通して、Next.jsを使った開発の流れにはある程度慣れることができました。しかし、まだまだ理解できていないことや、「もっとこう進められたな」と思う部分もたくさんあります。

それでも、一から学習を始めてアプリのリプレイスができたことは、自分にとって大きな自信になりました。

これからも学習を続け、Next.jsはもちろん、その他フロントエンド技術への理解をさらに深めていきたいと思っています。

そして、いつかはフロントエンド担当として案件に参画し、Next.jsだけでなくさまざまなJavaScriptフレームワークを使ったアプリをゴリゴリと開発できるエンジニアになることが今の目標です。