【JavaScript】このコードの意味を教えて下さい

お世話になります。

以下のコードはアイコンをクリックしたら
画像を切り替えていくスライドショーのサンプルコードです。

だいたいの意味はわかります。
ですが
「current+=num; //？　
ここの意味がわかりません。

これって「current=num+current;」の意味ですが、
必要ないと思うのですが、、、実際に消去すると動作しません。

クリックしたアイコンがnextなら「1」、
prevなら「-1」されるので配列型のデータの画像の番号が
1個づつスライドされるのはわかります。

ですが「current=num+current;」する理由って何なのでしょうか？
すいませんが、詳しい方、説明の上手な方、
この部分がどういう役割をしているのか教えて下さい。

サンプルコードは以下の通りです。
※HTMLは上の3行だけです。
※JavaScriptはHTMLの範囲内に書いています。

<img src="images/image1.jpg" id="BigImg">
<img src="images/prev.png" id="preId">
<img src="images/next.png" id="nexId">

<script>
var images=['images/image1.jpg', 'images/image2.jpg',
'images/image3.jpg', 'images/image4.jpg', 'images/image5.jpg', ];

var current=0;

var changeImage=function(num){
if(current+num>=0 && current+num<images.length){
current+=num; //？
document.getElementById('BigImg').src=images[current];
}
};

document.getElementById('preId').onclick=function(){
changeImage(-1);
};
document.getElementById('nexId').onclick=function(){
changeImage(1);
};
</script>

No.1 ベストアンサー 回答者： kmee 回答日時： 2019/03/09 06:11

なぜ必要無いと思ったのですか?

プログラムは根拠があって作られています。
加えるにしろ、消すにしろ、そこには「根拠」が必要です。
「なんとなく」でやっていいものではありません。

実際に、その処理の一番肝心な部分です。
それを必要無いと感じてしまったのは、あなたの理解が不十分だった、ということです。
あなたの考えを明確にすることは、間違っているところを明確にすることになり、正しく理解するために役立ちます。



スライドショー等を実現する場合、「現在の状態」を基準に「となり」を求めるのが常套手段です。
このプログラムでは、配列の添字を「現在の状態」として変数currentに記憶しています。
「となり」はcurrentを +1 または -1 することで求められます。
そして、その「となり」が次の「現在の状態」になります。

単に current + num と書いただけでは、current は前のままです。
結果をcurrent に代入しなおす必要があります。




あと、細かいことですが
> current=num+current

これは
current=current+(num)
と考えた方がいいです。
このような複合代入演算子には、他に
-= *= /=
等もあります。

足し算は num+current = current+num なのでいいのですが
引き算は num-current ≠ current-num です(一部の例外の除き)
current-=num が current= num-current なのか current= current-num なのか。間違えて覚えると大変です。

また
a *=b+1
は
a = a * b +1
ではなく
a = a * (b+1)
になります。

この回答へのお礼

解答して頂きありがとうございます。
お礼が遅くなりすいません。

自己解決しました。

>なぜ必要無いと思ったのですか?
↓
ご指摘のとおり「必要ない」と思った理由を説明するために
まとめていたところ自分の勘違いに気が付きました。

今回はコードが長いので「質問が長くなると見にくい」と思い
質問内容を簡潔にしたつもりです。

ですが、肝心の「必要ないと思う理由」が記載されていないと
ご指摘の通り答えようがありません。

今後はコードが長い場合は具体的な質問内容は
捕捉に記載する、etc.、工夫するようにします。

今回は内容がよくわからない状態でアドバイスして頂きありがとうございます。
機会がありましたら、またお願いします。


追記
勘違いの内容。
関数の呼び出しと代入を勘違いしていた。

○：アイコンをクリックしたら「changeImage(関数)」を呼び出して
「-1」か「1」を「num」に代入する。

×：アイコンをクリックしたら「changeImage(変数)」に「-1」か「1」を代入する。

ーーーー

>あと、細かいことですが
> current=num+current

これは
current=current+(num)
と考えた方がいいです。
↓
理屈はわかるのですが、今回は関係ないと思うのですが。

今回は整数の足し算です。
しかもパラメーターを返す時点でプラス側とマイナス側を判定して
両方とも足し算で処理しています。

ここまで気を使う必要はないように思いますが。

ーー

今回は解答して頂きありがとうございます。
機会があれば、またお願いします。

お礼日時：2019/03/09 18:25