はじめてのTypeScriptプログラミング入門 30日コース | TypeScriptとプログラミング基礎 - Day 4:演算子・条件分岐

TypeScript 30日で身につけるTypeScript
スポンサーリンク
スポンサーリンク

Day 4:演算子と条件分岐で「考えるコード」を書く

Day 4では、いよいよ「考えるコード」を書いていきます。 足し算や引き算などの演算子、そして ifelse といった条件分岐を使って、年齢によってメッセージを変える「年齢判定プログラム」を作っていきます。 雑誌の特集記事を読むような感覚で、ひとつずつ丁寧に追いかけていきましょう。

基本の算術演算子:+ – * / %

まずは、数値を扱うときに必ず登場する「算術演算子」からです。

足し算:+

let a: number = 10;
let b: number = 5;

let sum: number = a + b; // 10 + 5 = 15
console.log("足し算の結果:", sum);
TypeScript

ポイント:

  • + は「足し算」です。
  • 文字列同士をつなげるときにも使えます(ただし、今日は数値に集中します)。

引き算:-

let diff: number = a - b; // 10 - 5 = 5
console.log("引き算の結果:", diff);
TypeScript

掛け算:*

let product: number = a * b; // 10 * 5 = 50
console.log("掛け算の結果:", product);
TypeScript

割り算:/

let quotient: number = a / b; // 10 / 5 = 2
console.log("割り算の結果:", quotient);
TypeScript

剰余(あまり):%

let remainder: number = a % b; // 10 % 5 = 0(10 を 5 で割ったあまり)
console.log("剰余の結果:", remainder);

let oddCheck: number = 7 % 2; // 7 を 2 で割ったあまり = 1
console.log("7 % 2 の結果:", oddCheck); // 1(奇数かどうかの判定に使えます)
TypeScript

重要な使い道:

  • n % 2 === 0 → 偶数
  • n % 2 === 1 → 奇数

比較演算子:===, !==, >, <, >=, <=

次に、「値を比べる」ための演算子を見ていきます。 年齢判定プログラムでは、この比較演算子が主役になります。

厳密な等価:===

let age: number = 18;

console.log(age === 18); // true
console.log(age === 20); // false
TypeScript

ポイント:

  • === は「値も型も同じかどうか」をチェックします。
  • TypeScriptでは、基本的に == ではなく === を使うのがおすすめです。

等しくない:!==

console.log(age !== 18); // false
console.log(age !== 20); // true
TypeScript

大なり・小なり:>, <

console.log(age > 18);  // false(18 は 18 より大きくない)
console.log(age < 20);  // true(18 は 20 より小さい)
TypeScript

以上・以下:>=, <=

console.log(age >= 18); // true(18 は 18 以上)
console.log(age <= 18); // true(18 は 18 以下)
TypeScript

年齢判定でよく使う形:

  • age >= 20 → 「成人かどうか」
  • age < 13 → 「子どもかどうか」

論理演算子:&&, ||, !

条件を組み合わせるときに使うのが、論理演算子です。

AND:&&(かつ)

let age: number = 18;
let isStudent: boolean = true;

// 「18歳以上 かつ 学生」のときだけ true
let isAdultStudent: boolean = age >= 18 && isStudent;

console.log("成人学生ですか?", isAdultStudent);
TypeScript

意味:

  • 左も右も両方 true のときだけ、結果が true になります。

OR:||(または)

let hasTicket: boolean = true;
let isVip: boolean = false;

// 「チケットを持っている または VIP」のときに入場OK
let canEnter: boolean = hasTicket || isVip;

console.log("入場できますか?", canEnter);
TypeScript

意味:

  • 左か右のどちらかが true なら、結果は true になります。

NOT:!(否定)

let isChild: boolean = age < 13;
let isNotChild: boolean = !isChild;

console.log("子どもですか?", isChild);
console.log("子どもではありませんか?", isNotChild);
TypeScript

意味:

  • true を false に、false を true にひっくり返します。

if / else if / else:条件分岐の基本形

ここからは、いよいよ「条件によって処理を変える」ための構文です。

if 文の基本

let age: number = 18;

