前回記述した、ファイルをアップロードするソースコードを少しいじってmyImageを外の関数からも
参照・代入ができるようにしたかったのですが、ここで少しハマりました。
エラーを見ると、Uncaught TypeError: Assignment to constant variable.at FileReader.reader.onload
かみ砕いてみると「onload内で無効な割り当てがありました。」
一瞬狼狽えましたが、変数の宣言はしていないので間違いなくmyImageに原因があると思いました。
調べてみると、どうやらconstは再代入を許さないらしく、一回初期化をしてしまっているのでもうmyImageには
何も入れられませんという意味を持っていたみたいです。
再代入が許されるのはletとverのみで、こちらは何回も代入することはできますが、何回もアクセスして変数が
目まぐるしく変わるので、メンテンナンスに手こずりそうなので大規模なプロジェクトではやはりconstを
使った方が安全性の面では最良だと感じました。
それでもletは二重の宣言を禁止したりアクセスの幅を狭めたりとconstともそこまで性質は変わらないので、ぎちぎちに
変数のアクセスをしたくないけど安全性を保ったコードを書きたいというかたには向いているかなと感じました。
<script>
const target = document.getElementById('upload');
//window.onloadにアクセスができる
<span style="color: #0000ff;">let myImage = '';</span>
target.addEventListener('change', function (e) {
const getImg = document.getElementById('myImage');
const file = e.target.files[0]
const reader = new FileReader();
reader.onload = function (e) {
getImg.height = 200;
getImg.src = e.target.result;
myImage = getImg.src;
localStorage.setItem('image', myImage);
console.log(myImage);
}
reader.readAsDataURL(file);
}, false);
window.onload = function(){
document.getElementById("submit").addEventListener("click", function(){
console.log(myImage);
alert("ボタンが押されました");
});
}
</script></pre>
<pre>
参考にさせていただいたサイト→varじゃだめなの?? constとletを使おう!
