質問編集履歴

4

「試してみたこと」の追加

2022/10/01 05:41

投稿

koala.engineer
test CHANGED
File without changes
test CHANGED
@@ -77,3 +77,14 @@
77
77
  ```
78
78
  事実、最後の行で.thumbnailsクラスを取得する際は定数への代入はされていません。
79
79
  定数を定義する/しないの判断基準は何でしょうか。
80
+
81
+ ### 試してみたこと
82
+ 「javascript 定数 代入 理由」等と検索しました。
83
+
84
+ 「定数宣言をすると再代入が不可能になるから」
85
+ のような検索結果が殆どでしたが、知りたい内容とは異なっています。
86
+
87
+ 「変数ではなく定数を使用する理由」ではなく、
88
+ 「代入が必要な理由」が知りたい為です。
89
+
90
+ その為、こちらで質問させて頂くことに致しました。

3

コードの追加

2022/10/01 05:33

投稿

koala.engineer
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,31 @@
2
2
  javascriptで生成/取得した要素を、
3
3
  定数に代入する理由を知りたいです。
4
4
 
5
- ### 正解のコード
5
+ ### 前提
6
+ スライドショーを作成する学習を進めています。
7
+ htmlの`main` `ul`タグの挙動をjavascriptで動的に生成したく、
8
+ コードの書き換えを試みています。(以下に正解のコードを記載します)
9
+ ```html
10
+ <body>
11
+ <main>
12
+ <img id="main" src="img/pic00.png">
13
+
14
+ <ul class="thumbnails">
15
+ <li class="current"><img src="img/pic00.png"></li>
16
+ <li><img src="img/pic01.png"></li>
17
+ <li><img src="img/pic02.png"></li>
18
+ <li><img src="img/pic03.png"></li>
19
+ <li><img src="img/pic04.png"></li>
20
+ <li><img src="img/pic05.png"></li>
21
+ <li><img src="img/pic06.png"></li>
22
+ <li><img src="img/pic07.png"></li>
23
+ </ul>
24
+ </main>
25
+
26
+ <script src="js/main.js"></script>
27
+ </body>
28
+ ```
29
+
6
30
  ```javascript
7
31
  'use strict';
8
32
 

2

文法修正

2022/10/01 05:27

投稿

koala.engineer
test CHANGED
File without changes
test CHANGED
@@ -1,50 +1,55 @@
1
1
  ### 実現したいこと
2
2
  javascriptで生成/取得した要素を、
3
- 定数に代入する判断基準を知りたいです。
3
+ 定数に代入する理由を知りたいです。
4
+
5
+ ### 正解のコード
6
+ ```javascript
7
+ 'use strict';
8
+
9
+ {
10
+ const images = [
11
+ 'img/pic00.png',
12
+ 'img/pic01.png',
13
+ 'img/pic02.png',
14
+ 'img/pic03.png',
15
+ 'img/pic04.png',
16
+ 'img/pic05.png',
17
+ 'img/pic06.png',
18
+ 'img/pic07.png',
19
+ ];
20
+ let currentIndex = 0;
21
+
22
+ const mainImage = document.getElementById('main');
23
+ mainImage.src = images[currentIndex];
24
+
25
+ images.forEach(image => {
26
+ const img = document.createElement('img');
27
+ img.src = image;
28
+
29
+ const li = document.createElement('li');
30
+ li.appendChild(img);
31
+ document.querySelector('.thumbnails').appendChild(li);
32
+ });
33
+ }
34
+ ```
4
35
 
5
36
  ### 質問の内容
6
37
  `document.getElementById` で取得したmain要素、
7
38
  `document.createElement` で生成したimg要素を、
8
39
  それぞれ定数に代入する理由が分からないです。
9
40
 
10
- 下記のように、生成/取得した要素に
41
+ 下記のように、定数を定義せず生成/取得した要素に
11
- 直接src属性をつけられないはなぜしょうか。
42
+ 直接src属性をつけられると考えたのですが、
43
+ 正しい結果が得られませんでした。
12
44
 
13
45
  ```javascript
14
- //自分で考えたコード
15
- const mainImage = document.getElementById("main");
46
+ document.getElementById("main");
16
47
  main.src = images[currentIndex];
17
48
 
18
49
  images.forEach(image => {
19
- const img = document.createElement("img");
50
+ document.createElement("img");
20
51
  img.src = image;
21
52
  });
22
53
  ```
23
-
24
-
25
- ### 該当のソースコード
26
-
27
- ```javascript
28
- //正解のコード
29
- {
30
- const images = [
54
+ 事実、最後の行で.thumbnailsクラスを取得する際は定数への代入はされていません。
31
- "img/pic00.png",
55
+ 定数を定義する/しないの判断基準は何でしょうか。
32
- "img/pic01.png",
33
- "img/pic02.png",
34
- "img/pic03.png",
35
- "img/pic04.png",
36
- "img/pic05.png",
37
- "img/pic06.png",
38
- "img/pic07.png",
39
- ];
40
- let currentIndex = 0;
41
-
42
- const mainImage = document.getElementById("main");
43
- mainImage.src = images[currentIndex];
44
-
45
- images.forEach(image => {
46
- const img = document.createElement("img");
47
- img.src = image;
48
- });
49
- }
50
- ```

1

誤字修正

2022/10/01 05:16

投稿

koala.engineer
test CHANGED
@@ -1 +1 @@
1
- 生成/取得した要素を定数に代入する判断基準
1
+ 生成/取得した要素を定数に代入する理由
test CHANGED
File without changes