if (age >= 20) {
  console.log("成人です。");
}
TypeScript

ポイント:

  • if (条件) の形で書きます。
  • 条件が true のときだけ、中の処理が実行されます。

if + else

if (age >= 20) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}
TypeScript

ポイント:

  • 条件が true のときは if の中、false のときは else の中が実行されます。
  • 「どちらか一方」を選ぶときに使います。

if + else if + else

if (age < 13) {
  console.log("子どもです。");
} else if (age < 20) {
  console.log("ティーンエイジャーです。");
} else {
  console.log("大人です。");
}
TypeScript

ポイント:

  • 上から順番に条件が評価され、最初に true になったところだけが実行されます。
  • 「いくつかのパターンの中から1つを選ぶ」ときに使います。

三項演算子:短く書ける if

三項演算子は、「条件 ? 真のときの値 : 偽のときの値」という形で書く、コンパクトな条件分岐です。

let age: number = 18;

// 条件 ? true のとき : false のとき
let label: string = age >= 20 ? "成人" : "未成年";

console.log("年齢ラベル:", label);
TypeScript

ポイント:

  • 「値を選ぶ」場面でよく使われます。
  • 複雑な処理には向きませんが、ラベルやメッセージを選ぶときには便利です。

実践:年齢判定プログラムを作る

ここまでの知識を使って、「年齢判定プログラム」を作ってみます。 テーマはシンプルですが、演算子と条件分岐の基本がぎゅっと詰まった練習になります。

ステップ1:年齢を変数として用意する

// age-check.ts
// 年齢判定プログラム

// 1. 年齢を変数として用意する
let age: number = 18; // ここをいろいろ変えて試してみてください

console.log("あなたの年齢:", age);
TypeScript

ステップ2:成人かどうかを判定する

// 2. 成人かどうかを判定する

if (age >= 20) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}
TypeScript

ステップ3:子ども・ティーン・大人を分類する

// 3. 子ども・ティーン・大人を分類する

if (age < 13) {
  console.log("子どもです。");
} else if (age < 20) {
  console.log("ティーンエイジャーです。");
} else {
  console.log("大人です。");
}
TypeScript

ステップ4:三項演算子でラベルを作る

// 4. 三項演算子でラベルを作る

let ageLabel: string = age >= 20 ? "成人" : "未成年";

console.log("年齢ラベル(簡易判定):", ageLabel);
TypeScript

ステップ5:論理演算子も少し混ぜてみる

// 5. 論理演算子を使った少し複雑な判定

let isStudent: boolean = true; // 学生かどうか(ここも変えて試してみてください)

// 「20歳以上 かつ 学生」のときだけ「成人学生」と表示する
if (age >= 20 && isStudent) {
  console.log("成人学生です。");
} else if (age >= 20 && !isStudent) {
  console.log("社会人の成人です。");
} else {
  console.log("未成年です。");
}
TypeScript

練習用テンプレート:自分で遊べる年齢判定コード

最後に、Day 4の内容をまとめた「練習用テンプレート」を用意します。 このままコピーして、年齢や条件をいろいろ変えながら遊んでみてください。

// day4-practice.ts
// Day 4 練習:年齢判定プログラム

// 1. 年齢と学生フラグを用意する
let age: number = 18;          // ここを 10, 15, 20, 30 などに変えてみる
let isStudent: boolean = true; // true / false を切り替えてみる

console.log("=== 入力情報 ===");
console.log("年齢:", age);
console.log("学生ですか?", isStudent);

// 2. 成人かどうかを判定する
console.log("=== 成人判定 ===");

if (age >= 20) {
  console.log("成人です。");
} else {
  console.log("未成年です。");
}

// 3. 子ども・ティーン・大人を分類する
console.log("=== 年齢カテゴリ判定 ===");

if (age < 13) {
  console.log("子どもです。");
} else if (age < 20) {
  console.log("ティーンエイジャーです。");
} else {
  console.log("大人です。");
}

// 4. 三項演算子で簡易ラベルを作る
console.log("=== 三項演算子によるラベル ===");

let ageLabel: string = age >= 20 ? "成人" : "未成年";
console.log("年齢ラベル:", ageLabel);

