teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScript得意な方教えて下さい！スコープについて

編集履歴

回答編集履歴

11

テキスト修正

2018/01/27 14:49

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -122,14 +122,20 @@
122
122
 
123
123
  ```
124
124
 
125
-
125
+ 　
126
126
 
127
127
  **2.参考図書**
128
128
 
129
+ 　
130
+
129
131
  蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
130
132
 
131
- 以下の本のレンダリングの章が詳しいです。
133
+ 以下の本
132
134
 
133
135
 
134
136
 
135
137
  [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)
138
+
139
+
140
+
141
+ のレンダリングの章が詳しいです。

10

テキスト修正

2018/01/27 14:49

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  との注記が書かれています。
26
26
 
27
- これについては、以下の mamo@Qiita さんの記事が分かりやすいです。
27
+ これについては、以下の mamo@Qiita さんの記事が周辺情報ふくめ、分かりやすいです。
28
28
 
29
29
 
30
30
 

9

テキスト修正

2018/01/27 11:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -8,21 +8,13 @@
8
8
 
9
9
  `_d.getElementById("test")` が `null` になるものと思われます。
10
10
 
11
- （つまり、 id が "test" のDOM要素がまだ生成されていないうちに、 `<script>`の中のJSが実行されている。）
11
+ つまり、 id が "test" のDOM要素がまだ生成されていないうちに、 `<script>`の中のJSが
12
+
13
+ 実行されてしまっているのです。
12
14
 
13
15
 
14
16
 
15
-
16
-
17
- これについては、以下の mamo@Qiita さんの記事が分かりやすいです。
18
-
19
-
20
-
21
- - [DOMContentLoaded周りの処理を詳しく調べてみました: 1. scriptはHTMLパーサをBlockする](https://qiita.com/mamo/items/ff336b5cc0a1a95e03a7#1-script%E3%81%AFhtml%E3%83%91%E3%83%BC%E3%82%B5%E3%82%92block%E3%81%99%E3%82%8B)
22
-
23
-
24
-
25
- また、MDNでの [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
17
+ MDNでの [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
26
18
 
27
19
 
28
20
 
@@ -31,6 +23,12 @@
31
23
 
32
24
 
33
25
  との注記が書かれています。
26
+
27
+ これについては、以下の mamo@Qiita さんの記事が分かりやすいです。
28
+
29
+
30
+
31
+ - [DOMContentLoaded周りの処理を詳しく調べてみました: 1. scriptはHTMLパーサをBlockする](https://qiita.com/mamo/items/ff336b5cc0a1a95e03a7#1-script%E3%81%AFhtml%E3%83%91%E3%83%BC%E3%82%B5%E3%82%92block%E3%81%99%E3%82%8B)
34
32
 
35
33
 
36
34
 

8

テキスト修正

2018/01/27 11:35

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- また、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
25
+ また、MDNでの [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
26
26
 
27
27
 
28
28
 

7

テキスト修正

2018/01/27 11:01

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -21,6 +21,16 @@
21
21
  - [DOMContentLoaded周りの処理を詳しく調べてみました: 1. scriptはHTMLパーサをBlockする](https://qiita.com/mamo/items/ff336b5cc0a1a95e03a7#1-script%E3%81%AFhtml%E3%83%91%E3%83%BC%E3%82%B5%E3%82%92block%E3%81%99%E3%82%8B)
22
22
 
23
23
 
24
+
25
+ また、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
26
+
27
+
28
+
29
+ > 註: 同期的に実行される Javascript は DOM の解析を一時停止させます。
30
+
31
+
32
+
33
+ との注記が書かれています。
24
34
 
25
35
 
26
36
 

6

テキスト修正

2018/01/27 10:54

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
 
46
46
 
47
- 1.修正案
47
+ **1.修正案**
48
48
 
49
49
 
50
50
 
@@ -116,7 +116,7 @@
116
116
 
117
117
 
118
118
 
119
- 2.参考図書
119
+ **2.参考図書**
120
120
 
121
121
  蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
122
122
 

5

テキスト修正

2018/01/27 10:52

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -48,11 +48,11 @@
48
48
 
49
49
 
50
50
 
51
- 上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
51
+ 上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が
52
52
 
53
- `<script>`の中を実行するというコードを書くのであれば、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
53
+ 完了してから、 `<script>`の中を実行するという意図の明確なコードを書くのであれば、
54
54
 
55
- ハンドラとして実行するようにして、以下のようにすればよいかと思います。
55
+ 以下のように、[DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントのハンドラとして実行するよう修正すればよいと思います。
56
56
 
57
57
 
58
58
 

4

テキスト修正

2018/01/27 10:51

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -40,11 +40,15 @@
40
40
 
41
41
  ---
42
42
 
43
- 追記
43
+ **追記**
44
44
 
45
45
 
46
46
 
47
+ 1.修正案
48
+
49
+
50
+
47
- 1.上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
51
+ 上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
48
52
 
49
53
  `<script>`の中を実行するというコードを書くのであれば、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
50
54
 
@@ -112,7 +116,9 @@
112
116
 
113
117
 
114
118
 
119
+ 2.参考図書
120
+
115
- 2.蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
121
+ 蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
116
122
 
117
123
  以下の本のレンダリングの章が詳しいです。
118
124
 

3

テキスト修正

2018/01/27 10:49

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -32,14 +32,6 @@
32
32
 
33
33
 
34
34
 
35
- 蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
36
-
37
- 以下の本のレンダリングの章が詳しいです。
38
-
39
-
40
-
41
- [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)
42
-
43
35
 
44
36
 
45
37
  以上参考になれば幸いです。
@@ -52,9 +44,9 @@
52
44
 
53
45
 
54
46
 
55
- 当該のHTMLに書かれているDOMの生成が完了してから、
47
+ 1.上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
56
48
 
57
- `<script>`の中を実行するようにしたいのであれば [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
49
+ `<script>`の中を実行するというコードを書くのであれば、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
58
50
 
59
51
  ハンドラとして実行するようにして、以下のようにすればよいかと思います。
60
52
 
@@ -117,3 +109,13 @@
117
109
  </html>
118
110
 
119
111
  ```
