このアドベントカレンダーのテーマ
この連載は、
技術初心者・非エンジニアの私が、ChatGPT を相棒にしながら
Next.js で Webアプリ（ブックマークアプリ）を 0 から作り切るまでの 24 日間の記録
です。
よくある
- 「プロンプト投げたらツールが全部やってくれる」
- 「AIにコード書かせてコピペして終わり」
みたいな話ではなく、
- 手を動かすのはあくまで自分
- ChatGPT は先生・相棒・レビュー係
- わからないところを、その場で聞きながら進める
というスタイルで進めていきます。
「非エンジニアでも、ChatGPT をうまく使えば Webアプリ開発ってここまでできるのか」という実録にしたいです。
(これを書いている時点でまだNext.jsに触れていない、という現実！すごくない？)
最終目標：自分専用のブックマークアプリを Next.js で作る
24日後に完成させたいゴールは、シンプルな Webアプリです。
作るもの：ブックマーク管理アプリ
（仮の名を、Bookmark Hubとする。最終日には、正式名称を決めていたいが…）
やりたいことざっくり：
- Webページの URL を登録できる
- 自動でページタイトル（OGP）を取得してくれる
- タグを付けられる（例：技術/心得/お笑い など）
- 一言メモを書ける
- タグやキーワードで検索できる
- 後から編集・削除できる
- 最終的には、ログインして「自分のブックマーク」だけ見られる
技術スタック一覧
| 役割 | 技術 | 理由 |
|---|---|---|
| フロントエンド | Next.js（App Router） | フロントとバックを同一プロジェクトで扱えて初心者でも構造が理解しやすい |
| バックエンド | Next.js API Routes | APIサーバーを別に立てなくてよく、Next.js内で完結できるため学習コストが低い |
| データベース | SQLite（Prisma 経由） | ローカルでも動かしやすく、セットアップが簡単。Prisma を使えば型安全で扱いやすい |
| デプロイ | Vercel | Next.jsとの相性が最強。ボタン1つでデプロイでき、非エンジニアでも扱いやすい |
知らない言葉だらけなんだけど大丈夫そう？
今日やること：「企画」と「ChatGPTの使い方ルール」を決める
Day1 では、コードはまだ書きません。
(ていうか、書けるようになってないし…)
やることは 3つ：
- なぜ「Next.js × ブックマークアプリ」にしたか整理する
- ブックマークアプリのざっくり要件を決める
- ChatGPT をどう使うか（使い方のルール）を決める
なぜ「Next.js × ブックマークアプリ」なのか
1. Next.js を選んだ理由
- フロントと API を 1 プロジェクトで完結 できる
- Vercel にデプロイするときの相性が良くて、公開までの道が短い
- 情報量が多く、日本語記事も豊富
- React ベースなので、今後の学びにもつながる
「React むずそう…」と思っていましたが、ChatGPT がそばにいれば、
- 「このコンポーネント何してるの？」
- 「この hook の意味教えて」
- 「ここで怒られてるエラー、どう読むの？」
みたいな質問を、その場で聞ける先生 がいるのと同じです。
だそうです。
(全部ChatGPT頼み！)
2. ブックマークアプリを選んだ理由
- 使う自分の姿を想像しやすい（＝モチベが続く）
- 「フォーム」「一覧」「編集」「削除」など Webアプリの基本要素 をだいたい網羅できる
- URL & タグ & メモ という構造が、DB設計の練習にちょうどいい
らしいです。
(よくわからんけどー！！)
実際は、いろいろ候補があった中からブックマークアプリを選びました。Xとインスタのアカウントを大量に持っていて、アプリごと・アカウントごとでブクマを管理するのが面倒なので、一括で見られたら便利だなと思ったからです。
ブックマークアプリのざっくり要件を書く
Day1 のアウトプットとして、「こんなアプリにしたい」というメモを残しておきます。
必須機能（MVP）
- URL・タイトル・メモ・タグを保存できる
- ブックマークの一覧表示
- タグで絞り込み
- ブックマークの削除
- タイトルの自動取得（OGP の
<title>を取りにいく）
余裕があればやりたい機能
- キーワード検索
- ログイン（自分のデータだけ見られるようにしたい）
画面イメージ（ざっくり）
- 「ブックマーク一覧」ページ
- 上部に「新規登録フォーム」
- 下にカード形式で一覧
- 「詳細ページ」
- クリックした URL の詳細表示
- 編集・削除ボタン
ChatGPT の使い方ルールを決める
この連載のキモは、「ChatGPT に丸投げせず、あくまで開発者は自分」 というスタイルにすることです。
なので、ChatGPT の使い方に次のような「マイルール」を決めました。
ChatGPT に任せること
- 概念の説明（例：API って何？）
- サンプルコードの提示
- エラーメッセージの意味の説明
- 「こう書いたけど合ってる？」という レビュー
ChatGPT に丸投げしないこと
- 「アプリ全部作って」みたいな、完成物の一括生成
- コードを理解せず、コピペだけして進むこと
- 「なぜそう書くのか」を自分で考えずに進めること
この連載で扱う範囲と、扱わない範囲
扱うこと
- 非エンジニアが Next.jsでアプリを作るまでのプロセス
- API・DB・フロントを ChatGPT に教わりながら理解する流れ
- 「つまずいたところ」「実際に投げた質問と回答」をそのまま載せること
あくまで、
「技術初心者が、自力で一つの Webアプリを形にするまで」
にフォーカスします。
っょっょエンジニアの方にはどうしようもなくつまらないと思います。すみません。
Day1 の締め：今日決めたこと・明日やること
今日決めたこと
- 24日間で ブックマークアプリ を Next.js（App Router）で作る
- ChatGPT は「先生・相談役」として使い、丸投げはしない
- ブックマークアプリのざっくりした要件と画面イメージ
明日（Day2）やること
- Next.js のざっくりした仕組みを ChatGPT に教わる
- 「フロント」「API」「DB」がどうつながるのか図解する
- 開発に使うツール（Node.js / エディタ / パッケージマネージャ）を決める
Day2 では、実際に create-next-app を叩く前に、
「Next.js って何者なのか？」
「このブックマークアプリは、どんなルート/コンポーネント/ディレクトリ構造になりそうか？」
を ChatGPT に聞きながら 頭の中の地図を作る回 にする予定です。