// 5. 論理演算子を使った複合判定
console.log("=== 複合判定(年齢 + 学生) ===");

if (age >= 20 && isStudent) {
  console.log("成人学生です。");
} else if (age >= 20 && !isStudent) {
  console.log("社会人の成人です。");
} else if (age < 20 && isStudent) {
  console.log("未成年の学生です。");
} else {
  console.log("未成年の社会人(アルバイトなど)かもしれません。");
}
TypeScript

Day 4のまとめ

Day 4では、次のポイントを押さえました。

  • 算術演算子 +, -, *, /, % で数値を扱う基本
  • 比較演算子 ===, !==, >, <, >=, <= で値を比べる方法
  • 論理演算子 &&, ||, ! で条件を組み合わせる考え方
  • if, else if, else で「状況に応じて処理を変える」コードを書く方法
  • 三項演算子で、コンパクトに条件によって値を選ぶテクニック
  • 実践として、年齢判定プログラムを作り、いろいろなパターンを試すこと

ここまで来ると、「ただ値を表示するだけのコード」から一歩進んで、「状況に応じて考えるコード」を書けるようになっています。


Day 4:演算子・条件分岐で「判断するプログラム」を作る

Day 4では、いよいよ「条件によって結果が変わる」プログラムをまとめて練習していきます。 合格判定・偶数/奇数判定・年齢判定・パスワード判定・ログイン判定という、日常でもイメージしやすいテーマを通して、演算子と条件分岐の使い方を体に馴染ませていきます。

演算子と条件分岐のざっくりおさらい

まずは、今日使う道具をざっと並べておきます。

  • 算術演算子:+, -, *, /, %
  • 比較演算子:===, !==, >, <, >=, <=
  • 論理演算子:&&, ||, !
  • 条件分岐:if, else if, else, 三項演算子 条件 ? 値1 : 値2

これらを組み合わせることで、「点数が何点なら合格」「年齢がいくつなら成人」「パスワードが正しいかどうか」といった“判断するコード”を書いていきます。

合格判定プログラム

まずは、いちばんイメージしやすい「合格判定」から始めます。

合格判定の考え方

  • 点数が 60点以上なら合格
  • それ以外は不合格

というシンプルなルールで考えてみます。

// pass-check.ts
// 合格判定プログラム

// 1. 点数を用意する
let score: number = 75; // ここをいろいろ変えて試してみてください

console.log("あなたの点数:", score);

// 2. 合格かどうかを判定する
if (score >= 60) {
  console.log("合格です!");
} else {
  console.log("不合格です。");
}

// 3. 三項演算子でラベルを作る
let resultLabel: string = score >= 60 ? "合格" : "不合格";
console.log("判定ラベル:", resultLabel);
TypeScript

重要ポイント:

  • score >= 60 という比較演算子が「合格ライン」を表しています。
  • ifelse で、「条件を満たす場合」と「満たさない場合」を分けています。
  • 三項演算子は、「値だけを選びたいとき」にコンパクトに書ける便利な形です。

偶数・奇数判定プログラム

次は、%(剰余)を使った「偶数・奇数判定」です。

偶数・奇数の考え方

  • 数字を 2 で割ったときの あまりが 0 なら偶数
  • あまりが 1 なら奇数

というルールで判定できます。

// even-odd.ts
// 偶数・奇数判定プログラム

// 1. 判定したい数値を用意する
let n: number = 7; // ここを 2, 3, 10, 11 などに変えてみてください

console.log("判定対象の数値:", n);

// 2. 剰余を使って偶数・奇数を判定する
if (n % 2 === 0) {
  console.log("偶数です。");
} else {
  console.log("奇数です。");
}

// 3. 三項演算子でラベルを作る
let parityLabel: string = n % 2 === 0 ? "偶数" : "奇数";
console.log("偶奇ラベル:", parityLabel);
TypeScript

重要ポイント:

  • n % 2 が「2で割ったときのあまり」を表します。
  • n % 2 === 0 という条件が、「偶数かどうか」の判定そのものになっています。
  • % は、単なる数学の記号ではなく、「条件分岐と相性がいい演算子」として覚えておくと便利です。

