第2回　プログラム特有の演算子を理解しよう

演算子

現在はコンピュータで音楽を聴いたり、映画を見たりゲームをしたりしますが
コンピュータは日本語では電子計算機と呼んでいました。
コンピュータで音楽、映画、ゲームが楽しめるのは、コンピュータ内部で
複雑な計算を行なっているからなんです。
まずは基本的な部分から理解していきましょう。

比較演算子

上の方で実施したif文の条件等に使われるものです。
演算というからには計算結果を返します。
論理演算の計算結果は２種類しかないです。
条件を満たす場合は真（true), 満たさない場合(false)という値となります。
試しにChromeで下記式を打ち込んで実行してみましょう。

1 > 5    //1は5より大きい false
1 < 5    //1は5より小さい true
1 == 5   //1と5は同じ     false
1 == 1   //1と1は同じ     true

1 > 5 //1は5より大きい false

1 < 5 //1は5より小さい true

1 == 5 //1と5は同じ false

1 == 1 //1と1は同じ true

主な論理演算子を下記にまとめますので色々試してみてください

==	右辺と左辺が等しい場合はtrue
!=	右辺と左辺が等しくない場合はtrue
<	左辺が右辺より小さい場合はtrue
<=	左辺が右辺以下の場合はtrue
>	左辺が右辺より大きい場合はtrue
>=	左辺が右辺以上の場合はtrue
===	左辺と右辺の値が等しくてデータ型も同じ場合はtrue
!==	左辺と右辺の値が等しくないか、データ型が異なる場合はtrue

論理演算子

複数の条件を結合してその結果を真（true)又は偽(fale)で表します

&&	左右の式がともに真(true)の場合は真(true)
\|\|	左右のどちらかが真(true)の場合は真(true)
!	式が偽(false)の場合は真(true)

少しわかりにくいので実際に試してみましょう。

100 > 0 && 100 < 0 //　&&の右がfalseなのでfalseになる
100 > 0 || 100 < 0 //  ||の左がtrueなのでtrueになる
100 > 0 && !(100 < 0)  //&&左辺右辺ともにtrueなのでtrueになる

100 > 0 && 100 < 0 //　&&の右がfalseなのでfalseになる

100 > 0 || 100 < 0 // ||の左がtrueなのでtrueになる

100 > 0 && !(100 < 0) //&&左辺右辺ともにtrueなのでtrueになる

おそらくわかりにくいと思います。
簡単な覚え方かわかりませんが、下記イメージです。

&&は左右の式がtrueの場合のみtrueそれ以外はfalse
||は左右のうちどちらかがtrueであればtrue
両方falseでfalse
!はtrueをfalseに、falseをtrueにする（結果を逆にする）

書いてみましたけど結局上の表と同じことを書いていることに気づきました。
これは慣れが肝心なので下記表を埋めてみてください。

左辺と右辺と結果が決まっています。
では、演算子に何を入れると結果が出力されるか考えてみてください。

左辺	論理演算子	右辺	結果
true		true	true
true		false	false
false		frue	false
false		false	false
true		true	true
true		false	true
false		true	true
false		false	false

これだけでは多分理解できないし覚えられないはずなので
ちょっとしたゲームを用意しました。
時間があるときに遊んでみてください。100点目指してね。
ひたすら論理演算

算術演算子

基本的には学校で習ったことのある馴染み深いものばかりかと思いますが、
除算と乗算、余りは見慣れない記号ですので覚えておきましょう。

加算	+
減算	–
乗算	*
除算	/
余り	%
前置加算	++
後置加算	—
前置減算	++
後置減算	—
代入演算	=

前置、後値の演算処理について

変数の前後に置かれる、プラス、またはマイナスの演算子を二つ並べたものです。
処理としては単純で、変数に入った数値を+1または-1するものです。
＋１をインクリメント、−１をデクリメントと読んだりします。
そして、プラス、マイナスを二つ並べた演算子ですが、変数の前、変数の
後ろ、と書く場所によって処理が変わります。
前に置かれた場合はプログラムがその行を実行する直前に計算されます。
後ろに置かれた場合はプログラムがその行を実行した直後に計算されます。
まずは、プログラムを見てみましょう。

var FirstValue = 100;
var SecondValue = 200;

FirstValue += SecondValue;

console.log(FirstValue);
console.log(SecondValue);

var FirstValue = 100;

var SecondValue = 200;

FirstValue += SecondValue;

console.log(FirstValue);

console.log(SecondValue);

「+=」この演算子です。
これは書き間違いではないです。ちゃんと意味があるんです。
この演算子が理解できず、プログラムの学習を挫折する人は少なくないようです。

確認のため、実行してみましょう。
FirstValueは300、SecondValueは200が出力されますね。
「+=」演算子の動作について、処理の内容を確認しましょう。
演算子が２つ使用されているので、分けて考えましょう。

＋は加算
=は代入（左の変数に右の値を入れる）

つまり+=は「加算の結果を代入しなさい」という意味になります。
「+=」の演算子を別の書き方をすると下記のようになります。

FirstValue = FirstValue + SecondValue;

1	FirstValue = FirstValue + SecondValue;

最初から上のように書けばいいと思うかもしれませんが、
プログラムを見やすくするために+=を使いことが多いです。
この部分はプログラムに慣れていない方にとっては違和感を感じる部分になるので
ゆっくり理解していきましょう。
ちなみに、+=, -=だけでなく、*= , /=についても同じような処理が行われます。

では、次はどのようにな結果になるでしょうか。

var Value = 1;
Value -= Value;
console.log(Value);

var Value = 1;

Value -= Value;

console.log(Value);

考え方は先ほどのものと同じで、結果は0です。
わかりやすく書き換えると以下のようになります。

Value = Value - Value;

1	Value = Value - Value;

Valueの減算の結果をValueに代入する処理となります。

前置、後値の演算処理

前回の授業でチラッと紹介したもので、変数の前後に置かれる、プラス、
またはマイナスの演算子を二つ並べたものです。
処理としては単純で、変数に入った数値を+1または-1します。
＋１をインクリメント、−１をデクリメントと読んだりします。
そして、プラス、マイナスを二つ並べた演算子ですが、変数の前、変数の
後ろ、と書く場所によって処理が変わります。
前に置かれた場合はプログラムがその行を実行する直前に計算されます。
後ろに置かれた場合はプログラムがその行を実行した直後に計算されます。
サンプルです。

サンプル1

var  a = 1;

alert(a++);   //ここでインクリメント、前置なのでまだ1のまま。

//aが2になるので、次で2が表示

alert(a);

var a = 1;

alert(a++); //ここでインクリメント、前置なのでまだ1のまま。

//aが2になるので、次で2が表示

alert(a);

サンプル2

var  b = 1;

alert(++b);   //alert実行前にインクリメント aは2になった上でアラートを実行

var b = 1;

alert(++b); //alert実行前にインクリメント aは2になった上でアラートを実行

次のプログラムは

//変数の宣言
 var FirstValue = 5;
 var Answer = 0;

//前置加算(++値)
Answer = ++FirstValue;
document.write(`前置加算(++値)：${Answer}<br>`);

//後置加算(値++)
Answer = FirstValue++;
document.write(`後置加算(値++)：${Answer}<br>`);

//前置減算(--値)
Answer = --FirstValue;
document.write(`前置減算(--値)：${Answer}<br>`);

//後置減算（値--）
Answer = FirstValue--;
document.write(`後置減算(値--)：${Answer}<br>`);