今日のゴール：
自分だけの3択クイズアプリ を作る

• 問題と3つの選択肢が表示される
• 選択肢をクリック → 正解 / 不正解がわかる
• 「次の問題へ」で進む
• 全問終了 → スコア表示！

Webページは 3つの技術 でできている

今日さわるのは JavaScript。ページに「動き」をつけていきます！

準備

1. ブラウザで StackBlitz のテンプレートを開く
   https://stackblitz.com/edit/web-quiz-2026?file=index.html
2. 左に HTML / CSS / JS のファイル、右にプレビュー
3. さわるのは script.js が中心。index.html も3回だけ書き足します
4. debug.js styles.css は用意ずみ。開かなくて大丈夫です

テンプレートは「1問目が表示された状態」から始まります。

今日の進め方

1. JavaScript入門
2. 1問だけのクイズを作る
3. 問題の数を増やす
4. スコアと結果を表示する
5. 自分だけのクイズにする

デバッグ情報パネルの見かた

プレビュー右上の「デバッグ情報」をクリックすると開きます。自力で原因が分からないときの手がかり用です。

• 章ごとのテスト — 章の項目が ✓ になっていれば順調
• 診断 — エラーや書きまちがいの心当たりを表示
• コピー — 詰まったら押して、チャットに貼って質問
• エラー画面に変わるとパネルは消えます。同じ内容が Console にも出ています

JavaScript は、ページを「見る人とやりとりできる」ものにする

• ボタンを押したら反応する
• 文字や色を書き換える
• 計算する・判定する

JavaScript の基本を6つ、順番に見ていきます。

① 変数 — データに名前をつけて覚えておく

得点を、結果発表までずっと覚えておきたい

変数 = データに名前をつけて覚えておく仕組み

let score = 0;        // score という名前で 0 を覚えておく
score = score + 1;    // 中身を書き換える
console.log(score);   // 名前で取り出す → 1

① 変数 — const と let

あとで書き換えるかどうかで使い分ける

• 得点 → 答えるたびに増える → let
• 問題数 → ずっと変わらない → const

let score = 0;      // 得点（あとで増える）
const total = 3;    // 問題数（変わらない）

score = score + 1;  // OK
total = total + 1;  // まちがい！ 得点と書きまちがえて問題数を増やしてしまった

• const なら → その場でエラーが出て、書きまちがいにすぐ気づける
• もし let にしていたら → エラーにならず動き続け、「全4問」と表示されてしまう

① 変数 — データには種類（型）がある

文字列は '...' で囲む（"..." でも同じ意味）。囲まないと「変数の名前」として扱われる。

型はほかにもある（true / false の真偽値など）。今日使うのはこの2つだけ。

const a = 'score';   // 文字列の 'score'
const b = score;     // 変数 score の中身

console.log() で中身を見る

画面に出ない値を確かめたい

console.log(値) = その値をコンソールに出す命令

見かた — プレビューの下の 「Console」（閉じていたらクリックで開く）

let score = 0;
score = score + 1;
console.log(score);   // → Console に 1 と出る

分からなくなったら、まず中身を見る。今日も何度か使います。

② 文字列の結合 — + でつなげる

「2問正解！」のような表示を作りたい

const hello = 'こんにちは' + '！';   // → 'こんにちは！'

const score = 2;
const result = score + '問正解！';   // → '2問正解！'（数値は文字列に変わる）

注意 — 数値のつもりが文字列だと、計算されずにつながる

console.log('18' + 1);   // → '181'（文字列としてつながる）
console.log(18 + 1);     // → 19（数値として計算）

③ 関数 — 処理に名前をつけてまとめる

同じ処理を、何度も使いたい

• 毎回書くと長い。直すときは全部直すことになる
• 処理に名前をつけてまとめ、呼び出すだけにする = 関数

function sayHello() {
  console.log('こんにちは！');
}

sayHello();   // → 'こんにちは！'（名前で呼び出すと実行される）

③ 関数 — 引数

一部だけ変えて、同じ処理を使いたい

呼び出すときに ( ) で値を渡す = 引数。渡した値で結果が変わる。

function sayHello(name) {
  console.log('こんにちは、' + name + 'さん！');
}

sayHello('太郎');   // → こんにちは、太郎さん！
sayHello('花子');   // → こんにちは、花子さん！

④ 条件分岐 — 「もし〜なら」で処理を分ける

正解なら○、まちがいなら× — 状況で動きを変えたい

if (条件) {
  // 条件が成り立つときの処理
} else {
  // 成り立たないときの処理
}

④ 条件分岐 — 条件は「比較」で書く

比較演算子 = 2つの値を比べる記号。比べた結果が if の条件になる。

