この記事の執筆・監修
テクノロジーアンドデザインカンパニー株式会社のCEO。
日本最大級のプログラミング教育のYouTubeチャンネル「キノコード」や、プログラミング学習サービス「キノクエスト」を運営。
著書「あなたの仕事が一瞬で片付くPythonによる自動化仕事術」や、雑誌「日経ソフトウエア」や「シェルスクリプトマガジン」への寄稿など実績多数。
はじめに
こんにちは。キノコードです。
「【5分レッスン】JavaScript超入門コース#09 演算子」について説明します。
演算子とは？
演算子とは、足し算、引き算などの四則演算や2つの値の大小を比較するときに使う記号のことです。
算術演算子
算術演算子からみていきましょう。
算術演算子とは、足し算、引き算、掛け算、割り算などをするための演算子です。
早速、ソースコードを見ていきましょう。
var x = 10;
var y = 2;
console.log(x + y);
console.log(x - y);
console.log(x * y);
console.log(x / y);
console.log(x % y);xという変数に「10」、yという変数に「2」を代入。
このxとyの変数を使って、演算子の役割をみていきましょう。
足し算と引き算はそのままプラスとマイナスです。
掛け算はアスタリスク( * )です。
割り算は、スラッシュ( / )です。
最後に剰余です。剰余とは、割り算の余りのことです。
剰余は、パーセント( % )です。
足し算の結果は「12」、引き算は「8」、掛け算は「20」、割り算は「5」、剰余は「0」になるはずです。
実行して、表示させてみましょう。
予想通りの結果となりました。
関係演算子
次は関係演算子です。
関係演算子とは、2つの値の関係が正しいか正しくないか判断させる演算子のことです。
例えば、「20」という数字は、「10」より大きいです。これを比較することができます。
関係演算子は、次のレッスンで学ぶ条件分岐のif文などでよく使います。
「10 > 2」という意味は、「10」は「2」より大きいという意味です。
これは正しいです。
2つの関係が正しいときには「True」が返ってきます。
コードで試してみましょう。
var x = 10;
var y = 2;
console.log(x > y);xに10、yに2を代入します。
x > yが正しいか試してみます。
実行してみます。
Trueが表示されました。
var x = 10;
var y = 2;
console.log(x < y);「x < y」としたらどうなるでしょうか？
つまり、「10」は「2」より小さいという意味です。
これは誤りです。
正しくないときの「Flase」が返ってきます。
実行してみます。
Falseが表示されました。
var x = 10;
var y = 2;
var z = 10;
console.log(x <= y);
console.log(x >= z);「>」や「<」は大きい、小さいという意味です。数学風にいうと、超えると未満です。
以上、以下の場合は「>=」「<=」を使います。
zという変数に10を代入して、試してみましょう。
xはyより小さいのでFalse
zはxと等価なのでTrueが返ってくるはずです。
実行してみましょう。
予想通りの結果です。
次に、等価についてみていきましょう。
等価とは、2つの値が等しいということです。
等価はイコールが2つです。
等価ではない場合は、エクスクラメーションマークにイコールです。
コードで試してみましょう。
var x = 10;
var y = 2;
console.log(x == y);
console.log(x != y);「10」と「2」は同じではないので、正しくないときの「Flase」が返ってくるはずです。
等価ではないので、こちらは「True」が返ってくるはずです。
実行してみましょう。
それぞれ「False」と「True」が返ってきました。
論理演算子
次は論理演算子についてみていきましょう。
論理演算子とは、複数の条件を判断させる演算子のことです。
日本語でいうと「かつ」とか「または」のことです。英語でいうとandとorです。
and条件は&&が2つ、or条件は縦線の||（パイプライン）が2つです。
「3」と「8」いう数字でみていきましょう。
例えば、「8」という数字は、5以上かつ10以下です。
「3」という数字は、5以上かつ10以下ではないです。
コードで試してみましょう。
var x = 8;
var y = 3;
console.log(x >= 5 && x <= 10);
console.log(y >= 5 && y <= 10);
まずはand条件についてです。
「8」は5以上かつ10以下なので「True」、「3」は5以上かつ10以下ではないので「False」が返ってくるはずです。
実行してみましょう。
それぞれ「True」と「False」が返ってきました。
var x = 8;
var y = 3;
console.log(x == 3 || y == 3);
console.log(x == 1 || y == 1); 次にor条件についてです。
xは3と等しいか、また、yは3と等しいという条件です。
これはyが3なので、後ろの条件が一致します。
Trueが返ってくるはずです。
xは1と等しいか、yは1と等しいという条件も書いてみましょう。
こちらはどちらの条件にも一致しないので、Falseが返ってくるはずです。
実行してみましょう。
予想通りの結果が返ってきました。
代入演算子
次に、代入演算子です。
今まで変数に代入するときに使っていた「=」は代入演算子といいます。
また、代入する時に、足し算や引き算を同時にすることができます。
足し算、引き算などと組み合わせて代入する演算子のことを複合代入演算子といいます。
例えば、xという変数に「10」を足してから、xに代入する方法は、「x += 10」です。
例えば、zにyを足してからzに代入する方法は、「z += y」です。
コードで試してみましょう。
var x = 8;
var y = 12;
var z = 20;
x += 10;
z += y;
console.log(x);
console.log(z);xに8、yに12、zに20を代入して、複合代入演算子を試してみましょう。
xは18となり、zは32となるはずです。
確認してみましょう。
予想通りの結果が返ってきました。
インクリメントとデクリメントという演算子
最後に、インクリメントとデクリメントという演算子を紹介します。
インクリメントは値を「1」増やす演算子です。
インクリメントは「変数名++」と書きます。
例えば、xに「1」増やす書き方は、「x++」です。
これは「x = x+1」と同じ意味です。
デクリメントは、値を「1」減らす演算子です。
デクリメントは「変数名--」と書きます。
例えば、yに「1」を減らす書き方は、「y--」です。
これは「y = y-1」と同じ意味です。
コードで試してみましょう。
var x = 8;
var y = 8;
x++;
y--;
console.log(x);
console.log(y); ここがインクリメントです。
ここがデクリメントです。
それぞれ9と、7が表示されるはずです。実行してみましょう。
予想通りの結果が返ってきました。
KinoCode チャンネル
