はじめに
初めての個人開発に挑戦してみました！
業務ではAWSを触っているものの、保守やエンハンスがメインで、「一から何か作る」経験がほとんどありませんでした。
たまには「インフラからフロントエンドまで全部自分で作ってみたい」という、なんというかエンジニアあるあるの欲求が湧いてきたんです。
何を作ろうか迷いましたが、まずはタスク管理アプリから。CRUDがあって認証もあって、個人開発の練習台には丁度良さそうだなと思いました。
せっかくなのでAWSサーバーレス縛りでやってみることに。運用コストを抑えたいのもありますが、正直「サーバーレスってどんな感じなんだろう」という興味もありました。
ただし一つ問題が。フロントエンドの経験がほぼゼロなんです。そこで頼ったのがClaude Codeでした。
開発環境
- ハードウェア: MacBook Pro 2017
- エディタ: VS Code
- Claude: Pro版（月$20）
- Node.js: v22.19.0
- AWS CLI: 2.30.3
- AWS CDK: 2.1029.2
- 開発期間: 2日間（金曜夜〜土曜夜）
完成したアプリ
まずは結果から。2日間で以下のようなタスク管理アプリが完成しました：
実装した機能
- ユーザー認証：メールアドレスでのサインアップ・ログイン
- タスクCRUD：タスクの作成・編集・削除・完了状態の切り替え
- 期日管理：タスクに期日を設定し、期日順でソート表示
- レスポンシブ対応：PC・スマートフォン両対応
ログイン画面
Cognitoが自動生成してくれる認証画面（ログイン・サインアップ・パスワードリセットが全部入り）
タスク一覧画面（PC）
完成したタスク管理画面
タスク一覧画面（スマホ）
レスポンシブ対応のモバイル表示
Demo動画（PC）
アーキテクチャ図
システム構成図
AWS サーバーレス構成でのタスク管理アプリ
技術選定の理由
フロントエンド：React + S3 + CloudFront
- React：TypeScriptの経験があったので、相性の良いReactを選択
- S3 + CloudFront：AWS認定資格の勉強でよく見かける静的Webサイトホスティングの定番構成を実際に試してみたかった。試験勉強で覚えた知識を実際に動かしてみたいという想いもありました
バックエンド：API Gateway + Lambda
- API Gateway + Lambda：業務でよく使う構成で得意分野だったから
認証：Cognito
- ユーザー機能は必須だが、独自実装は工数が大きそう
- Claude Codeに相談したところCognitoを提案され、実装の簡単さに納得
- 認証画面のHTMLすら書かなくていい！ログイン・サインアップ・パスワードリセット画面が自動で用意される
インフラ管理：CDK
- 実務で慣れている：業務でCDKを使っているため
- TypeScriptで統一：フロントエンドと同じ言語でインフラも記述できる
- 関心事の分離：frontend / backend / infrastructure の3つに分割して整理
開発方針
個人開発といえども、しっかりとした設計をしたかったので、要件定義からアーキテクチャ設計まで全てClaude Codeと一緒に進めました。
目標
- フルスタック体験：インフラ〜フロントエンドまで一気通貫で学習
- コスト効率：AWS無料枠を最大限活用（目標：月$5以下）
開発の軌跡：2日間の実体験
Day1：気づいたら徹夜になってた
金曜の夜、なんとなく「ちょっとやってみるか」くらいの軽い気持ちでスタート。Claude Codeと一緒にコツコツやっていたら、あれ？外が明るくなってる...という典型的な個人開発あるあるを体験しました。
一晩で実装できたもの
- CDKでのインフラ構築（DynamoDB、Lambda、API Gateway、Cognito）
- バックエンドAPI（CRUD操作、認証）
- フロントエンドReactアプリ（基本的なタスク管理UI）
- 認証フロー（ログイン・サインアップ）
朝6時頃には一応動くタスク管理アプリが完成。「えっ、本当にできちゃった」という感じでした。
開発時間の大半はフロントエンドとの格闘でした。React未経験だったので、コンポーネントの書き方やstate管理でエラーの嵐。でもClaude Codeがエラーメッセージを見て即座に修正方法を教えてくれるので、なんとか乗り切れました。
Day2：家族からの辛辣なレビュー
土曜の昼、得意気に「見て見て！アプリ作ったよ！」と家族に見せたところ...
家族からの容赦ない指摘
- 「スマホでの表示が崩れてる、これじゃ使えない」
- 「タスクの期日がないと意味なくない？」
- 「期日順に並ばないの？普通そうでしょ？」
うーん、確かにその通り。ユーザビリティ的に全然ダメでした。仕方ないので2日目は改善作業に。Claude Codeにお願いして、レスポンシブ対応と期日機能をサクッと追加してもらいました。やっぱりユーザーの声って大事ですね。
2日間の開発体験を振り返ってみると、技術的にも学びの多いプロジェクトでした。ここからは今回の実装で特に印象的だった技術的なポイントを振り返ってみます。
技術的なポイント
DynamoDBテーブル設計
ユーザーごとのデータ分離を重視したSingle Table Design：
{
"PK": "user#user123",
"SK": "task#task456",
"title": "プロジェクト資料作成",
"completed": false,
"dueDate": "2024-01-15",
"createdAt": "2024-01-10T09:00:00Z"
}
API設計とセキュリティ
- RESTful API：シンプルな CRUD 操作
| HTTPメソッド | エンドポイント | 機能 |
|---|---|---|
| GET | /tasks |
タスク一覧取得 |
| POST | /tasks |
タスク作成 |
| PUT | /tasks/{id} |
タスク更新 |
| DELETE | /tasks/{id} |
タスク削除 |
- Cognito JWT認証：全エンドポイントで認証必須
- ユーザーデータ分離：パーティションキーで物理的に分離
Claude Codeに助けられたポイント
React未経験の自分でも2日で完成できた理由は、Claude Codeが技術的な壁を全て取り除いてくれたからです。
- 要件からインフラコードへ：「認証機能が欲しい」「コストを抑えたい」といった要望から、最適なAWSサービス構成とCDKコードを自動生成
- フロントエンド完全実装：React未経験でもコンポーネント、認証フロー、TypeScript型定義まで全て対応
- エラー即座解決：エラーメッセージを貼り付けるだけで修正方法を提案
セキュリティ周りで驚いたこと
個人的に一番「すごい」と思ったのがJWT認証です。正直、今でもCognitoの認証の仕組みを完全に理解できているわけではありません。でも個人開発とはいえAPIのセキュリティは手を抜きたくなかった。
Claude Codeが設定してくれたセキュリティ対策：
- API Gateway + Cognito：未認証のリクエストは自動でブロック
- CloudFront OAI設定：S3への直接アクセスを禁止
- CORS設定：許可されたオリジンからのみアクセス可能
「認証ってこんなに簡単にできるの？」というのが率直な感想でした。
エラー対応での体験
開発中は当然エラーが頻発しました。特にReact未経験だったので、様々なトラブルに遭遇。でもClaude Codeのエラー対応が素晴らしかったです。
実際に遭遇したエラー例
Reactのローカル開発エラー
Module not found: Error: Can't resolve '@aws-amplify/auth' in '/src/components'
TypeError: Cannot read properties of undefined (reading 'map')
import文の書き方やコンポーネントの状態管理でエラーが頻発。でもエラーメッセージをそのまま貼り付けるだけで、Claude Codeが即座に修正方法を教えてくれました。
モバイル表示の崩れ
家族からの「スマホで表示が崩れている」という指摘も、Tailwind CSSのレスポンシブクラスを使った修正コードを即座に提案してくれました。
まとめ
React未経験でも2日でタスク管理アプリ完成。Claude Codeが技術的な壁を全て取り除いてくれました。
実装したもの: タスクCRUD + 認証 + レスポンシブ対応
技術スタック: React + AWS サーバーレス (Lambda, DynamoDB, Cognito)
学び: 要求を正確に伝えれば、実装詳細を知らなくても動くアプリが作れる
AI協働により、個人でもエンタープライズレベルの実装が可能な時代。AWSサーバーレス個人開発、ぜひ挑戦してみてください！