年齢判定プログラム(カテゴリ分け)

Day 4の定番テーマ「年齢判定」を、少しだけバリエーション豊かに書いてみます。

年齢カテゴリの考え方

例として、次のように分けてみます。

  • 0〜12歳:子ども
  • 13〜19歳:ティーン
  • 20歳以上:大人
// age-check.ts
// 年齢判定プログラム

// 1. 年齢を用意する
let age: number = 18; // ここを 10, 15, 20, 30 などに変えてみてください

console.log("あなたの年齢:", age);

// 2. 年齢カテゴリを判定する
if (age < 13) {
  console.log("子どもです。");
} else if (age < 20) {
  console.log("ティーンエイジャーです。");
} else {
  console.log("大人です。");
}

// 3. 三項演算子で「成人/未成年」ラベルを作る
let adultLabel: string = age >= 20 ? "成人" : "未成年";
console.log("成人判定ラベル:", adultLabel);
TypeScript

重要ポイント:

  • ifelse ifelse の流れで、「いくつかの条件の中から1つを選ぶ」形になっています。
  • 上から順番に条件が評価され、最初に true になったところだけが実行されます。
  • 三項演算子は、「細かいカテゴリ分け」とは別に、「成人/未成年」のようなシンプルなラベルを付けるのに向いています。

パスワード判定プログラム(簡易版)

次は、セキュリティっぽいテーマとして「パスワード判定」を扱います。 ここでは、あくまで学習用の簡易な例として、「正しいパスワード文字列と一致するかどうか」だけを見ます。

パスワード判定の考え方

  • 正しいパスワードを、あらかじめ変数に持っておく
  • ユーザーが入力したパスワードと === で比較する
// password-check.ts
// パスワード判定プログラム(学習用の簡易版)

// 1. 正しいパスワードを用意する
const correctPassword: string = "secret123";

// 2. ユーザーが入力したパスワード(ここでは仮の値)
let inputPassword: string = "secret123"; // ここを "abc" などに変えて試してみてください

console.log("入力されたパスワード:", inputPassword);

// 3. 一致しているかどうかを判定する
if (inputPassword === correctPassword) {
  console.log("パスワードが正しいです。ログインできます。");
} else {
  console.log("パスワードが間違っています。");
}

// 4. 三項演算子でメッセージを作る
let passwordMessage: string =
  inputPassword === correctPassword ? "認証成功" : "認証失敗";

console.log("パスワード判定メッセージ:", passwordMessage);
TypeScript

重要ポイント:

  • === は「値も型も同じかどうか」をチェックする厳密な比較です。
  • パスワードのような重要な情報は、== ではなく === を使うのが基本です。
  • 実際のシステムではもっと複雑な仕組みになりますが、「文字列の一致判定」という基本はこの形で押さえられます。

ログイン判定プログラム(条件を組み合わせる)

最後に、「ログイン判定」をテーマに、論理演算子 &&|| をしっかり使ってみます。

ログイン判定の考え方

例として、次のようなルールにしてみます。

  • ユーザー名が正しい
  • かつ パスワードが正しい

この2つがそろったときだけ「ログイン成功」とします。

// login-check.ts
// ログイン判定プログラム(学習用)

// 1. 正しいユーザー名とパスワードを用意する
const correctUserName: string = "alice";
const correctPassword: string = "secret123";

// 2. 入力されたユーザー名とパスワード(仮の値)
let inputUserName: string = "alice";     // ここを "bob" に変えてみる
let inputPassword: string = "secret123"; // ここを "wrong" に変えてみる

console.log("入力されたユーザー名:", inputUserName);
console.log("入力されたパスワード:", inputPassword);

// 3. ユーザー名とパスワードが両方正しいかどうかを判定する
let isUserNameCorrect: boolean = inputUserName === correctUserName;
let isPasswordCorrect: boolean = inputPassword === correctPassword;

