変数を宣言する際に以前はvarを使用していましたが、JavaScriptのバージョンアップに伴って、今後はは「let」または「const」になっていくと聞いたことがあったので、「var」は使用しないようにしていました。
ですが、パラパラマンガを作成する過程で変数宣言の「var」は必要不可欠であったお話をします。
早速ですが、以下のように変数宣言を「let」で行いました。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-ui.css">
<script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-min.js"></script>
<script type="text/javascript" src="https://lifeinfo-navi.com\wp-content\themes\the-thor-child\para\jquery-ui.js"></script>
<style>
.img-frame{
width:100%;
}
</style>
</head>
<body>
<div class="img-frame">
<img id="imagePlace" src="https://lifeinfo-navi.com/wp-content/uploads/2022/02/1.png"/>
<p></p>
<div id="slider" style="width:100%;"></div>
</div>
<p></p>
<button id="moveOn">▶</button>
<button id="Return">◀</button>
<p></p>
<script type="text/javascript">
let index = 1;
// img要素を取得する
//var img = document.getElementById("imagePlace");
let img = document.getElementById("imagePlace");
var maximg = 5;//画像の枚数
// moveOnの設定
document.getElementById("moveOn").onclick = function(){
index++;
$( "#slider" ).slider( "value", index );
if(index>maximg){ //画像の枚数を指定する。
index=1
$( "#slider" ).slider( "value", index );
}
img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
}
// Returnの設定
document.getElementById("Return").onclick = function(){
index--;
$( "#slider" ).slider( "value", index );
if(index<1){ //画像の枚数を指定する。
index=maximg;
$( "#slider" ).slider( "value", index );
}
img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
}
//スライダー #jquery UI
$(function() {
let index = 1;
let img = document.getElementById("imagePlace");
$('#slider').slider({
min: 1,
max: maximg,
step: 1,
value: 1,
slide: function(event, ui) {
index = ui.value;
//let aaa = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
img.src = "https://lifeinfo-navi.com/wp-content/uploads/2022/02/" + index + ".png";
//$('#imagePlace').val(aaa);
//console.log(aaa)
}
});
});
</script>
</body>
</html>実行結果
スライダーを動かした後に、コマ送りを行うと「変数のindex」がうまく引き継いでいないことがわかります。（＊タッチパネルでの操作ではスライダーを動かせません）
なぜならletやconstは「 ブロックスコープ」だからです。
「スコープ」は変数、 定数および引数が有効な範囲(いつ、どこで定義されていると見なされるか、どこで値を参照したり変えたりできるのか)を決めるものです。（中略）
「スコープ」は、「現在実行中のプログラムの部分 (実行コンテキスト)で見えていてアクセスできる識別子の集合」 と見ることもできます。
ブロックスコープはfor文やif文、関数内でのみ変数が参照可能になります。
今回は別々の関数内に変数indexを使用していたため、それぞれの関数で実行したindexが参照されませんでした。
変数がfor文やif文、関数内の中に入っていても、変数を引き継がせるためには「グローバルスコープ」を利用するとうまくいきそうです。
グローバルスコープは、「JavaScript ファイルのトップレベル、またはHTMLファイルのscriptタグの直下に記述したコード」内で、「var を使って定義された変数や関数」または 「関数宣言 (function () { ...})によって定義された関数」 が属するスコープです。
グローバルスコープに配置された変数や関数は、コードのどこからでも参照可能な状態になります。
上記のコードの25行目の変数宣言を「let」→「var」に変更し、55行目のを削除するとうまくパラパラ漫画がうごくようになりました。
うまく動作させることができました。