JavaScriptの制御構文をマスターすることは、プログラミングの基本スキルを習得する上で欠かせません。
このカリキュラムでは、条件分岐、繰り返し処理、配列操作について、理論と実践を交えながら学習します。
1.基本概念
プログラムを作る際、条件によって処理を変える「条件分岐」は欠かせない概念です。このセッションでは、条件分岐とは何か、そして実際にどのような場面で使われるのかを具体例とともに解説します。
1. 条件分岐とは？
条件分岐とは、プログラムが実行中に「特定の条件」を満たしているかを判定し、その結果に応じて異なる処理を行う仕組みです。
基本的な流れ
- 条件を設定する（例: 「Aが10以上かどうか」）。
- 条件が「真（true）」の場合に実行する処理を記述する。
- 条件が「偽（false）」の場合に実行する処理を記述する（オプション）。
なぜ条件分岐が重要なのか？
条件分岐がないプログラムは、常に同じ動作を繰り返すだけの単純なものになります。
しかし、条件分岐を取り入れることで、動的で柔軟な動作が可能になります。
例: 自動販売機の動作
- コインを入れたときに金額が足りていれば商品を出す。
- 足りなければエラーメッセージを表示する。
このような処理は条件分岐を使うことで実現します。
2. 条件分岐を使用する場面の具体例
条件分岐は、日常の様々な場面で使われています。
以下に具体例を挙げてみましょう。
2.1. ユーザーの入力に応じた動作
例: ログインシステム
- シナリオ:
ユーザーがIDとパスワードを入力した際に、それが正しいかどうかを確認する。 - 実装の流れ:
1. IDとパスワードが正しければログイン成功。
2. 間違っていればエラーメッセージを表示する。
JavaScript例:
let inputID = "user1";
let inputPassword = "pass123";
if (inputID === "user1" && inputPassword === "pass123") {
console.log("ログイン成功！");
} else {
console.log("IDまたはパスワードが間違っています");
}2.2. システムでのデータ処理
例: 商品の在庫管理
- シナリオ:
商品の在庫数に応じて、購入可否を判断する。 - 実装の流れ:
1. 在庫数が1以上なら購入可能。
2. 在庫が0の場合は「在庫切れ」と表示。
JavaScript例:
let stock = 5;
if (stock > 0) {
console.log("購入可能です。在庫: " + stock);
} else {
console.log("在庫切れです");
}2.3. 日時に基づく処理
例: 営業時間の判定
- シナリオ:
現在の時間を基に、店舗が営業中かどうかを判定する。 - 実装の流れ:
1. 時間が9時～18時の間なら「営業中」。
2. それ以外の時間は「営業時間外」。
JavaScript例:
let currentHour = 15;
if (currentHour >= 9 && currentHour <= 18) {
console.log("現在、営業中です");
} else {
console.log("現在、営業時間外です");
}2.4. 動的なUI操作
例: Webページでのユーザー体験の向上
- シナリオ:
ボタンをクリックした際に条件に応じて画面に異なるメッセージを表示する。 - 実装の流れ:
1. ユーザーが同意ボタンを押した場合は「処理を進める」。
2. 同意しない場合は「処理を中止する」。
JavaScript例:
let isAgreed = true;
if (isAgreed) {
console.log("同意を確認しました。処理を進めます。");
} else {
console.log("同意が必要です。処理を中止します。");
}2.if-else構文
if-else構文は、JavaScriptにおける基本的な条件分岐の仕組みです。
このセッションでは、if-else構文の文法と使い方を学び、具体的な例題を通じて理解を深めます。
1. if-else構文とは？
if-elseの概要
if-else構文は、「条件が真（true）」の場合に特定の処理を実行し、「条件が偽（false）」の場合に別の処理を行う構文です。
- if:
条件を指定し、その条件が満たされたときの処理を記述します。 - else:
条件が満たされなかった場合の処理を記述します。
文法
以下が基本的なif-else構文の文法です。
if (条件式) {
// 条件式がtrueの場合に実行される処理
} else {
// 条件式がfalseの場合に実行される処理
}流れ図
- 条件式を評価します。
- 条件式がtrueの場合はifブロック内の処理を実行します。
- 条件式がfalseの場合はelseブロック内の処理を実行します。
2. if-else構文の使い方
以下に、基本的な使い方を例とともに解説します。
2.1. 数字の大小を比較する場合
ユーザーが入力した数字が10以上かどうかを判定する例です。
コード例:
let number = 15;
if (number >= 10) {
console.log("この数字は10以上です");
} else {
console.log("この数字は10未満です");
}動作の説明
- 変数numberに15が代入されています。
- 条件number >= 10が評価されます。
- 15は10以上なので、ifブロック内のコードが実行されます。
- 結果として「この数字は10以上です」が出力されます。
2.2. 年齢によるメッセージの出力
ユーザーの年齢に基づいて異なるメッセージを表示するプログラムの例です。
コード例:
let age = 20;
if (age < 18) {
console.log("未成年です");
} else {
console.log("成人です");
}動作の説明
- 変数ageに20が代入されています。
- 条件age < 18が評価されます。
- 20は18未満ではないため、elseブロック内の処理が実行されます。
- 結果として「成人です」が出力されます。
3. else ifを使った条件分岐
複数の条件を判定する場合には、else ifを使います。
これにより、複雑な条件分岐を記述することができます。
例: テストの成績に応じた評価
テストの点数に基づいて評価を表示する例です。
コード例:
let score = 75;
if (score >= 90) {
console.log("評価: 優");
} else if (score >= 70) {
console.log("評価: 良");
} else if (score >= 50) {
console.log("評価: 可");
} else {
console.log("評価: 不可");
}動作の説明
- 変数scoreに75が代入されています。
- 条件score >= 90が評価されますが、75は満たしていないため次の条件に進みます。
- 条件score >= 70がtrueなので「評価: 良」が出力されます。
3.switch構文
switch構文は、特定の値に基づいて複数の分岐処理を行う際に便利な構文です。
このセッションでは、switch構文の文法と使い方を学び、if-else構文との違いや使い分けについても理解を深めます。
1. switch構文とは？
switchの概要
switch構文は、1つの変数や式の値に基づいて、複数の選択肢（ケース）の中から一致するものを選び、対応する処理を実行します。
if-else構文と同じく条件分岐を実現しますが、複数の条件を評価する際にコードがシンプルで読みやすくなる場合があります。
文法
以下がswitch構文の基本的な文法です。
switch (評価対象) {
case 値1:
// 値1に一致した場合の処理
break;
case 値2:
// 値2に一致した場合の処理
break;
default:
// どのcaseにも一致しなかった場合の処理
}文法の重要なポイント
- 評価対象:
switchキーワードに続く括弧内で評価される値や式。 - case文:
各caseに指定した値と評価対象が一致すると、そのブロック内の処理が実行されます。 - break文:
処理が終了したらswitch構文を抜けるために使います。breakを省略すると次のcaseの処理が続けて実行されます。 - default文:
どのcaseにも一致しない場合に実行される処理を指定します。
2. switch構文の使い方
以下に、switch構文の実際の使い方を具体的な例で解説します。
2.1. 曜日によるメッセージ表示
コード例:
let day = "月曜日";
switch (day) {
case "月曜日":
console.log("週の始まりです。頑張りましょう！");
break;
case "金曜日":
console.log("週末が近いですね！");
break;
case "土曜日":
case "日曜日":
console.log("休日です。リラックスしましょう！");
break;
default:
console.log("普通の日ですね");
}動作の説明
- 評価対象dayが"月曜日"の場合、「週の始まりです。頑張りましょう！」が表示されます。
- dayが"土曜日"または"日曜日"の場合、休日用のメッセージが表示されます。
- それ以外の場合はdefaultの処理が実行されます。
2.2. ユーザー入力によるメニュー選択
コード例:
let choice = 2;
switch (choice) {
case 1:
console.log("コーヒーを選択しました");
break;
case 2:
console.log("紅茶を選択しました");
break;
case 3:
console.log("ジュースを選択しました");
break;
default:
console.log("無効な選択です");
}動作の説明
- choiceが2の場合、「紅茶を選択しました」が出力されます。
- 存在しない選択肢（例: 4）の場合はdefaultの「無効な選択です」が実行されます。
3. switchとif-elseの使い分け
条件分岐を行う場合、switch構文とif-else構文のどちらを使うべきか迷うことがあります。
それぞれの特性を理解し、適切に使い分けましょう。
3.1. if-else構文が適している場面
- 複雑な条件式が必要な場合
• if-else構文は複雑な条件式（例: x > 10 && y < 5）を扱えますが、switch構文は単純な値の一致に特化しています。 - 条件が動的に変化する場合
• 条件が計算や動的な評価に依存する場合はif-else構文が適しています。
例:
let age = 20;
if (age >= 18 && age <= 65) {
console.log("労働年齢です");
} else {
console.log("対象外です");
}3.2. switch構文が適している場面
- 固定された値を比較する場合
• 特定の値に基づいて処理を分岐する場合、switch構文はコードが簡潔になり、読みやすくなります。 - 多くの分岐が必要な場合
• caseごとに分岐処理が明確で、条件が単純な場合にはswitch構文が適しています。
例:
let command = "start";
switch (command) {
case "start":
console.log("システムを開始します");
break;
case "stop":
console.log("システムを停止します");
break;
case "pause":
console.log("システムを一時停止します");
break;
default:
console.log("不明なコマンドです");
}3.3. 見た目の違い
| 特徴 | if-else構文 | switch構文 |
| 条件の柔軟性 | 複雑な条件式や範囲の評価が可能 | 単純な値の一致に特化 |
| コードの見やすさ | 分岐が多いとコードが長くなりがち | 分岐が多くても読みやすい |
| 使用例 | 数値や状態の動的な比較 | 固定値の分岐（文字列や定数の判定など） |
4.ループ
ループは、同じ処理を繰り返し実行するための構文です。
プログラミングでは頻繁に使用されるため、その文法や使い方をしっかりと理解することが重要です。このセッションでは、forループ、whileループ、do-whileループについて詳しく解説します。
1. ループとは？
ループは、特定の条件が満たされるまで処理を繰り返すための構文です。
主に以下の3種類があり、使い分けが可能です。
- forループ:
回数が決まっている繰り返し処理に最適。 - whileループ:
条件が満たされている間繰り返す処理に最適。 - do-whileループ:
条件にかかわらず、少なくとも1回は実行される処理に最適。
2. forループ
文法
forループは、繰り返しの回数を指定して実行するのに適しています。
文法は以下の通りです。
for (初期化; 条件; 更新) {
// 繰り返したい処理
}各部分の意味
- 初期化:
繰り返し処理の前に1度だけ実行されるコード。 - 条件:
ループを続ける条件。trueの間は処理を繰り返します。 - 更新:
各ループの最後に実行されるコード。
カウントアップの例
1から5までの数字を表示するコードです。
for (let i = 1; i <= 5; i++) {
console.log(i);
}動作の説明
- 初期化: let i = 1が最初に実行され、iが1に設定されます。
- 条件: i <= 5が評価されます。trueの場合、ループが続行されます。
- 処理: console.log(i)が実行されます。
- 更新: i++でiが1増えます。
- 以上を繰り返し、iが6になるとループが終了します。
3. whileループ
文法
whileループは、条件が満たされている間処理を繰り返します。
while (条件) {
// 繰り返したい処理
}条件が真の間、繰り返す例
1から5までの数字を表示するコードです。
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}動作の説明
- 条件i <= 5がtrueの間、ループが続きます。
- 各ループごとにi++でiが1増えます。
- iが6になると条件がfalseとなり、ループが終了します。
無限ループに注意
条件を適切に設計しないと無限ループになる場合があります。
以下は無限ループの例です。
let i = 1;
while (i <= 5) {
console.log(i);
// 更新がないため、条件が永遠に真のまま
}対策
必ず条件がfalseになるように、変数の更新や終了条件を適切に設定しましょう。
4. do-whileループ
文法
do-whileループは、少なくとも1回は処理を実行し、その後条件を評価します。
do {
// 実行したい処理
} while (条件);少なくとも1回は実行される例
以下は、iが5以上であるかを確認し、条件に基づいて処理を繰り返す例です。
let i = 5;
do {
console.log("現在の値: " + i);
i++;
} while (i <= 7);動作の説明
- 初回は条件i <= 7を評価せずに処理を実行します。
- その後、条件i <= 7を評価し、trueなら再び処理を実行します。
- iが8になった時点でループが終了します。
使用例と注意点
使用例:
ユーザー入力が有効になるまで再試行する場合。
let password;
do {
password = prompt("パスワードを入力してください:");
} while (password !== "12345");
console.log("ログイン成功！");注意点
- 無限ループにならないよう、条件や終了処理を適切に設計します。
5. 各ループの使い分け
| 種類 | 特徴 | 使用例 |
| forループ | 繰り返し回数が決まっている場合に適している | 配列の要素を順に処理する |
| whileループ | 繰り返し回数が不明で、条件が満たされる間続ける場合 | ユーザーが「終了」と入力するまで繰り返す |
| do-whileループ | 最低1回は処理を実行する必要がある場合 | 入力値が有効でない場合の再試行 |
5.配列
配列は、JavaScriptで複数のデータを管理するための基本的なデータ構造です。
このセッションでは、配列の初期化から操作方法、ループを使った配列の活用、さらに便利なメソッドについて詳しく解説します。
1. 配列とは何か？
配列（Array）は、複数のデータを1つの変数で管理するための構造です。
配列を使うことで、同じ種類のデータ（例えば名前や数値）を効率的にまとめて扱えます。
配列の特徴
- データは「要素」と呼ばれ、インデックス（番号）でアクセスします。
- インデックスは0から始まります（最初の要素はインデックス0）。
基本的な配列の例
以下は、フルーツの名前を格納した配列です。
let fruits = ["りんご", "みかん", "ぶどう"];
console.log(fruits[0]); // "りんご"
console.log(fruits[2]); // "ぶどう"2. 配列の初期化、値の追加・削除
配列の初期化
配列は以下のように初期化します。
// 空の配列
let emptyArray = [];
// 要素を含む配列
let numbers = [1, 2, 3, 4];値の追加
1. pushメソッド:
配列の末尾に要素を追加します。
let fruits = ["りんご", "みかん"];
fruits.push("ぶどう"); // 配列: ["りんご", "みかん", "ぶどう"]2. インデックス指定: 特定の位置に直接値を設定します。
let fruits = [];
fruits[0] = "りんご"; // 配列: ["りんご"]値の削除
1. popメソッド:
配列の末尾の要素を削除します。
let fruits = ["りんご", "みかん"];
fruits.pop(); // 配列: ["りんご"]2. spliceメソッド:
指定した位置の要素を削除します。
let fruits = ["りんご", "みかん", "ぶどう"];
fruits.splice(1, 1); // 配列: ["りんご", "ぶどう"]3. 配列とforループの活用
配列はループと組み合わせることで、効率的にデータを処理できます。
例: 配列の全要素を出力
let fruits = ["りんご", "みかん", "ぶどう"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}動作の説明
- fruits.lengthは配列の要素数を返します。
- ループの条件をi < fruits.lengthとすることで、全要素にアクセスします。
- 各要素をfruits[i]で参照し、表示します。
4. 配列要素の出力例
以下は、配列の操作と出力を含む具体例です。
例1: 配列の要素を全て小文字に変換
let fruits = ["Apple", "Orange", "Grape"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i].toLowerCase());
}例2: 配列の偶数だけを出力
let numbers = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
console.log(numbers[i]);
}
}5. map, filter, forEachなどの便利メソッド
JavaScriptの配列には、強力なメソッドが多数用意されています。
ここでは代表的なものを紹介します。
5.1. map
配列の各要素に対して処理を行い、新しい配列を作成します。
例: 各数値を2倍にする
let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]5.2. filter
条件を満たす要素だけを抽出して、新しい配列を作成します。
例: 偶数だけを抽出
let numbers = [1, 2, 3, 4, 5, 6];
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4, 6]5.3. forEach
配列の各要素に対して1回ずつ処理を実行します。
例: 各要素をコンソールに表示
let fruits = ["りんご", "みかん", "ぶどう"];
fruits.forEach(fruit => console.log(fruit));5.4. reduce
配列の全要素を使って単一の値を計算します。
例: 配列の合計を計算
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 106. 配列の活用例
実践例: ユーザー情報のフィルタリング
配列内のオブジェクトから、条件に合致するユーザーを抽出します。
let users = [
{ name: "Alice", age: 25 },
{ name: "Bob", age: 30 },
{ name: "Charlie", age: 35 }
];
let adults = users.filter(user => user.age >= 30);
console.log(adults);
// 出力: [{ name: "Bob", age: 30 }, { name: "Charlie", age: 35 }]まとめ
今回の講座では、JavaScriptの制御構文と配列操作の基礎について学びました。
条件分岐やループは、プログラムの流れをコントロールするために欠かせない要素であり、配列操作はデータを効率的に管理・処理するための重要なスキルです。
これらを組み合わせることで、より実用的で柔軟なプログラムを作る力を身につけることができたのではないでしょうか。
プログラミングの学習は、理論だけでなく、実際にコードを書き、動作を確認することで深まります。今回の内容を活かしながら、練習問題や小さなプロジェクトに挑戦してみてください。
そして、自分でコードを書き上げる楽しさや、問題を解決する達成感をぜひ味わってください。