if (isUserNameCorrect && isPasswordCorrect) {
  console.log("ログイン成功です。");
} else if (!isUserNameCorrect && isPasswordCorrect) {
  console.log("ユーザー名が間違っています。");
} else if (isUserNameCorrect && !isPasswordCorrect) {
  console.log("パスワードが間違っています。");
} else {
  console.log("ユーザー名とパスワードの両方が間違っています。");
}

// 4. 三項演算子で簡易ログインメッセージを作る
let loginMessage: string =
  isUserNameCorrect && isPasswordCorrect ? "ログインOK" : "ログインNG";

console.log("ログイン判定ラベル:", loginMessage);
TypeScript

重要ポイント:

  • isUserNameCorrect && isPasswordCorrect という条件が、「両方正しいときだけ true」という形になっています。
  • !isUserNameCorrect のように、! を使って「間違っているかどうか」を表現しています。
  • 条件を分解して isUserNameCorrect / isPasswordCorrect という変数にしておくと、コードの意図が読みやすくなります。

練習用まとめテンプレート

最後に、今日の練習テーマをひとつのファイルにまとめたテンプレートを用意します。 これをベースに、値や条件をいろいろ変えながら遊んでみてください。

// day4-practice.ts
// Day 4 練習まとめ:合格判定・偶数/奇数・年齢・パスワード・ログイン

console.log("=== 合格判定 ===");

let score: number = 75;
console.log("点数:", score);

if (score >= 60) {
  console.log("合格です!");
} else {
  console.log("不合格です。");
}

let resultLabel: string = score >= 60 ? "合格" : "不合格";
console.log("判定ラベル:", resultLabel);

console.log("\n=== 偶数・奇数判定 ===");

let n: number = 7;
console.log("判定対象の数値:", n);

if (n % 2 === 0) {
  console.log("偶数です。");
} else {
  console.log("奇数です。");
}

let parityLabel: string = n % 2 === 0 ? "偶数" : "奇数";
console.log("偶奇ラベル:", parityLabel);

console.log("\n=== 年齢判定 ===");

let age: number = 18;
console.log("年齢:", age);

if (age < 13) {
  console.log("子どもです。");
} else if (age < 20) {
  console.log("ティーンエイジャーです。");
} else {
  console.log("大人です。");
}

let adultLabel: string = age >= 20 ? "成人" : "未成年";
console.log("成人判定ラベル:", adultLabel);

console.log("\n=== パスワード判定 ===");

const correctPassword: string = "secret123";
let inputPassword: string = "secret123";

console.log("入力されたパスワード:", inputPassword);

if (inputPassword === correctPassword) {
  console.log("パスワードが正しいです。");
} else {
  console.log("パスワードが間違っています。");
}

let passwordMessage: string =
  inputPassword === correctPassword ? "認証成功" : "認証失敗";
console.log("パスワード判定メッセージ:", passwordMessage);

console.log("\n=== ログイン判定 ===");

const correctUserName: string = "alice";
let inputUserName: string = "alice";
inputPassword = "secret123";

console.log("入力されたユーザー名:", inputUserName);
console.log("入力されたパスワード:", inputPassword);

let isUserNameCorrect: boolean = inputUserName === correctUserName;
let isPasswordCorrect: boolean = inputPassword === correctPassword;

if (isUserNameCorrect && isPasswordCorrect) {
  console.log("ログイン成功です。");
} else if (!isUserNameCorrect && isPasswordCorrect) {
  console.log("ユーザー名が間違っています。");
} else if (isUserNameCorrect && !isPasswordCorrect) {
  console.log("パスワードが間違っています。");
} else {
  console.log("ユーザー名とパスワードの両方が間違っています。");
}

let loginMessage: string =
  isUserNameCorrect && isPasswordCorrect ? "ログインOK" : "ログインNG";
console.log("ログイン判定ラベル:", loginMessage);
TypeScript

Day 4のまとめ

Day 4では、演算子と条件分岐を使って、

  • 合格判定
  • 偶数/奇数判定
  • 年齢判定
  • パスワード判定
  • ログイン判定

という、実際の場面をイメージしやすいプログラムを作りました。 どれも「数値や文字列を比べて」「条件によってメッセージを変える」という、プログラミングの基本的な“思考パターン”が詰まっています。

タイトルとURLをコピーしました