112
+
113
+
114
+
115
+ 2.蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
116
+
117
+ 以下の本のレンダリングの章が詳しいです。
118
+
119
+
120
+
121
+ [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)

2

テキスト修正

2018/01/27 10:48

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  追記で掲載されたソースですと、 `<body id="test"></body>` が解析されてDOMに展開される**前に**、
6
6
 
7
- `<script>・・・</script>`　が評価されるので、
7
+ `<script>・・・</script>`　タグの中にある JSが評価されるので、
8
8
 
9
9
  `_d.getElementById("test")` が `null` になるものと思われます。
10
10
 
@@ -24,9 +24,9 @@
24
24
 
25
25
 
26
26
 
27
- ご質問のコードに戻りますと、
27
+ ご質問のコードに戻りますと、とりあえずの対応として、`<script>・・・</script>` を
28
28
 
29
- 試しに、`<script>・・・</script>` を `</body>`(bodyの**閉じ**タグ） の直後あたりに移動すると、
29
+ `</body>`(bodyの**閉じ**タグ） の直後あたりに移動すると、
30
30
 
31
31
  ご質問にあるエラーは出なくなると思います。
32
32
 
@@ -52,7 +52,7 @@
52
52
 
53
53
 
54
54
 
55
- 解決方法のひとつとしては、当該のHTMLに書かれているDOMの生成が完了してから、
55
+ 当該のHTMLに書かれているDOMの生成が完了してから、
56
56
 
57
57
  `<script>`の中を実行するようにしたいのであれば [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
58
58
 

1

テキスト修正

2018/01/27 10:34

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -43,3 +43,77 @@
43
43
 
44
44
 
45
45
  以上参考になれば幸いです。
46
+
47
+
48
+
49
+ ---
50
+
51
+ 追記
52
+
53
+
54
+
55
+ 解決方法のひとつとしては、当該のHTMLに書かれているDOMの生成が完了してから、
56
+
57
+ `<script>`の中を実行するようにしたいのであれば [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
58
+
59
+ ハンドラとして実行するようにして、以下のようにすればよいかと思います。
60
+
61
+
62
+
63
+ ```html
64
+
65
+ <!DOCTYPE html>
66
+
67
+ <html lang="ja">
68
+
69
+ <head>
70
+
71
+ <meta charset="utf-8" />
72
+
73
+ <script>
74
+
75
+ document.addEventListener("DOMContentLoaded", function(event) {
76
+
77
+ const _d = document;
78
+
79
+
80
+
81
+ const Hoge = function () {
82
+
83
+ alert("実験成功 : 最終更新日時は" + _d.lastModified);
84
+
85
+ }
86
+
87
+
88
+
89
+ Hoge.prototype = {
90
+
91
+ testdesuyo: function () {
92
+
93
+ alert("実験成功 : 最終更新日時は" + _d.lastModified);
94
+
95
+ _d.getElementById("test").insertAdjacentHTML('afterbegin', '<p>testes</p>');
96
+
97
+ }
98
+
99
+ };
100
+
101
+
102
+
103
+ let hoge = new Hoge();
104
+
105
+ hoge.testdesuyo();
106
+
107
+ });
108
+
109
+ </script>
110
+
111
+ </head>
112
+
113
+ <body id="test">
114
+
115
+ </body>
116
+
117
+ </html>
118
+
119
+ ```