自分のアプリを実装しよう

このページで学ぶこと

設計が終わった後、どこから実装を始めればいいかわかる
機能を小さく分けて進める方法がわかる
詰まったときの対処法がわかる

実装の進め方

「設計が終わった。さあ実装しよう！」……でも、何から始めればいいか迷いますよね。
ここでは「読書記録アプリ」を例に、実装を進める順番を説明します。

このページの読み方

まずはこのページ全体を流し読みして、全体の流れをざっくりと掴みましょう。

その後、各セクションを順番に読みながら、実際に手を動かしてみてください。

基本的な順番

「バックエンドを全部作ってからフロントエンドを作る」よりも、
1機能ずつ縦に貫通させる（APIも画面も一緒に作る）方が動く部分が増えてモチベーションが続きます。

ステップ1: プロジェクトをセットアップする

まずは、自作アプリ用に新しいプロジェクトを作りましょう。

新しいプロジェクトを作る場合は、以下のページを参考に進めてください。
my-app の部分は自分のプロジェクト名に置き換えてください。
(例: 読書記録アプリなら book-log など)

ステップ2: DBを作る

設計したスキーマを prisma/schema.prisma に書いたら、
DBにテーブルを作成する（マイグレーション）を参考に進めます。

Supabase の「Table Editor」でテーブルが作成されていれば成功です。

ステップ3: 最初の機能を1つ完成させる

最初から全機能を作ろうとせず、「一覧表示」など、一番簡単な機能を1つ完成させることを目標にしましょう。

例えば読書記録アプリの場合は、まず「登録した本の一覧を表示する」機能が一番簡単なので、これを最初の目標にします。

例: 読書記録の一覧を表示する

まずAPIを作る

// app/api/books/route.js
import { prisma } from '@/lib/prisma'
 
export async function GET() {
  const books = await prisma.book.findMany({
    orderBy: { createdAt: 'desc' },
  })
  return Response.json(books)
}

ブラウザでAPIを確認する

http://localhost:3000/api/books

[] （空の配列）が返ってくれば成功。次に画面を作ります。

画面を作る

// app/books/page.js
'use client'
import { useEffect, useState } from 'react'
 
export default function BooksPage() {
  const [books, setBooks] = useState([])
 
  useEffect(() => {
    fetch('/api/books')
      .then((res) => res.json())
      .then((data) => setBooks(data))
  }, [])
 
  return (
    <main>
      <h1>読書記録</h1>
      {books.length === 0 && <p>まだ本が登録されていません。</p>}
      {books.map((book) => (
        <div key={book.id}>
          <h2>{book.title}</h2>
          <p>{book.author}</p>
        </div>
      ))}
    </main>
  )
}

http://localhost:3000/books を開いて「まだ本が登録されていません。」と表示されれば成功。

ステップ4: 機能を拡充していく

1つ機能が完成したら、その後は「登録機能を追加する」「削除機能を追加する」など、機能を1つずつ増やしていきましょう。

参考資料:

ステップ5: セキュリティ対策

最後に、サービスを安全に公開できるようにセキュリティ対策を実施します。

Supabase Authで認証・認可を実装する
HTTPSとCORSを理解する
SQLインジェクションを理解して対策する (Prismaを使っていれば基本的に対策不要)
XSSを理解して対策する

また、SupabaseのRLSが全てのテーブルに対して有効になっていることも確認しましょう。
これが無効になっていると、誰でも (認証していないユーザーも) APIを叩いてデータを読み書きできてしまいます。参考: PrismaでSupabaseテーブルを作成した後に確認すべきRLS設定

詰まったときの対処法

まず確認すること

コンソールを見る — ブラウザの F12 → Console タブにエラーが出ていないか
ターミナルを見る — 開発サーバーを起動するで動かしたターミナルにエラーが出ていないか
APIを単体で確認する — http://localhost:3000/api/xxx に直接アクセスしてエラーがないか

よくあるエラーについてはよくあるエラーと対処法も確認してください。

AIに聞くテンプレート

「エラーメッセージは見つけたけど、英語だし長すぎて意味がわからない……」というときは、AIが有用です。
以下のテンプレートに従って質問を作成し、AIに聞いてみましょう。

エラーメッセージをコピペする時、APIキーなどの機密情報は必ず xxxxxx のように置き換えてください。機密情報がAIの学習に使われてしまう可能性があります。

【状況】
読書記録アプリで○○を実装しようとしています。

【やったこと】
・app/api/books/route.js に POST を実装した
・app/books/new/page.js にフォームを作った

【エラー】
（エラーメッセージをそのまま貼る）

【コード】
（関係しそうなコードを貼る）

【聞きたいこと】
原因と修正方法を教えてください。

30分ルール

30分悩んでも解決しなかったら、すぐメンターに相談してください。
「詰まっている」と報告すること自体がエンジニアの大事なスキルです。

実装の進め方まとめ

フェーズ	やること
①	プロジェクト・DB作成
②	一覧表示（API → 画面）を動かす
③	登録機能を追加する
④	削除・編集を追加する
⑤	認証を組み込む
⑥	デザインを整える（MUI）
⑦	デプロイする

「全部できてから動かす」ではなく、小さく動かしながら積み上げるのがコツです。

確認しよう

API（GET）を作ってブラウザで確認した
画面を作ってブラウザで確認した
API（POST）を作ってブラウザで確認した
セキュリティ対策を実施した

AIに聞いてみよう

「Next.js 16 の App Router で、フォームのバリデーション（必須チェック、文字数制限）を実装する方法を教えてください」

次のステップ

→ Vercelで公開しよう