完全無料のJavaScript学習講座 4日目：演算子と制御構造

足し算は、2つの数値を足すために使われる演算子です。

プラス記号（+）を使って表現されます。

let x = 3; //変数xを宣言し、変数xに3を代入
let y = 4; //変数yを宣言し、変数yに4を代入
let sum = x + y; //変数xと変数yを足し算している（3+4）
console.log(sum);//3+4の結果の7が出力される

変数sumは、”summation”（合計）の略で、数値の足し算を意味します。

引き算は、1つの数値から別の数値を引くために使われる演算子です。

マイナス記号（-）を使って表現されます。

let x = 5; //変数xを宣言し、変数xに5を代入
let y = 3; //変数yを宣言し、変数yに3を代入
let diff = x - y; //変数xから変数yを引いている（5-3）
console.log(diff);//5-3の結果の2が出力される

変数diffは、 “difference”（差分）の略で、数値の引き算を意味します。

掛け算は、2つの数値をかけ合わせるために使われる演算子です。

アスタリスク（*）を使って表現されます。

let x = 4; //変数xを宣言し、変数xに4を代入
let y = 3; //変数xを宣言し、変数xに3を代入
let mul = x * y; //変数xに変数yを掛けている（4*3）
console.log(mul);//4*3の結果の12が出力される

変数mulはmultiply（乗算）の略で、数値の掛け算を意味します。

割り算は、1つの数値を別の数値で割るために使われる演算子です。

スラッシュ（/）を使って表現されます。

let x = 10; //変数xを宣言し、変数xに10を代入
let y = 2; //変数xを宣言し、変数xに2を代入
let div = x / y; //変数xを変数yで割っている（10/2）
console.log(div);//10/2の結果の5が出力される

変数divは、”division”（除算）の略で、数値の割り算を意味します。

あまりを求める演算子は、1つの数値を別の数値で割ったときの余りを求めます。

パーセント記号（%）を使って表現されます。

let x = 7; //変数xを宣言し、変数xに7を代入
let y = 3; //変数xを宣言し、変数xに3を代入
let mod = x % y; //変数xを変数yで割ったあまりを計算している（7%3）
console.log(mod);//7%3の結果の1が出力される

変数modは、”modulus”（剰余）の略で、ある数値を別の数値で割ったときの余りを意味します。

左辺と右辺が等しいとき、結果はtrueになり、等しくないときはfalseになります。

console.log(5 == 5); // true
console.log(5 == 6); // false

このコードでは、イコールを挟んで左側と右側を比較しています。

1行目では5と5を比較しているため、結果はtrue(等しい）となり、2行目では5と6を比較してfalse（等しくない）という結果が表示されます。

左辺と右辺が等しくないとき、結果はtrueになります。

console.log(5 != 5); // false
console.log(5 != 6); // true

このコードでは、ノットイコールを挟んで左側と右側を比較しています。

1行目では5と5を比較しているため、結果はfalse（等しくない）となり、2行目では5と6を比較してtrue(等しい）という結果が表示されます。

== との違いは、== が比較したときに左右が等しい場合にtrue（正しい）という結果を返すのに対して、!= では、左右が正しくないときにtrue（正しい）と返すのが特徴です。

左辺が右辺より大きいとき、結果はtrueになります。

console.log(5 > 4); // true
console.log(5 > 5); // false

このコードでは、> を挟んで左右を比較しています。

1行目では5と4を比較して、4より5のほうが大きいので、true（正しい）という結果になります。

2行目では、5と5を比較して、左辺と右辺が等しくなってしまっているので、false（正しくない）という結果になります。

>は、後述する< と同じく左右を比較しているものの、左辺が右辺より大きいかどうかを判断基準としています。

左辺が右辺より小さいとき、結果はtrueになります。

console.log(5 < 6); // true
console.log(5 < 5); // false

このコードでは、<を挟んで左右を比較しています。

1行目では5と6を比較して、6より5のほうが小さいので、true（正しい）という結果になります。

2行目では、5と5を比較して、左辺と右辺が等しくなってしまっているので、false（正しくない）という結果になります。

< は、前述した> と同じく左右を比較しているものの、左辺が右辺より小さいかどうかを判断基準としています。

左辺が右辺以上のとき、結果はtrueになります。

console.log(5 >= 5); // true
console.log(5 >= 6); // false

このコードでは、>= を挟んで左右を比較していますが、条件が2つあります。

一つは左辺と右辺が等しいかどうか、もう一つは左辺が右辺より大きいかどうかです。

ですので、1行目の5と5を比較した際、等しいのでtrueという結果になっています。

「以上」というのは、その数値も含むため、「5以上」の場合は5とそれより大きな数値の両方が含まれます。

左辺が右辺以下のとき、結果はtrueになります。

console.log(5 <= 5); // true
console.log(5 <= 4); // false

このコードでは、<= を挟んで左右を比較していますが>=と同じく条件が2つあります。

一つは左辺と右辺が等しいかどうか、もう一つは左辺が右辺より小さいかどうかです。

ですので、1行目の5と5を比較した際、等しいのでtrueという結果になっています。

「以下」というのは、その数値も含むため、「5以下」の場合は5とそれより小さな数値の両方が含まれます。

&&は、両方の条件が真（true）である場合に真（true）を返します。どちらか一方でも偽（false）であれば、結果は偽（false）になります。

let age = 18; //変数ageを宣言し、18を代入
let hasLicense = true; //変数hasLicenseを宣言し、trueを代入

if (age >= 18 && hasLicense) {
  console.log("運転できます");
} else {
  console.log("運転できません");
}

この例では、ageが18以上であり、かつhasLicenseが真（true）である場合、運転できると表示されます。

1行目で、変数ageに18を代入しています。年齢という箱に18歳という中身を入れたわけです。

2行目では、変数hasLicenseにtrueを代入しています。これは「免許を持っている」という箱にtrue（持っている）という中身を入れています。

if (age >= 18 && hasLicense) 

このコードで、年齢が18以上、かつ免許を持っているという条件をつけています。

if文については後述しますが、全体を見ると、

「もし、18歳以上で免許を持っている場合」「運転できます」と出力されるわけです。

2つの条件が片方でもtrueじゃなければ、この式は成立しないため、「運転できません」と出力されます。

||は、どちらか一方または両方の条件が真（true）であれば、真（true）を返します。

両方の条件が偽（false）である場合のみ、結果は偽（false）になります。

let isRaining = false;
let hasUmbrella = true;

if (isRaining || hasUmbrella) {
  console.log("外に出られます");
} else {
  console.log("外に出られません");
}

この例では、isRainingが偽（false）でも、hasUmbrellaが真（true）であれば、外に出られると表示されます。

この式では雨が降っているかどうか、傘を持っているかどうかを確認しています。

雨が降っていても、傘を持っていれば、結果はtrueとなり、外に出られます。逆もしかりです。

この場合、外に出られませんと表示されるのは、雨が降っていて、傘を持っていない場合のみになります。

!は、条件が真（true）であれば偽（false）を、偽（false）であれば真（true）を返します。

条件の真偽を逆にする効果があります。

let isRaining = false;

if (!isRaining) {
  console.log("雨が降っていません");
} else {
  console.log("雨が降っています");
}

この例では、isRainingが偽（false）であるため、!isRainingは真（true）となり、「雨が降っていません」と表示されます。

let weather = "晴れ"; //変数weatherに晴れを代入

if (weather === "晴れ") { //変数weatherが晴れかどうかをチェック
  console.log("外で遊ぶ");//変数weatherが晴れならこの行が出力される
} else {
  console.log("家で遊ぶ");//変数weatherが晴れじゃない場合この行が出力される
}

このプログラムでは、weather変数が”晴れ”と等しい場合、console.log("外で遊ぶ");が実行され、そうでない場合はconsole.log("家で遊ぶ");が実行されます。

複数の条件をチェックする場合はelse if文を使うことができます。

例えば、次のようなプログラムが考えられます。

let score = 80; //変数scoreに80という数値を代入

if (score >= 90) { //scoreが90以上かどうか変数scoreと比較
  console.log("優秀"); //scoreが90以上ならこの行が出力される
} else if (score >= 70) { //scoreが70以上かどうか変数scoreと比較
  console.log("良い"); //scoreが70以上ならこの行が出力される
} else if (score >= 50) {//scoreが50以上かどうか変数scoreと比較
  console.log("普通"); //scoreが50以上ならこの行が出力される
} else {
  console.log("不合格");//scoreが50未満ならこの行が出力される
}

このプログラムでは、score変数の値によって、「優秀」、「良い」、「普通」、「不合格」のいずれかが表示されます。

forループは、決まった回数の繰り返しを実行する場合に使われます。

for (初期化; 条件式; 更新) {
  // 繰り返し実行される処理
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

この例では、変数iが0から始まり、iが5未満の間、繰り返し処理が実行されます。

iはループごとに1ずつ増加し、最終的に0から4までの数字が表示されます。

whileループは、ある条件が真（true）である間、繰り返し処理を実行します。

while (条件式) {
  // 繰り返し実行される処理
}

let num = 0;
while (num < 5) {
  console.log(num);
  num++;
}

この例では、変数numが5未満の間、繰り返し処理が実行されます。

numはループごとに1ずつ増加し、最終的に0から4までの数字が表示されます。

do-whileループは、条件をチェックする前に、繰り返し処理が少なくとも1回実行されるループです。

条件が偽（false）でも、最初の1回は必ず実行されます。

do {
  // 繰り返し実行される処理
} while (条件式);

let num = 0;
do {
  console.log(num);
  num++;
} while (num < 5);

この例でも、変数numが5未満の間、繰り返し処理が実行されます。numはループごとに1ずつ増加し、最終的に0から4までの数字が表示されます。