4-1. 演習問題

問題1：選択問題

1-1. 変数の主な役割として最も適切なのはどれか。

A. 値に名前を付けて扱いやすくする
B. 画面の色を自動で変える
C. Git の履歴を保存する

1-2. true と false を表す型として最も適切なのはどれか。

A. 数値型
B. 文字列型
C. 真偽値型

1-3. この章の JavaScript 例で "10" + 5 の結果として最も適切なのはどれか。

A. 15
B. 105
C. 50

1-4. if 文の主な役割として最も適切なのはどれか。

A. 条件によって処理を分ける
B. 同じ処理を 100 回自動保存する
C. 変数の名前を短くする

1-5. 繰り返し処理が特に向いている場面として最も適切なのはどれか。

A. 一覧の全要素に同じ処理を行う
B. 1 回だけメッセージを表示する
C. ブランチ名を決める

1-6. 次の関数を実行したときの戻り値として最も適切なのはどれか。

function double(n) {
  return n * 2;
}

double(3)

A. 3
B. 5
C. 6

問題2：穴埋め問題

次の文章の空欄を埋めてください。

値に名前を付けて扱う仕組みを （　　　） という。
値の種類を表す考え方を （　　　） という。
true と false を表す値を （　　　） 値という。
条件によって処理を分ける代表的な構文を （　　　） 文という。
同じような処理を何回も行う構文を （　　　） という。
関数へ渡す入力を （　　　） という。

解答欄

問題3：記述問題

3-1. 変数と値の違いを説明してください。

解答欄

3-2. なぜ型を意識しないとバグにつながりやすいのか説明してください。

解答欄

3-3. 条件分岐と繰り返しの役割の違いを説明してください。

解答欄

3-4. 関数で処理をまとめることが、保守や再利用にどう役立つか説明してください。

解答欄

問題4：ハンズオン

ブラウザ上のプレイグラウンドで、小さな JavaScript プログラムを実際に動かしてみましょう。

① プレイグラウンドを開く

下のコードはそのまま実行できます。必要に応じて書き換えながら試してください。

実行プレイグラウンド

編集内容は自動保存されます / Ctrl+Enter でも実行できます

const userName = "Sato";
const age = 20;
let total = 0;

for (let i = 1; i <= 5; i += 1) {
  total += i;
}

function greet(name) {
  return `Hello, ${name}`;
}

if (age >= 18) {
  console.log("adult");
} else {
  console.log("minor");
}

console.log(typeof userName);
console.log(typeof age);
console.log(total);
console.log(greet(userName));

出力

「実行」を押すと、ここに結果が表示されます。

② コードを確認する

userName、age、total という変数があることを確認する
for 文、if 文、greet() 関数が含まれていることを確認する

③ 実行する

「実行」を押し、出力欄を確認する。

次のような表示が出れば成功：

adult
string
number
15
Hello, Sato

最初の表示が adult になることを確認する
typeof userName と typeof age の結果を確認する
total が 1 + 2 + 3 + 4 + 5 になっていることを確認する
greet(userName) の戻り値を確認する

④ 値を変えてみる

※以下はそれぞれ別々に試し、1つ確認したら元のコードへ戻してから次を試す。

age を 15 に変えて、最初の表示がどう変わるか確認する
i <= 5 を i <= 10 に変えて、total がどう変わるか確認する

age を 15 に変えた場合、次のように最初の表示が minor へ変われば成功：

minor
string
number
15
Hello, Sato

i <= 10 に変えた場合、次のように合計が 55 へ変われば成功：

adult
string
number
55
Hello, Sato

解答

問題1の解答（クリックで開く）

1-1. 正解：A. 値に名前を付けて扱いやすくする

解説

A が正しい。変数は、値に意味のある名前を付けて扱いやすくするための仕組みである。

B は誤り。画面の色変更は UI や CSS の話であり、変数そのものの役割ではない。

C は誤り。Git の履歴管理はバージョン管理の役割であり、変数とは別の話である。

変数の本質は、「値を保存する」だけでなく、「何の値かを分かりやすくする」ことにある。

1-2. 正解：C. 真偽値型

解説

C が正しい。true と false は yes / no を表す真偽値である。

A の数値型は計算に使う値である。

B の文字列型は文章や文字を表す。

条件分岐では「成り立つ / 成り立たない」を扱うため、真偽値の考え方がとても重要になる。

1-3. 正解：B. 105

解説

B が正しい。この章の JavaScript 例では、左側が文字列だと + は文字連結として働きやすい。

