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

編集履歴

回答編集履歴

11

テキスト修正

2018/01/27 14:49

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -60,9 +60,12 @@
60
60
  </body>
61
61
  </html>
62
62
  ```
63
-
63
+ 　
64
64
  **2.参考図書**
65
+ 　
65
66
  蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
66
- 以下の本のレンダリングの章が詳しいです。
67
+ 以下の本
67
68
 
68
- [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)
69
+ [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)
70
+
71
+ のレンダリングの章が詳しいです。

10

テキスト修正

2018/01/27 14:49

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -11,7 +11,7 @@
11
11
  > 註: 同期的に実行される Javascript は DOM の解析を一時停止させます。
12
12
 
13
13
  との注記が書かれています。
14
- これについては、以下の mamo@Qiita さんの記事が分かりやすいです。
14
+ これについては、以下の mamo@Qiita さんの記事が周辺情報ふくめ、分かりやすいです。
15
15
 
16
16
  - [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)
17
17
 

9

テキスト修正

2018/01/27 11:36

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -3,19 +3,18 @@
3
3
  追記で掲載されたソースですと、 `<body id="test"></body>` が解析されてDOMに展開される**前に**、
4
4
  `<script>・・・</script>`　タグの中にある JSが評価されるので、
5
5
  `_d.getElementById("test")` が `null` になるものと思われます。
6
- （つまり、 id が "test" のDOM要素がまだ生成されていないうちに、 `<script>`の中のJSが実行されている。）
6
+ つまり、 id が "test" のDOM要素がまだ生成されていないうちに、 `<script>`の中のJSが
7
+ 実行されてしまっているのです。
7
8
 
9
+ MDNでの [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
8
10
 
11
+ > 註: 同期的に実行される Javascript は DOM の解析を一時停止させます。
12
+
13
+ との注記が書かれています。
9
14
  これについては、以下の mamo@Qiita さんの記事が分かりやすいです。
10
15
 
11
16
  - [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)
12
17
 
13
- また、MDNでの [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
14
-
15
- > 註: 同期的に実行される Javascript は DOM の解析を一時停止させます。
16
-
17
- との注記が書かれています。
18
-
19
18
  ご質問のコードに戻りますと、とりあえずの対応として、`<script>・・・</script>` を
20
19
  `</body>`(bodyの**閉じ**タグ） の直後あたりに移動すると、
21
20
  ご質問にあるエラーは出なくなると思います。

8

テキスト修正

2018/01/27 11:35

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  - [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)
12
12
 
13
- また、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
13
+ また、MDNでの [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
14
14
 
15
15
  > 註: 同期的に実行される Javascript は DOM の解析を一時停止させます。
16
16
 

7

テキスト修正

2018/01/27 11:01

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -10,7 +10,12 @@
10
10
 
11
11
  - [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)
12
12
 
13
+ また、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) の説明にも
13
14
 
15
+ > 註: 同期的に実行される Javascript は DOM の解析を一時停止させます。
16
+
17
+ との注記が書かれています。
18
+
14
19
  ご質問のコードに戻りますと、とりあえずの対応として、`<script>・・・</script>` を
15
20
  `</body>`(bodyの**閉じ**タグ） の直後あたりに移動すると、
16
21
  ご質問にあるエラーは出なくなると思います。

6

テキスト修正

2018/01/27 10:54

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -21,7 +21,7 @@
21
21
  ---
22
22
  **追記**
23
23
 
24
- 1.修正案
24
+ **1.修正案**
25
25
 
26
26
  上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が
27
27
  完了してから、 `<script>`の中を実行するという意図の明確なコードを書くのであれば、
@@ -57,7 +57,7 @@
57
57
  </html>
58
58
  ```
59
59
 
60
- 2.参考図書
60
+ **2.参考図書**
61
61
  蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
62
62
  以下の本のレンダリングの章が詳しいです。
63
63
 

5

テキスト修正

2018/01/27 10:52

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -23,9 +23,9 @@
23
23
 
24
24
  1.修正案
25
25
 
