質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

569閲覧

生成/取得した要素を定数に代入する理由

koala.engineer

総合スコア4

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

0クリップ

投稿2022/10/01 05:15

編集2022/10/01 15:46

実現したいこと

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 定数 代入 理由」等と検索しました。

「定数宣言をすると再代入が不可能になるから」
のような検索結果が殆どでしたが、知りたい内容とは異なっています。

「変数ではなく定数を使用する理由」ではなく、
「代入が必要な理由」が知りたい為です。

その為、こちらで質問させて頂くことに致しました。

Cocode👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

ka2obushi

総合スコア173

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koala.engineer

2022/10/01 06:37

ka2obushi様 丁寧に解説して頂きありがとうございます! 定数が必要な理由についてよく理解できました。 また、定数を必要としない場合の書き方もご教示頂き、 これまで見てきた定数が無いコードについてやっと理解できました...! 本当にありがとうございます!!
guest

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
Cocode

総合スコア2314

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koala.engineer

2022/10/01 06:41

Cocode様 ご回答頂きありがとうございます! 知りたいと思っていた範囲を超えて、 非常に丁寧に解説をして頂き頭が上がりません...! 今回教えて頂いたことを思い出しながら、 毎日の学習に臨みたいと思います。 重複となりますが、 本当にありがとうございました!!
Cocode

2022/10/01 06:46

お役に立ててよかったです…! koala.engineer様はおそらくはじめての質問投稿だと思うのですが、非常に分かりやすい質問内容と努力の結果が見られていて、かなり好印象でした。 これからも一緒にプログラミングの勉強頑張っていきましょう〜!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問