条件分岐・演算子

演算子

演算子とは、プログラミングで使用できる記号のことです。
算術演算子、 代入演算子、 比較演算子、 論理演算子など難しそうな単語ではありますが、中身は簡単なので安心してください。
名前を覚えたりするより、使い方になれる方が重要なので、実際に書いて確認してみましょう。

それぞれを表にまとめると以下のような感じです。

演算子 説明 例
算術演算子 算数で使う「足し算」「引き算」と同じようなものです 1 + 2、 10 – 5
代入演算子 「=」を使って、右辺を左辺に代入します let name = “hoge”;
比較演算子 左辺と右辺の値を比較する演算子です 10 < 15、10 === 10
論理演算子 ANDやORを使って条件を指定します x === 10 && y === 20

それでは、一つずつ詳しく見ていきます。

算術演算子

算数で出てくる記号の使い方と同じように計算することができます。

  • 足し算（+）
  • 引き算（-）
  • 掛け算（*）
  • 割り算（/）
  • 剰余（%）割り算の余りが求められます

それでは、実際に演算子を使ってみましょう

//num1とnum2の計算した結果をresultに入れるためにそれぞれ変数を用意します。
let num1 = 10;
let num2 = 4;
let result;
//足し算
result = num1 + num2;
console.log(result);
//引き算
result = num1 - num2;
console.log(result);
//掛け算
result = num1 * num2;
console.log(result);
//割り算
result = num1 / num2;
console.log(result);
//剰余
result = num1 % num2;
console.log(result);

ちなみに、この+は 文字列 や 変数 を結合する時にも使用できます。

//文字列の結合の例
//HelloとWorldに空白を入れたいときは、Helloの直後か、Worldの直前にスペースを入れてください
console.log('Hello ' + 'World');
//変数の結合の例
let lastName = '田中';
let firstName = '一郎';
let fullName = lastName + firstName;

console.log(fullName);

「++」「--」を使うと、
自分自身に1を足したり,1を引いたりすることができます。

let x = 10;
x++;
console.log(x);  //11
let y = 10;
y--;
console.log(y);  //9

「++」を インクリメント 、「--」を デクリメント と言います。

代入演算子

代入演算子に関しては「変数、定数」で行った変数の話と同じで、「 右辺を左辺に入れる 」というものです。

//左辺のnameに、右辺のhogeを代入する
let name = "hoge";

比較演算子

文字通り比較を行う演算子のことです。
記号は「=」「<」「>」を使用して、両辺の値の比較を行います。

使用例 意味
A === B AとBは等しい場合
A !== B AとBが等しくない場合
A > B BがA未満の場合
A >= B AがB以上の場合
A < B AがB未満の場合
A <= B AがB以下の場合

それでは、実際に例を見てみましょう

console.log(10 === 10); //true        「両辺が等しい」という条件 → 正しいのでtrue
console.log(10 === 5); //false        「両辺が等しい」という条件 → 正しくないのでfalse
console.log(10 !== 5); //true        「10と5は等しくない」という条件 → 正しいので true
console.log(10 > 20); //false        「10と20を比べて、10の方が大きい」という条件 → 正しくないのでfalse
console.log(10 <= 10); //true        「左辺の10は右辺の10という値以上か」という条件 → 正しいのでtrue

console.log('10' === 10); //false
console.log('10' == 10); //true

最後の2行に注目してください。
イコール記号2つと3つの書き方があります。
「==」は 等価演算子 というもので、値が等しいかどうかの判定だけ行います。
「===」は 厳密等価演算子 というもので、値の「 型 」も等しいかどうかまで判定します。

今回の例で言うと、 console.log('10' === 10); は 文字列の10 と 数値の10 のように別の型同士を比べているので、
等しくないと判断されて、falseになっています。

「==」でも比較は可能なのですが、思いもよらないところでエラーが出たりするので、
特別な理由がない限りは厳密等価演算子の「===」を使用することをお勧めします。

※論理演算子は次の「条件分岐」で解説します。↓↓

条件分岐

いわゆる、if文というものですね。「もし◯◯なら、△△をする。◯◯じゃなかったら、××をする」というように条件によって、処理を分けていく手法です。
プログラミングでは、ほぼ確実に使用する技です。
if文を使いこなせるようになると、出来る幅がかなり広がってくるので、頑張って見ていきましょう!

