Q&A
Cocode様
ご回答頂きありがとうございます！
知りたいと思っていた範囲を超えて、
非常に丁寧に解説をして頂き頭が上がりません...！
今回教えて頂いたことを思い出しながら、
毎日の学習に臨みたいと思います。
重複となりますが、
本当にありがとうございました！！
実現したいこと
javascriptで生成/取得した要素を、
定数に代入する理由を知りたいです。
前提
スライドショーを作成する学習を進めています。
htmlのmain ulタグの挙動をjavascriptで動的に生成したく、
コードの書き換えを試みています。（以下に正解のコードを記載します）
html
1<body> 2 <main> 3 <img id="main" src="img/pic00.png"> 4 5 <ul class="thumbnails"> 6 <li class="current"><img src="img/pic00.png"></li> 7 <li><img src="img/pic01.png"></li> 8 <li><img src="img/pic02.png"></li> 9 <li><img src="img/pic03.png"></li> 10 <li><img src="img/pic04.png"></li> 11 <li><img src="img/pic05.png"></li> 12 <li><img src="img/pic06.png"></li> 13 <li><img src="img/pic07.png"></li> 14 </ul> 15 </main> 16 17 <script src="js/main.js"></script> 18</body>
javascript
1'use strict'; 2 3{ 4 const images = [ 5 'img/pic00.png', 6 'img/pic01.png', 7 'img/pic02.png', 8 'img/pic03.png', 9 'img/pic04.png', 10 'img/pic05.png', 11 'img/pic06.png', 12 'img/pic07.png', 13 ]; 14 let currentIndex = 0; 15 16 const mainImage = document.getElementById('main'); 17 mainImage.src = images[currentIndex]; 18 19 images.forEach(image => { 20 const img = document.createElement('img'); 21 img.src = image; 22 23 const li = document.createElement('li'); 24 li.appendChild(img); 25 document.querySelector('.thumbnails').appendChild(li); 26 }); 27}
質問の内容
document.getElementById で取得したmain要素、
document.createElement で生成したimg要素を、
それぞれ定数に代入する理由が分からないです。
下記のように、定数を定義せず生成/取得した要素に
直接src属性をつけられると考えたのですが、
正しい結果が得られませんでした。
javascript
1 document.getElementById("main"); 2 main.src = images[currentIndex]; 3 4 images.forEach(image => { 5 document.createElement("img"); 6 img.src = image; 7 });
事実、最後の行で.thumbnailsクラスを取得する際は定数への代入はされていません。
定数を定義する/しないの判断基準は何でしょうか。
試してみたこと
「javascript 定数 代入 理由」等と検索しました。
「定数宣言をすると再代入が不可能になるから」
のような検索結果が殆どでしたが、知りたい内容とは異なっています。
「変数ではなく定数を使用する理由」ではなく、
「代入が必要な理由」が知りたい為です。
その為、こちらで質問させて頂くことに致しました。
回答2件
0
質問の内容の部分のサンプルコードはそもそも変数がないので動きません。
varにしろletにしろconstにしろグローバル変数にしろ、何らかの方法で=を書かないと変数はできません。
つまり、document.getElementById("main")を実行しても=がないので変数はできません。
次の行でmain変数を参照していますがmain変数は存在しないのでエラーが起きるでしょう。
変数を作りたくないのなら以下のようにも書けます。
js
1document.getElementById("main").src = images[currentIndex]; 2images.forEach(image => { 3 document.createElement("img").src = image; 4});
変数を作る作らないはコードを書く人が決めることですが、今回のような例で変数を作る大きな理由としてコードの読みやすさがあると思います。
変数を作るということは名前を付けるということで、それが何かという意味をつけることができます。
他の理由としては「同じ行に沢山の処理を書くとわかりづらくなるから」とかですかね。
この例だと.thumbnailsだけ変数に入れておらず一貫性がないですね。この理由はわかりません。
投稿2022/10/01 06:05
総合スコア173
0
ベストアンサー
mainってなんですか？imgってなんですか？？？？？という内容のエラーが出ていると思います！
mainやimgといった名前（正確には、識別子といいます）なんてJavaScriptは知らないのに（変数・定数を宣言していないのに）、その名前（識別子）を指定されて困っています。
.getElementById()や.createElement()の中に書いた'main'と'img'はただの文字列であり、識別子じゃないです。
よく見てください…シングルクォテーション' '使ってます！ただの文字列です。
なので識別子mainと文字列'main'は別物です。
お手本のコードをわかりやすく大文字にしてみました。
javascript
1const MAIN_IMAGE = document.getElementById('main'); 2MAIN_IMAGE.src = images[currentIndex]; 3 4images.forEach(image => { 5 const IMG = document.createElement('img'); 6 IMG.src = image;
#mainの要素とimg要素は、それぞれ1回しか使わないので、別に定数に入れなくてもこのように↓してもいいですが、
javascript
1document.getElementById('main').src = images[currentIndex]; 2 3images.forEach(image => { 4 document.createElement('img').src = image;
視覚的に、どの要素を操作しているのか分かりにくいので、やはり一度定数に入れた方がいいでしょう。
変数・定数は使う前に宣言する！基礎中の基礎の文法です〜〜。
おまけ：どうして変数や定数を使うのか？（代入が必要な理由）
一つは上記で紹介した通り、一旦入れた方が視覚的に分かりやすいよねというふんわりした理由です。
もう一つは繰り返し使う値を便利に管理するためです。
例えば、何か10という値を何かの基準値として繰り返し使うプログラムがあったとします。
javascript
1if (something < 10) { 2 ... 3} else if (something === 10) { 4 ... 5} 6 7myFunction(10); 8 9let calc = 10 * 10
たくさんたくさんいろんなコードを書いた後に、上司やらお客様やらに、「10じゃなくて15に変えておいて！！」と言われたら大変ですよね。
ミスなく修正できる気がしません。
しかし、事前に変数・定数にいれておけば、変数・定数の中身を修正するだけで全てに反映されます。
一例でした。
「視覚的に分かりやすい」というのはコードの読みやすさのことです。
他人が書いたコードを編集する場合、または自分が書いたものだとしても時間が経ってから編集する場合、読みにくいコードだとつらいですよね。
コードは人の手で書かれているので、人によって読みやすい・わかりやすいということも非常に大事です。
これを専門用語（？）というか英語で、
- リーダビリティー（読みやすさ）や
- リーダブルなコード（読みやすいコード）
と言います。
投稿2022/10/01 05:48
編集2022/10/01 06:16
総合スコア2316
お役に立ててよかったです…！
koala.engineer様はおそらくはじめての質問投稿だと思うのですが、非常に分かりやすい質問内容と努力の結果が見られていて、かなり好印象でした。
これからも一緒にプログラミングの勉強頑張っていきましょう〜！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/10/01 06:37