プログラム特有の演算子。プログラム学ぶ上で代入に続き、第2の壁になる
部分です。
まずは、プログラムを見てみましょう。
|
1 2 3 4 5 6 7 |
var FirstValue = 100; var SecondValue = 200; FirstValue += SecondValue; console.log(FirstValue); console.log(SecondValue); |
「+=」この演算子です。
これは書き間違いではないです。ちゃんと意味があるんです。
この演算子が理解できず、プログラムの学習を挫折する人は少なくないようです。
確認のため、実行してみましょう。
FirstValueは300、SecondValueは200が出力されますね。
「+=」演算子の動作について、処理の内容を確認しましょう。
演算子が２つ使用されているので、分けて考えましょう。
- ＋は加算
- =は代入（左の変数に右の値を入れる）
つまり+=は「 加算の結果を代入しなさい」という意味になります。
「+=」の演算子を別の書き方をすると下記のようになります。
|
1 |
FirstValue = FirstValue + SecondValue; |
最初から上のように書けばいいと思うかもしれませんが、
プログラムを見やすくするために+=を使いことが多いです。
この部分はプログラムに慣れていない方にとっては違和感を感じる部分になるのでゆっくり理解していきましょう。
ちなみに、+=, -=だけでなく、*= , /=についても同じような処理が行われます。
では、次はどのようにな結果になるでしょうか。
|
1 2 3 |
var Value = 1; Value -= Value; console.log(Value); |
考え方は先ほどのものと同じで、結果は0です。
わかりやすく書き換えると以下のようになります。
|
1 |
Value = Value - Value; |
Valueの減算の結果をValueに代入する処理となります。
前置、後値の演算処理
前回の授業でチラッと紹介したもので、変数の前後に置かれる、プラス、またはマイナスの演算子を二つ並べたものです。
処理としては単純で、変数に入った数値を+1または-1します。
＋１をインクリメント、−１をデクリメントと読んだりします。
そして、プラス、マイナスを二つ並べた演算子ですが、変数の前、変数の
後ろ、と書く場所によって処理が変わります。
前に置かれた場合はプログラムがその行を実行する直前に計算されます。
後ろに置かれた場合はプログラムがその行を実行した直後に計算されます。
サンプルです。
サンプル1
|
1 2 3 4 5 6 7 |
var a = 1; alert(a++); //ここでインクリメント、前置なのでまだ1のまま。 //aが2になるので、次で2が表示 alert(a); |
サンプル2
|
1 2 3 |
var b = 1; alert(++b); //alert実行前にインクリメント aは2になった上でアラートを実行 |
次のプログラムは
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//変数の宣言 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>`); |
結果は全て6になりますね。
ここは複雑ですが、次のfor文でも出てくるので、
ここでしっかり覚えておきましょう。
for文（繰り返し処理）
いきなりですが、ここで問題です。
1~100までの数字を全部足すと何になるでしょう。
答えは5050です。
これを先ほど学んだ演算子を用いてプログラムで書いてみましょう。
|
1 2 3 4 5 6 7 8 |
var answer = 0; answer += 1; //0+1 answer += 2; //1+2 answer += 3; //3+3 answer += 4; //6+4 answer += 5; //10+5 <沢山> console.log(answer); |
ちょっと書いてられないです。多すぎます。
そんな時のために、javascriptに関わらず他の言語でも処理を繰り返す処理
があります。今回はその一つである、for文を学びます。
for文の書き方
|
1 2 3 |
for(ループ変数; 繰り返し条件;ループ変数の増減 ){ 繰り返す処理の内容 } |
実際に1~100までを表示するプログラムは下記の通りです。
|
1 2 3 |
for(var i=1; i<101; i++){ //変数Iの初期値は1, Iが101より小さい間実行（つまり100まで）iは11ずつ増やす console.log(i); //Iの値をコンソールに表示 } |
- forの一番左の部分でループ変数iに1を入れて初期化しています。
- forの真ん中の部分でiが101より小さい場合が条件に指定されています。
この条件が満たされるとき繰り返し処理が実施されます。
今回の場合はiが1ずつ増えていくため、100回繰り返し行われます。
iが101になった場合は条件を満たさなくなるため、for文内の繰り返し処理は
実行されません。 - for文の右の部分で1ループ終了後のループ変数の増減が行われます。
今回はループ完了の旅に1ずつiの値が大きくなります。
演習
次のプログラムを実行した場合、x, yの値はそれぞれどのような値が入るでしょうか。
予想ができたら実行して確かめて見ましょう。
|
1 2 3 4 5 6 7 |
var x; var y; x = 3; x *= 5; y = x+2; console.log(x); console.log(y); |
for文で「プログラミングスクールコード」と500回表示させてみよう。
※for文を2つ使って表示させてみてください。
5回くりかえすことを100回くりかえせば500回になりますね！
