このアドベントカレンダーのテーマ
この連載は、
技術初心者・非エンジニアの私が、ChatGPT を相棒にしながら
Next.js で Webアプリ（ブックマークアプリ）を 0 から作り切るまでの 24 日間の記録
です。
よくある
- 「プロンプト投げたらツールが全部やってくれる」
- 「AIにコード書かせてコピペして終わり」
みたいな話ではなく、
- 手を動かすのはあくまで自分
- ChatGPT は先生・相棒・レビュー係
- わからないところを、その場で聞きながら進める
というスタイルで進めていきます。
「非エンジニアでも、ChatGPT をうまく使えば Webアプリ開発ってここまでできるのか」という実録にしたいです。
DAY1から読む↓
今日やること
ChatGPTに弱音を吐きました。
先に進むのもいいんだけど、あまりにもjavascriptがわからなくてつらい。
Day6はJavascriptの日にしてほしい。
→ 了解した！！
Day6＝「初心者のための 必要なところだけ わかる JavaScript講座」 に決定。
ここを飛ばすと今後：
- map
- 配列
- オブジェクト
- APIにデータを送る
- Prisma で DB とやりとり
全部でつまずくらしいので、今日はNext.jsを動かす最低限のJavaScriptだけ理解する日。
ありがとうチャッピー！！！
今日学ぶこと（4つだけ）
- 変数（const / let）
- state を理解するための「値が変わる」感覚
- 配列（[]）の基本
- map の正体（Reactで使いまくる）
今日のゴールはこれだけ：
map と配列がなんとなく理解できること。
Day7 の “ブックマーク一覧表示” に直結するから。
① 変数って何？（Next.js視点）
変数は「名前のついた箱」。
const x = 3;
これは：
- x という箱を作る
- 中に 3 を入れる
だけ。
let y = "こんにちは";
y = "こんばんは"; // 中身が変わる
React はこの “中身が変わる” をきっかけに画面を作り直す。
🔥 let / const の理解チェック問題
問題と答え（たたんであります）
答えを見る
Q1
const message = "こんにちは";
message = "こんばんは";
→ ❌ 再代入できないのでエラー
Q2
let count = 1;
count = 2;
→ ✅ OK（let は再代入できる）
Q3
const numbers = [1,2,3];
numbers.push(4);
→ ✅ OK（中身の変更はOK）
Q4
const numbers = [1,2,3];
numbers = [1,2,3,4];
→ ❌ 再代入なのでエラー
Q5
let user = {name:"Aya"};
user.name = "Mio";
→ ✅ 中身の変更はOK
Q6
const user = {name:"Aya"};
user = {name:"Mio"};
→ ❌ 再代入なのでエラー
「中身の変更」と「再代入」の違いが意味不明だ…
こんなところでつまずきたくなかった。コードの中身理解せずに進むことにしていれば、こんな羽目には…
Q:「中身の変更」と「再代入」の違いを初心者向けに教えて
ChatGPTの回答(要約)
🎯 一言でいうと…中身の変更：箱の中身だけ入れ替えること
再代入：箱そのものを別の箱に取り替えること
この違いがわかれば、JavaScriptの const と let の挙動が理解できる。
🧃 図でイメージしてみる
🍪 中身の変更（const でOK）
あなたの机に「お菓子の箱（const）」が置いてあるとする。
箱（const） = [クッキー, キャンディ]
中身を変えるのはOK：
- クッキーを追加する
- チョコに入れ替える
- 箱の中身をこう変える → OK
[クッキー, キャンディ] → [クッキー, チョコ, キャンディ]
👉 “箱はそのままで、中身だけ変えている” ので const でも大丈夫。
📦 再代入（const ではNG）
今度は箱そのものを別の箱に取り替える。
箱（const） = 新しい箱
👉 これは 箱そのものを交換している ので const では禁止。 const は > 「この箱を使い続けてね。中身はいじってもいいよ」 > というルール。
- 中身を変える → const でOK
- 箱ごと変える → const ではNG、let が必要
わかってきた気がする。
② useState と変数の関係
通常の変数：
let text = "";
text = "abc";
React の state は：
const [text, setText] = useState("");
setText("abc"); // UIが更新される！
state が変わると React が画面を作り直す。
→ Day5 の「入力すると画面が変わるやつ」はこれらしい。
③ 配列とは？
配列は 「箱が並んだ棚」。
const items = ["A", "B", "C"];
図にすると：
0: A
1: B
2: C
ブックマークアプリではURLをこの棚に並べる。
④ map の正体（React初心者の壁）
map の意味：
配列の中身を1つずつ取り出し、別の形にして新しい配列を作る。
例：
["A","B","C"].map((item) => item + "!!");
// → ["A!!","B!!","C!!"]
React では：
items.map((item) => <li>{item}</li>);
<li>A</li>
<li>B</li>
<li>C</li>
つまり map は：
配列 → UI（画面のパーツ）に変換する機械。
map の初心者向け練習問題
解答つきで見る
Q1. 結果は？
const nums = [1, 2, 3];
const result = nums.map((n) => n + 1);
✅ 答え
[2, 3, 4]
Q2. この map は何をしている？
["A", "B", "C"].map((x) => x + "!");
✅ 答え
各文字の後ろに "!" をつけている。
Q3. 結果は？
const words = ["apple", "banana"];
const result = words.map((w) => w.length);
✅ 答え
[5, 6]
"apple" の文字数 → 5
"banana" の文字数 → 6
Q4. 結果は？
const items = ["a", "b", "c"];
const result = items.map((item, index) => index);
✅ 答え
[0, 1, 2]
Q5. 数字を 2 倍にする map
const nums = [3, 5, 10];
✅ 答え
nums.map((n) => n * 2);
// → [6, 10, 20]
Q6. return を書き忘れたら？
[1, 2, 3].map((n) => {
n * 2;
});
✅ 答え
[undefined, undefined, undefined]
理由：
{ } を使うと return が必要になるため。
Q7. 要素にする map は？
const animals = ["dog", "cat", "panda"];
✅ 答え
animals.map((animal) => <li>{animal}</li>);
Q8. React に key が必要な理由は？
✅ 答え
React が どの要素がどれかを見失わないようにするため。
Q9. “配列からパーツを大量生産する”とは？
✅ 答え
配列のデータを、UI（画面の部品）に変換すること。
例：
["A", "B", "C"] → <li>A</li><li>B</li><li>C</li>
Q10. なぜ表示されない？どう直す？
<ul>
{["A", "B", "C"].map((x) => {
<li>{x}</li>;
})}
</ul>
❌ 理由
return がない。
✅ 正しいコード
<ul>
{["A", "B", "C"].map((x) => {
return <li>{x}</li>;
})}
</ul>
または短い形：
<ul>
{["A", "B", "C"].map((x) => <li>{x}</li>)}
</ul>
🔥 Day6 の締め：明日やること
Day7ではついに…
- URLを配列で持つ
- mapで一覧を表示する
- ブックマークっぽい画面が誕生する
ここから“アプリになる瞬間”が始まるらしいです。楽しみ～