質問編集履歴
4
「試してみたこと」の追加
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
コードの追加
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
文法修正
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
|
-
|
|
46
|
+
document.getElementById("main");
|
|
16
47
|
main.src = images[currentIndex];
|
|
17
48
|
|
|
18
49
|
images.forEach(image => {
|
|
19
|
-
|
|
50
|
+
document.createElement("img");
|
|
20
51
|
img.src = image;
|
|
21
52
|
});
|
|
22
53
|
```
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
### 該当のソースコード
|
|
26
|
-
|
|
27
|
-
```javascript
|
|
28
|
-
//正解のコード
|
|
29
|
-
{
|
|
30
|
-
|
|
54
|
+
事実、最後の行で.thumbnailsクラスを取得する際は定数への代入はされていません。
|
|
31
|
-
|
|
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
誤字修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
生成/取得した要素を定数に代入する
|
|
1
|
+
生成/取得した要素を定数に代入する理由
|
test
CHANGED
|
File without changes
|