26
- 上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
26
+ 上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が
27
+ 完了してから、 `<script>`の中を実行するという意図の明確なコードを書くのであれば、
27
- `<script>`の中を実行するというコードを書くのであれば、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
28
+ 以下のように、[DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントのハンドラとして実行するよう修正すればよいと思います。
28
- ハンドラとして実行するようにして、以下のようにすればよいかと思います。
29
29
 
30
30
  ```html
31
31
  <!DOCTYPE html>

4

テキスト修正

2018/01/27 10:51

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -19,9 +19,11 @@
19
19
  以上参考になれば幸いです。
20
20
 
21
21
  ---
22
- 追記
22
+ **追記**
23
23
 
24
+ 1.修正案
25
+
24
- 1.上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
26
+ 上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
25
27
  `<script>`の中を実行するというコードを書くのであれば、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
26
28
  ハンドラとして実行するようにして、以下のようにすればよいかと思います。
27
29
 
@@ -55,7 +57,8 @@
55
57
  </html>
56
58
  ```
57
59
 
60
+ 2.参考図書
58
- 2.蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
61
+ 蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
59
62
  以下の本のレンダリングの章が詳しいです。
60
63
 
61
64
  [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)

3

テキスト修正

2018/01/27 10:49

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -15,18 +15,14 @@
15
15
  `</body>`(bodyの**閉じ**タグ） の直後あたりに移動すると、
16
16
  ご質問にあるエラーは出なくなると思います。
17
17
 
18
- 蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
19
- 以下の本のレンダリングの章が詳しいです。
20
18
 
21
- [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)
22
-
23
19
  以上参考になれば幸いです。
24
20
 
25
21
  ---
26
22
  追記
27
23
 
28
- 当該のHTMLに書かれているDOMの生成が完了してから、
24
+ 1.上記に書いた、「とりあえずの対応」ではなく、当該のHTMLに書かれているDOMの生成が完了してから、
29
- `<script>`の中を実行するようにしたいのであれば [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
25
+ `<script>`の中を実行するというコードを書くのであれば、 [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
30
26
  ハンドラとして実行するようにして、以下のようにすればよいかと思います。
31
27
 
32
28
  ```html
@@ -57,4 +53,9 @@
57
53
  <body id="test">
58
54
  </body>
59
55
  </html>
60
- ```
56
+ ```
57
+
58
+ 2.蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
59
+ 以下の本のレンダリングの章が詳しいです。
60
+
61
+ [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)

2

テキスト修正

2018/01/27 10:48

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,7 +1,7 @@
1
1
  こんにちは。
2
2
 
3
3
  追記で掲載されたソースですと、 `<body id="test"></body>` が解析されてDOMに展開される**前に**、
4
- `<script>・・・</script>`　が評価されるので、
4
+ `<script>・・・</script>`　タグの中にある JSが評価されるので、
5
5
  `_d.getElementById("test")` が `null` になるものと思われます。
6
6
  （つまり、 id が "test" のDOM要素がまだ生成されていないうちに、 `<script>`の中のJSが実行されている。）
7
7
 
@@ -11,8 +11,8 @@
11
11
  - [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)
12
12
 
13
13
 
14
- ご質問のコードに戻りますと、
14
+ ご質問のコードに戻りますと、とりあえずの対応として、`<script>・・・</script>` を
15
- 試しに、`<script>・・・</script>` を `</body>`(bodyの**閉じ**タグ） の直後あたりに移動すると、
15
+ `</body>`(bodyの**閉じ**タグ） の直後あたりに移動すると、
16
16
  ご質問にあるエラーは出なくなると思います。
17
17
 
18
18
  蛇足ですが、DOMの生成と script が実行される順番を把握して最適化するという趣旨だと、
@@ -25,7 +25,7 @@
25
25
  ---
26
26
  追記
27
27
 
28
- 解決方法のひとつとしては、当該のHTMLに書かれているDOMの生成が完了してから、
28
+ 当該のHTMLに書かれているDOMの生成が完了してから、
29
29
  `<script>`の中を実行するようにしたいのであれば [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
30
30
  ハンドラとして実行するようにして、以下のようにすればよいかと思います。
31
31
 

1

テキスト修正

2018/01/27 10:34

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -20,4 +20,41 @@
20
20
 
21
21
  [超速! Webページ速度改善ガイド](https://www.amazon.co.jp/dp/477419400X/)
22
22
 
23
- 以上参考になれば幸いです。
23
+ 以上参考になれば幸いです。
24
+
25
+ ---
26
+ 追記
27
+
28
+ 解決方法のひとつとしては、当該のHTMLに書かれているDOMの生成が完了してから、
29
+ `<script>`の中を実行するようにしたいのであれば [DOMContentLoaded](https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded) イベントの
30
+ ハンドラとして実行するようにして、以下のようにすればよいかと思います。
31
+
32
+ ```html
33
+ <!DOCTYPE html>
34
+ <html lang="ja">
35
+ <head>
36
+ <meta charset="utf-8" />
37
+ <script>
38
+ document.addEventListener("DOMContentLoaded", function(event) {
39
+ const _d = document;
40
+
41
+ const Hoge = function () {
42
+ alert("実験成功 : 最終更新日時は" + _d.lastModified);
43
+ }
44
+
45
+ Hoge.prototype = {
46
+ testdesuyo: function () {
47
+ alert("実験成功 : 最終更新日時は" + _d.lastModified);
48
+ _d.getElementById("test").insertAdjacentHTML('afterbegin', '<p>testes</p>');
49
+ }
50
+ };
51
+
52
+ let hoge = new Hoge();
53
+ hoge.testdesuyo();
54
+ });
55
+ </script>
56
+ </head>
57
+ <body id="test">
58
+ </body>
59
+ </html>
60
+ ```