第8部：実践プロジェクト Step 24 / 24

ブログアプリ仕上げ編

基本機能が完成したら、品質向上とデプロイで仕上げましょう！

仕上げチェックリスト

機能テスト

  • ユーザー登録ができる
  • ログイン・ログアウトができる
  • 記事の作成ができる
  • 自分の記事の編集・削除ができる
  • 他人の記事は編集・削除できない
  • 未ログイン時は記事作成できない

UI/UX

  • ローディング表示がある
  • エラー時にメッセージが表示される
  • レスポンシブ対応している

セキュリティ

  • パスワードはハッシュ化されている
  • SECRET_KEYは環境変数化されている
  • .envはGit除外されている

Claude Codeでコードレビュー

Claude Codeはプロジェクト全体のファイルを読み取れるため、コードを手動で貼り付ける必要はありません。プロジェクトのルートディレクトリで以下の指示を出しましょう。

Claude Codeへの指示

プロジェクト全体のコードレビューをしてください。
セキュリティ、パフォーマンス、エラーハンドリング、
コードの可読性を確認して、改善点を教えてください。

Claude Codeが行うこと

  • ● プロジェクト内のすべてのファイル（バックエンド・フロントエンド）を自動で読み取り
  • ● セキュリティ上の問題（SQLインジェクション、XSSなど）を特定
  • ● パフォーマンスのボトルネックや非効率なコードを指摘
  • ● エラーハンドリングの不足箇所を発見
  • ● 具体的な修正案をコード付きで提示

Claude Codeで機能テストを実行

Claude Codeにテストシナリオを渡して、アプリケーション全体の動作確認を行いましょう。

Claude Codeへの指示

以下のテストシナリオを実行して、
すべてパスすることを確認してください。

1. ユーザー登録（テスト用ユーザー作成）
2. ログイン（作成したユーザーでログイン）
3. 記事作成（タイトルと本文を入力して投稿）
4. 記事表示（作成した記事が一覧・詳細で表示される）
5. 記事編集（タイトルと本文を変更して更新）
6. 記事削除（作成した記事を削除）
7. ログアウト（セッションが破棄される）
8. 未ログイン確認（ログアウト後、記事作成ができない）

期待される結果

  • ✓ すべてのAPIエンドポイントが正常にレスポンスを返す
  • ✓ 認証が必要なエンドポイントは未認証時に401を返す
  • ✓ CRUD操作がデータベースに正しく反映される
  • ✓ 他ユーザーの記事は編集・削除できない（403エラー）
  • ✓ フロントエンドの画面遷移が正しく動作する

Claude Codeでデプロイ準備

推奨構成

Frontend

Vercel

Backend

Railway

Database

Railway MySQL

Claude Codeへの指示

本番デプロイ用の設定ファイルを作成してください。
Vercel（フロントエンド）、Railway（バックエンド + MySQL）
を使用します。

Claude Codeへの指示（デプロイ実行）

デプロイの手順を実行してください。
GitHubリポジトリの作成からVercel・Railwayへの
デプロイまで、ステップごとに進めてください。

デプロイ手順

  1. 1.
    GitHubにリポジトリを作成してプッシュ

    フロントエンドとバックエンドを同一リポジトリまたは別リポジトリで管理

  2. 2.
    RailwayでMySQLデータベースを作成

    接続情報（ホスト、ポート、ユーザー名、パスワード）を控える

  3. 3.
    RailwayでバックエンドAPIをデプロイ

    環境変数にDB接続情報とSECRET_KEYを設定

  4. 4.
    VercelでフロントエンドをNext.jsとしてデプロイ

    環境変数にバックエンドAPIのURLを設定

  5. 5.
    本番環境での動作確認

    ユーザー登録、ログイン、記事CRUD操作を一通りテスト

発展課題（チャレンジ）

基本機能が完成したら、以下の機能追加にチャレンジしてみましょう！

画像アップロード

記事にサムネイル画像を追加

コメント機能

記事にコメントを投稿できるように

いいね機能

記事にいいねできるように

タグ機能

記事にタグを付けて分類

検索機能

タイトル・本文で記事を検索

プロフィール編集

ユーザー情報を編集できるように

おめでとうございます！

中級編を完了しました！

習得したスキル：

  • ✓ アプリケーション設計
  • ✓ Docker環境構築
  • ✓ MySQL + FastAPI連携
  • ✓ JWT認証の実装
  • ✓ Next.jsでの認証管理
  • ✓ テストとコードレビュー
  • ✓ デプロイ

次のステップ

  • →

    オリジナルアプリを作る

    学んだことを活かして、自分のアイデアを形に

  • →

    発展課題にチャレンジ

    画像アップロード、コメント機能などを追加

  • →

    ポートフォリオとして公開

    GitHubにコードを公開、本番環境で運用

実装編 トップに戻る