基本の形

if文の構成は以下の通りです

if (条件) {
    条件が正しいときの処理
} else {
    条件が正しくなかったときの処理
}

それでは、if文を使って 「70点以上」という条件なら合格、「それ以外」という条件なら不合格 というように出力を振り分けてみましょう。
先にJavaScriptで書いた形を載せておきます。

let score = 90;
if (score >= 70) {
    console.log('合格');
} else {
    console.log('不合格');  
}

解説
①1行目の let score = 90; でscoreが90点に決まります。
② if (score >= 70) で、score（90）は70より大きいので、 {} の処理に入ります。
③ ②が正しくなかった場合、 else の処理に入ります。（今回は入らないのでelseの処理は無視）

試しに、1行目の90を60に変更してみましょう。
すると、else の処理に入るので「不合格」と表示されるはずです。

処理の流れをフローチャート図で見ると以下のような感じです。(今回の例は右側の図です)

else if

if文では、 else if を使っていくつでも条件を追加することができます。
elseで「それ以外の全て」という条件にするのではなく、もっと細かく指定したい時に使います。
else ifは「もし◯◯なら、△△をする。〇〇じゃなくて、××だったら□□」と指定することができます。

例えば、先ほどの例に else if を使って、 「70点以上じゃなくて、0点だったら」という条件を追加してみましょう。

let score = 60;
if (score >= 70) {
    console.log('合格');
} else if(score === 0){
    console.log('0点はまずいです...');  
} else {
    console.log('不合格'); 
}

解説
①1行目の let score = 60; でscoreが60点に決まります。
② if (score >= 70) で、scoreが70点以上というのが正しくないので、すぐ下の合格を出力する {} の処理には入りません。
③ ②が正しくなかったので、次は else if の条件の判定です。60 === 0は成り立たないので、今回も次の処理を飛ばします。
④ else まで来たので、今までの条件に当てはまらなかった全てのものがここにたどり着きます。 else の処理が実行されて「不合格」が出力されます。

試しに、1行目の60を0に変更してみましょう。
すると、 else if の処理に合致するので「0点はまずいです…」と表示されるはずです。

論理演算子

より複雑な条件を作りたい時に「演算子」のところで出てきた「論理演算子」を使います。

演算 演算記法 説明
AND 演算 A && B AとB両方の条件を満たす場合に true
OR 演算 A || B AまたはBどちらかの条件を満たす場合に true
NOT 演算 A != B AがBでない場合に true

if文でよく使われる表現の方法

if文の条件に指定したいけど、どのように書けば良いかわかりにくそうな表現について載せておきます。

1. 特定の範囲の数値を条件にしたいとき

例えば「 変数aが10〜20の時 」という条件を作りたい場合です。
「10以上（a >= 10）」と「20以下(a <= 20)」という二つの条件を && で繋ぐという考え方で表現出来ます。

//うまく「15」が出力されたら、条件がtrueだった証拠です。
let a = 15;
if (a >= 10 && a <= 20) {
    console.log(a);  
}
2.偶数か奇数の判定

偶数か奇数の判定は、対象の変数を2で割った時の余りが0なら 偶数。そうでなければ 奇数 と判断できます。
具体的には以下のように書きます。

偶数 : a % 2 === 0
奇数 : a % 2 !== 0

let a = 10;
let b = 15;
//偶数の条件式
if (a % 2 === 0) {
    console.log(a);
}
//奇数の条件式
if (b % 2 !== 0) {
    console.log(b);
}

課題

理解度チェック
JavaScript→1-3というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。

問1：次の条件を、論理演算子を使って表してください。
・変数aは10ではない
・変数bは10以上20未満、かつ偶数である。

問2：以下の条件を満たすように、記述してください
・変数xが、10〜20の値だった場合「成功です」と出力される
・それ以外は「失敗です」と出力される
・変数xには、最初に10を入れておいてください

問3：以下の条件を満たすように、記述してください
・変数yが偶数なら「偶数です」と出力される
・変数yが奇数なら「奇数です」と出力される
・変数yには、最初に0を入れておいてください

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami