4-1. 変数・型・制御フロー・関数

このセクションで学ぶこと

• プログラムが「データを受け取り、処理し、結果を返す」流れ
• 変数と型がなぜ必要なのか
• 条件分岐と繰り返しで処理の流れを変える考え方
• 関数で処理をまとめる理由

この章の実行例では JavaScript を使う。
ただし、ここで学ぶ内容は多くの言語に共通するプログラミングの土台である。

---

1. プログラムとは何か

プログラムとは、入力されたデータに対して、決められた手順で処理を行い、結果を返す手順書である。

入力
 ↓
処理
 ↓
出力

たとえば次のような処理は、どれもプログラムで表現できる。

• 金額と個数を受け取って合計金額を出す
• テストの点数を見て合否を判定する
• 商品一覧を価格順に並べ替える
• ボタンが押されたらメッセージを表示する

一見すると複雑なアプリケーションも、細かく見ると「値を持つ」「条件で分ける」「同じ処理を繰り返す」「処理を名前付きでまとめる」という基本動作の組み合わせでできている。

---

2. 変数とは何か

変数とは、値に名前を付けて扱うための仕組みである。

値そのものを毎回直接書くこともできるが、名前を付けたほうが意味が分かりやすくなり、あとで値を変えるのも簡単になる。

const price = 1200;
const quantity = 3;
const total = price * quantity;

console.log(total);

price    → 1200
quantity → 3
total    → 3600

なぜ変数が必要なのか

変数がないと、コードはすぐ読みにくくなる。

console.log(1200 * 3);

このコードでも計算はできるが、1200 が価格なのか、送料なのか、税率なのか分かりにくい。
そこで price や quantity のような名前を付けると、「この値は何を表しているか」が見えやすくなる。

const と let

JavaScript では、よく次の 2 つを使う。

書き方	使いどころ
const	あとで別の値を再代入しない名前
let	途中で値が変わる名前

let count = 0;
count = count + 1;

console.log(count);

この例では、count の値は 0 から 1 に更新される。
「値が変化するもの」と「変化しないもの」を分けて考えると、バグを減らしやすい。

---

3. 型とは何か

型とは、その値がどのような種類のデータかを表す考え方である。

たとえば次の値は見た目も意味も違う。

型	例	役割
数値	10, 3.14	計算に使う
文字列	"hello", "100"	文章や名前を表す
真偽値	true, false	はい / いいえを表す

なぜ型が必要なのか

コンピュータは、値の種類によって扱い方を変える必要がある。

console.log(10 + 5);
console.log("10" + 5);

このコードの結果は次のようになる。

15
105

1 行目は数値どうしなので加算になる。
2 行目は左側が文字列なので、JavaScript では文字の連結として扱われる。

つまり型を意識しないと、「なぜその結果になったのか」が分からなくなりやすい。

型はバグの早期発見にも役立つ

実務では「本来は数値であるべき場所に文字列が来た」「true / false のつもりが別の値を入れてしまった」といった問題がよく起きる。
型を意識することは、データの意味を守ることでもある。

---

4. 制御フローとは何か

制御フローとは、プログラムの実行順序をどう進めるかという考え方である。

基本となる流れは次の 3 つである。

種類	役割	例
順次	上から順番に実行する	変数を作る → 計算する → 表示する
条件分岐	条件によって処理を分ける	合格 / 不合格を分ける
繰り返し	同じ処理を何回も行う	一覧の全件を処理する

条件分岐

const score = 75;

if (score >= 60) {
  console.log("pass");
} else {
  console.log("fail");
}

score >= 60 ?
   ├─ yes → "pass"
   └─ no  → "fail"

if は「条件が成り立つときだけ実行する」ための基本構文である。

繰り返し

let total = 0;

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

console.log(total);

この例では、1 + 2 + 3 + 4 + 5 を順に足していく。
繰り返しがないと、同じような処理を何度も手で書かなければならない。

---

5. 関数とは何か

関数とは、処理に名前を付けて再利用できるようにしたものである。

function add(a, b) {
  return a + b;
}

const result = add(3, 4);
console.log(result);

この例では、add という関数が 2 つの値を受け取り、その合計を返している。

関数の基本要素

要素	説明
関数名	何の処理かを表す名前
引数	関数へ渡す入力
戻り値	関数が返す結果

add(3, 4)
 ↓
3 と 4 を受け取る
 ↓
足し算する
 ↓
7 を返す

なぜ関数が必要なのか

関数を使うと、次の利点がある。

• 同じ処理を何度も書かずに済む
• 処理の意味を名前で表せる
• 修正箇所を 1 か所に集めやすい
• 後でテストしやすい

つまり関数は、単に「書き方のルール」ではなく、プログラムを分かりやすく分解する道具である。

---

6. ここまでを 1 つの小さなプログラムとして見る

function calculateTotal(price, quantity) {
  return price * quantity;
}

const price = 1200;
const quantity = 2;
const total = calculateTotal(price, quantity);

if (total >= 2000) {
  console.log("large order");
} else {
  console.log("small order");
}

console.log(total);

このコードでは、次の要素がすべて入っている。

1. price と quantity という変数を使っている
2. 値として数値を使っており、型がある
3. calculateTotal という関数で計算をまとめている
4. if による条件分岐で表示を変えている

こうして見ると、プログラミングの基礎は別々の知識ではなく、一緒に組み合わさって動く部品だと分かる。

---

7. 初学者が混同しやすい点

変数名と値は別物

price という名前自体が 1200 なのではなく、price という名前が 1200 という値を指している。

文字列の “10” と数値の 10 は違う

見た目が似ていても、型が違えば扱いも違う。
「表示用の文字」なのか「計算用の数」なのかを区別することが大切である。

条件分岐と繰り返しは役割が違う

• if は「場合分け」
• for は「何回も実行する」

似たように見えても、目的が違う。

関数は呼び出して初めて動く

関数を定義しただけでは、その処理はまだ実行されない。
add(3, 4) のように呼び出して初めて処理が走る。

---

まとめ

キーワード	説明
プログラム	入力を受けて処理し、結果を返す手順
変数	値に名前を付けて扱う仕組み
型	値の種類を表す考え方
条件分岐	条件によって処理を分けること
繰り返し	同じ処理を何度も行うこと
関数	処理に名前を付けて再利用する仕組み
引数	関数へ渡す入力
戻り値	関数が返す結果

---

次のステップ

演習問題 に取り組んで理解を確認しよう。

理解できたら 4-2. オブジェクト指向の原則 へ進もう。