A は、両方が数値として扱われた場合の結果である。

C は、今回の演算規則とは無関係である。

見た目が似ていても、"10" は文字列、10 は数値である。型の違いが結果の違いを生む。

1-4. 正解：A. 条件によって処理を分ける

解説

A が正しい。if 文は条件が成り立つかどうかで処理を分ける構文である。

B は誤り。繰り返しや保存とは別の話である。

C は誤り。変数名の長さとは関係がない。

if は「場合分け」を表す基本部品であり、合否判定や権限判定など多くの場面で使われる。

1-5. 正解：A. 一覧の全要素に同じ処理を行う

解説

A が正しい。繰り返しは、配列や一覧の全件を順に処理する場面で特に有効である。

B は誤り。1 回だけの処理なら繰り返しは不要である。

C は誤り。ブランチ名は Git の話であり、ループとは無関係である。

「同じ形の処理が続くなら、繰り返しにできないか」と考えるのがプログラミングの基本である。

1-6. 正解：C. 6

解説

C が正しい。double(3) は 3 * 2 を計算し、6 を返す。

A は入力値そのままであり、関数の計算結果ではない。

B は計算式と一致しない。

関数を読むときは、「何を受け取り、何を返すか」を順番に追うと理解しやすい。

問題2の解答（クリックで開く）

変数

値に名前を付けて扱う仕組みである。意味の分かる名前を使うと、コードの意図が読みやすくなる。

値の種類を表す考え方である。計算、表示、条件判定などで扱い方が変わる。

真偽

true / false のように、成り立つかどうかを表す値である。条件分岐でよく使う。

条件によって処理を分ける代表的な構文である。条件が true のときだけ特定の処理を実行できる。

繰り返し

同じような処理を何度も行う考え方である。JavaScript では for 文が代表例である。

引数

関数へ渡す入力である。関数は引数を受け取り、処理して結果を返す。

問題3の解答例（クリックで開く）

3-1. 変数と値の違い

変数は値に付ける名前であり、値そのものではない。たとえば price = 1200 なら、price は名前、1200 は実際の値である。この区別ができると、コードを読むときに「この名前は何を表しているのか」を考えやすくなる。

3-2. 型を意識しないとバグになる理由

値の型が違うと、同じ記号でも結果が変わることがある。たとえば JavaScript では 10 + 5 は数値の加算だが、"10" + 5 は文字の連結になりやすい。そのため、値が「数」なのか「文字」なのかを意識しないと、意図しない結果を招きやすい。

3-3. 条件分岐と繰り返しの違い

条件分岐は、条件によって実行する処理を変える仕組みである。一方、繰り返しは、同じような処理を何回も実行する仕組みである。つまり if は「場合分け」、for は「反復」と考えると整理しやすい。

3-4. 関数が保守や再利用に役立つ理由

関数で処理をまとめると、同じロジックを複数箇所に書かずに済む。そのため、仕様変更があったときも関数の中を直せばよく、修正漏れを減らしやすい。また、処理に名前を付けられるので、コード全体の意図も読み取りやすくなる。

問題4の解答例（クリックで開く）

③ 実行結果の例

adult
string
number
15
Hello, Sato
最初の adult は、age >= 18 が true だからである。 typeof userName は文字列なので string、typeof age は数値なので number になる。 total は 1 + 2 + 3 + 4 + 5 なので 15 である。 greet(userName) はテンプレート文字列を使って Hello, Sato を返している。

以下は、④で元のコードから 1 か所ずつ別々に変更した場合の例である。

④-1. age を 15 に変えた場合

minor
string
number
15
Hello, Sato
age >= 18 が false になるため、if ではなく else 側が実行される。ここで変わるのは最初の判定結果だけで、他の型や合計値は変わらない。

④-2. i <= 10 に変えた場合

adult
string
number
55
Hello, Sato
1 から 10 までを足すので、1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55 になる。繰り返しの条件を変えるだけで、同じ計算パターンを広い範囲へ適用できるのがループの強みである。

コードの流れを図で見る

userName = "Sato"
age = 20
total = 0
   ↓
for で 1〜5 を足す
   ↓
total = 15
   ↓
age >= 18 を判定
   ↓
"adult" を表示
   ↓
型・合計・関数の戻り値を表示
この 1 本の小さなプログラムの中に、変数・型・条件分岐・繰り返し・関数がすべて入っている。それぞれを個別に覚えるだけでなく、「どう組み合わさって動くか」を見ることが重要である。