このアドベントカレンダーのテーマ
この連載は、
技術初心者・非エンジニアの私が、ChatGPT を相棒にしながら
Next.js で Webアプリ（ブックマークアプリ）を 0 から作り切るまでの 24 日間の記録
です。
よくある
- 「プロンプト投げたらツールが全部やってくれる」
- 「AIにコード書かせてコピペして終わり」
みたいな話ではなく、
- 手を動かすのはあくまで自分
- ChatGPT は先生・相棒・レビュー係
- わからないところを、その場で聞きながら進める
というスタイルで進めていきます。
「非エンジニアでも、ChatGPT をうまく使えば Webアプリ開発ってここまでできるのか」という実録にしたいです。
DAY1から読む↓
今日やること
Day3 のテーマは 「環境構築と、初めての Next.js 起動」。
- Node.js を入れる
- VS Code などのエディタを準備する
- ChatGPT と対話しながら
create-next-appを実行 - ブラウザに「Hello Next.js」を表示する
今日からついに、
“机上の理解 → 手を動かす実装フェーズ” に突入します。
DAY2までで頭の中の地図は作れたので、今日はそれを “本物のフォルダとファイル” に落とし込む日です。
Step 1. Node.js をインストールする
Next.js を動かすには Node.js が必要らしいです。
まず ChatGPT に質問：
「Next.js を動かすために必要な Node.js のバージョンと、
Windowsでのおすすめインストール方法を教えて」
ChatGPT の提案(要約)：
**Next.js（最新）は Node.js 18 以上が必須です。**- Next.js公式推奨：Node.js LTS（Long Term Support）版
- つまり、18.x か 20.x の LTS を入れておけばOK
初心者は 深く考えずに「LTS」版 を入れるのが一番安全。
DLはNode.js の公式サイトにアクセス→LTSのボタンをクリックするだけ。
インストール完了後、バージョン確認**
Windows の「PowerShell」で：
node -v
例：
v18.19.0
これが出れば成功！
ついでに npm も確認：
npm -v
上記に従い、今回はこちらの設定でインストールしました。
下記をPowershellで試す。
# Node.jsのバージョンを確認する：
node -v # "v24.11.1"が表示される。
# npmのバージョンを確認する：
npm -v # "11.6.2"が表示される。
npmはエラーが出てしまう…！！
ChatGPTいわく「これ Windows あるあるの“PowerShell の実行ポリシー”エラー」であり、救われる方法は下記のコマンドを実行すること：
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
この後もう一度試したら、無事にバージョンが表示される。
Step 2. VS Code をインストールする
ついでに下記をChatGPTに確認。
「Next.js 開発に必要なVSCodeのおすすめ拡張機能を教えて」
ChatGPT の回答（要約）：
🎯 結論：Day3 時点で入れておけばOKなおすすめセット
初心者ならまずはこれだけで十分！！
✔ ESLint(コードの書き方のミスやバグを早めに気づかせてくれるツール)
✔ Prettier(スペースや改行をきれいにしてくれる)
✔ Auto Rename Tag(TypeScriptの型チェックをより最新にしてくれる)
✔ Prisma（DB使うDay7で入れる）
✔ GitLens(Git の履歴が超見やすくなるらしい)
よくわからないけどもそもそと追加する。
追加でChatGPTに質問↓
Q:Node.jsとVSCodeってどういう関係？
ChatGPT の回答（要約）
結論：Node.js＝アプリを“動かすエンジン”、VS Code＝アプリを“書く場所（エディタ）”
まったく役割が違うけど、
一緒に使うとアプリが作れるという関係。
🧠 Node.js = JavaScriptをパソコン上で動かす“エンジン”
- JavaScriptは本来ブラウザの中でしか動かない
- でも Node.js があると、ブラウザ以外でも JavaScript が動く
✏️ VS Code = “コードを書くためのメモ帳”の超高性能版
VS Code は
- コードを書く
- ファイルを開く
- 色をつける
- 補完を出す
- エラーを教える
- プロジェクトを管理する
などを行う 「開発用のテキストエディタ」。
家づくりに例えるなら
Node.js ＝ 工事のための重機（実際に動かすもの）
VS Code ＝ 製図する机（設計図を書く場所）
設計図だけでは家は建たないし、
重機だけあっても作り方がわからない。
Step 3. プロジェクトを作る（create-next-app）
いよいよ Next.js のプロジェクトを作成します。
ChatGPT に確認：
「Next.js の新規プロジェクトを作る
create-next-appの
最新の推奨コマンドを教えて」
返信されたコマンドはこちら：
npx create-next-app@latest my-app
実行すると、なんかまたエラーが出て疲れました。
ChatGPTに聞くと
つまり：System32 からコマンド実行しないで！！！
Windows の system32 は
- 管理者権限が必要
- アプリを作る場所じゃない
- 開発用フォルダではない
らしい。開発用のフォルダを作ることが必要で。そこに移動すればできた！
Step 4. Next.js を初めて起動する
プロジェクトフォルダに移動して、起動する。
cd my-app
npm run dev
サーバーが立ち上がると、
http://localhost:3000/ が表示できるようになります。
ブラウザを開くと…
ここまで何時間かかったんだろう…(遠い目)
Step 5. 「Hello, Next.js」を出してみる
最後に、実際に文字を変えてみます。
app/page.tsx を開き、
export default function Home() {
return (
<main>
<h1>Hello Next.js</h1>
</main>
);
}
に書き換えて保存。
ブラウザを更新すると…
これで Day3 のゴール達成！！
Step 6.とはいえ、結局ここまでで何が起こったのか意味不明なので教えてもらう
私ってDay3で何を起こした？なんでhttp://localhost:3000/ を開くとあれになる？
ChatGPTの回答：
めっちゃいい質問！！ Day3 で **あなたが起こしたことは、実はめちゃくちゃデカいこと**なんだよ。「なんで localhost:3000 を開いたら “あの画面” が出るの？」
これ、仕組みを知ると一気に腑に落ちるので丁寧に説明するね。
🎯 Day3であなたが起こしたこと（超シンプルに）
👉 1. Next.js プロジェクトを作った（create-next-app）
npx create-next-app my-app を実行した瞬間…
- Next.js の初期コード
- フォルダ構成
- 設定ファイル
- 必要な依存ファイル
-
app/page.tsx（トップページのコード）
…全部自動で作られた。
つまり、
あなただけの Webアプリが誕生した瞬間。
👉 2. Next.js の開発サーバーを起動した（npm run dev）
次にこれを実行したよね：
npm run dev
これによって、Next.js は あなたのPCの中に“ミニ・サーバー”を起動した。
- そのアプリが動く場所は
→ http://localhost:3000 - そこにアクセスすると
→ あなたのアプリが表示される
つまり、
“自分のPCの中で動く本物のWebアプリ” を作り出した。
🌐 localhost って何？
超簡単に言うと…
自分のパソコン自身のこと。
- Google みたいに外のサーバーに繋ぐのではなく
- 自分のパソコンの中で
- スペシャルな Webサーバーが動いて
- そこにブラウザでアクセスしてるだけ
だから “インターネットがなくても” 開ける。
🍱 localhost:3000 の意味は？
localhost = 自分のPC
:3000 = 3000番の“入り口（ポート）”
Next.js の devサーバーは 3000番ポート を使うので、
http://localhost:3000/
が「あなたのアプリの入り口」になる。
🖥 なぜページが表示されたのか？（ここが1番大事）
Next.js の最初のホーム画面は
app/page.tsx に書かれた内容を表示しているから。
つまりこんな流れ👇
あなた
↓ npm run dev
Next.js
↓ アプリ起動
Node.js
↓ ローカルサーバーを作る
ブラウザ
↓ localhost:3000 にアクセス
app/page.tsx
↓ の内容を画面に表示
あのトップページ（Next.js のデフォルト画面）は
“初期テンプレートコード” がブラウザに表示されているだけ。
あなたがコードを書き換えれば、
そのまま画面に反映される。
🔥 つまり Day3 であなたは…
- ✔ Next.js アプリを 作った
- ✔ そのアプリを 起動した
- ✔ そのアプリを ブラウザで確認した
- ✔ 「自分のPCで動くWebアプリ」を完成させた
これ、初心者が初めて超えるべき最初の大きな壁だから、
本当にすごいことやってる。
📦 もっとわかりやすく例えると…
🎮 例え：ゲーム
-
create-next-app= 新しいゲームファイルを作る -
npm run dev= ゲーム機の電源を入れる -
localhost:3000= ゲーム画面をテレビに映す
🍳 例え：料理
-
create-next-app= 材料を一式そろえる -
npm install= 調味料を入れる -
npm run dev= 火をつける -
localhost:3000= 出来上がった料理を皿に盛りつける
✨ 最短まとめ
Day3であなたは「本物のWebアプリをブラウザで動かす」まで成功した。
localhost:3000 は"あなたのPCで動くNext.jsアプリ"の入り口。
Day3 の締め：今日できたこと・明日やること
今日できたこと
- Node.js と VS Code を入れた
- ChatGPT に確認しながら
create-next-appを実行した - 初めての「Hello Next.js」を表示できた
明日やること（Day4）
Day4 では、次のステップへ進みます。
- フォルダ構造（app/）をもっと理解する
-
/bookmarksページを自分で作る - Next.js のページ遷移を体験する
- ChatGPT に「ページ作成の基本」を教えてもらう
いよいよ ブックマークアプリの“最初のページ” を作成していきます。
まだ何もしてないのに疲れました！！！！！！！！！！！！！！！！！！！！！！！！！！！