if (selected === 0) {   // selected は 0 と等しい？
  console.log('0番が選ばれた！');
}

=（代入）と ===（比較）は別物！

⑤ 繰り返し — 同じ処理を何回も

回数分コピーして書きたくない

for = 「◯回くり返して」と1回で書く

for (let i = 0; i < 回数; i++) {
  // くり返す処理（i は 0, 1, 2, ... と増える）
}

⑤ 繰り返し — 例

「第1問」〜「第3問」を順番に表示したい

for (let i = 0; i < 3; i++) {
  const number = i + 1;
  console.log('第' + number + '問');   // → 第1問, 第2問, 第3問
}

⑥ 配列 — データを順番に並べたリスト

選択肢3つを、変数3個で持ちたくない

const choices = ['富士山', '北岳', '奥穂高岳'];

console.log(choices[0]);   // → '富士山'
console.log(choices[2]);   // → '奥穂高岳'

[番号] で取り出す。番号は 0 から数える。

⑥ オブジェクト — 名前つきのデータのまとまり

1問分 =「問題文・答え」のセットで持ちたい

const quiz = { question: '日本で一番高い山は？', answer: 0 };

console.log(quiz.question);   // → '日本で一番高い山は？'
console.log(quiz.answer);     // → 0

.名前 で取り出す。

1-1. テンプレートを見てみよう

いまは1問目が表示されているだけ。ボタンを押しても何も起きません。

この章では、ボタンを押したら正解 / 不正解が表示される ようにします。

1-1. 画面は5つの部品でできている

1-3. 動作チェック

成功 — 押すボタンで、出てくる番号（0・1・2）が変わる

正解 / 不正解の表示はまだ。ここまでで「押されたボタンの番号を JS が受け取れる」形ができました。表示は次の 1-4 で作ります。

1-4. 動作チェック

成功 — ボタンを押すと、ページに正解 / 不正解が表示される

1. getElementById('result') で ④ 結果の表示欄を取得
2. .textContent で文字を書き換え
3. if と === で正解を判定

id で要素を取得して書き換える = DOM操作

いまは問題が1問だけなので「0番が正解」と決めうちしています。Chapter 2 でデータを見て判定するように直します。

2-1. データの形

• quizData → データを入れ替えない → const
• currentQuestion（今何問目か）・score（得点）→ 進むたびに変わる → let

2-1. 動作チェック

画面は変わりません。console.log() で中身を見ます

書く場所 — script.js のいちばん下（確認できたら消してOK）

console.log(quizData.length);        // → 3
console.log(quizData[0].question);   // → 日本で一番高い山は？

成功 — プレビュー下の Console に、上のコメント通りの2行が出る

• 何も出ない → 保存し忘れ、または script.js 以外に書いている
• 赤いエラーが出る → カンマや { } [ ] の閉じ忘れ（エラーの行番号を見る）

2-2. 問題を表示する関数をつくろう

showQuestion() — 「今の問題」を画面に反映する

やることは3つ。ぜんぶ 1-4 で使った DOM操作です。

1. quizData[currentQuestion] で今の問題を取り出す
2. 問題番号・問題文・選択肢の文字を書き換える（choice-0 の id と choices[0] の番号をそろえる）
3. 前の問題の結果表示を消し、次へボタンを隠す

.style.display = 'none' = その要素を画面から消す（'inline-block' で戻る）

関数は呼ばれてはじめて動くので、最後に showQuestion(); と書いて呼び出すところまでやります。

2-2. 動作チェック

画面が quizData から作られるようになりました

成功 — 次の2つがそろっている

1. 1問目の問題文・選択肢が表示される（見た目は同じでも、出どころが HTML から quizData に変わった）
2. 「次の問題へ」ボタンが消えている（showQuestion が隠したため）

自分で確かめる — quizData の1問目の question を好きな文に書き換えて保存。画面の文字も変われば、データから作られている証拠

変わらないとき — プレビュー下の Console の赤いエラーを見る。Unexpected token は ( ) { } ' の閉じ忘れ

2-3. 動作チェック

成功 — 次の2つがそろっている

1. 正解の選択肢を押すと「正解！」、ほかを押すと正解の名前入りで「不正解...」が出る
2. 答えると「次の問題へ」ボタンが現れる（押してもまだ動きません。次の章で作ります）

自分で確かめる — score は画面に出ないので console.log() で見る

document.getElementById('next-btn').style.display = 'inline-block';
console.log(score);   // ← checkAnswer の最後に一時的に追加

正解を押したときだけ増えれば OK。連打すると増え続けますが、いまは正常です（応用課題で止められます）。

困ったときは

エラーが出たら、プレビュー下の Console で赤いメッセージを確認しましょう。

今日学んだこと