JSの直接定義と外部定義の違いについて

前提・実現したいこと

JavaScript30という海外のJS勉強サイトで勉強をしている初心者です。
一番最初のコースなのですが、ビデオで説明してくれている人はHTMLファイルの中に<script>タグを書きその中にJSのコードを書いています。
私はファイルを分けた方がスッキリするので外部定義をしているのですが、ビデオ通りにコードを書いても外部定義で指定しているとプログラミングがうまく動きません。
外部ファイルのindex.jsで書いているコードをHTML内の<script>タグの中に書き込むと期待通り動くのですが、HTML内に直接定義するのと外部ファイルで定義するのは何か違いがあるのでしょうか。

該当のソースコード

javascript
1function removeTransition(e) {
2	if (e.propertyName !== 'transform') return;
3	e.target.classList.remove('playing');
4}
5
6function playSound(e) {
7	const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
8	const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
9	if (!audio) return;
10
11	key.classList.add('playing');
12	audio.currentTime = 0;
13	audio.play();
14}
15
16const keys = Array.from(document.querySelectorAll('.key'));
17keys.forEach(key => key.addEventListener('transitionend', removeTransition));
18window.addEventListener('keydown', playSound);
19

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>JS Drum Kit</title>
6  <link rel="stylesheet" href="style.css">
7	<script src="index.js"></script>
8</head>
9<body>
10
11
12  <div class="keys">
13    <div data-key="65" class="key">
14      <kbd>A</kbd>
15      <span class="sound">clap</span>
16    </div>
17    <div data-key="83" class="key">
18      <kbd>S</kbd>
19      <span class="sound">hihat</span>
20    </div>
21    <div data-key="68" class="key">
22      <kbd>D</kbd>
23      <span class="sound">kick</span>
24    </div>
25    <div data-key="70" class="key">
26      <kbd>F</kbd>
27      <span class="sound">openhat</span>
28    </div>
29    <div data-key="71" class="key">
30      <kbd>G</kbd>
31      <span class="sound">boom</span>
32    </div>
33    <div data-key="72" class="key">
34      <kbd>H</kbd>
35      <span class="sound">ride</span>
36    </div>
37    <div data-key="74" class="key">
38      <kbd>J</kbd>
39      <span class="sound">snare</span>
40    </div>
41    <div data-key="75" class="key">
42      <kbd>K</kbd>
43      <span class="sound">tom</span>
44    </div>
45    <div data-key="76" class="key">
46      <kbd>L</kbd>
47      <span class="sound">tink</span>
48    </div>
49  </div>
50
51  <audio data-key="65" src="sounds/clap.wav"></audio>
52  <audio data-key="83" src="sounds/hihat.wav"></audio>
53  <audio data-key="68" src="sounds/kick.wav"></audio>
54  <audio data-key="70" src="sounds/openhat.wav"></audio>
55  <audio data-key="71" src="sounds/boom.wav"></audio>
56  <audio data-key="72" src="sounds/ride.wav"></audio>
57  <audio data-key="74" src="sounds/snare.wav"></audio>
58  <audio data-key="75" src="sounds/tom.wav"></audio>
59  <audio data-key="76" src="sounds/tink.wav"></audio>
60
61<!-- <script>
62
63</script> -->
64
65
66</body>
67</html>
68

CSS
1html {
2  font-size: 10px;
3  background: url(https://i.imgur.com/b9r5sEL.jpg) bottom center;
4  background-size: cover;
5}
6
7body,html {
8  margin: 0;
9  padding: 0;
10  font-family: sans-serif;
11}
12
13.keys {
14  display: flex;
15  flex: 1;
16  min-height: 100vh;
17  align-items: center;
18  justify-content: center;
19}
20
21.key {
22  border: .4rem solid black;
23  border-radius: .5rem;
24  margin: 1rem;
25  font-size: 1.5rem;
26  padding: 1rem .5rem;
27  transition: all .07s ease;
28  width: 10rem;
29  text-align: center;
30  color: white;
31  background: rgba(0,0,0,0.4);
32  text-shadow: 0 0 .5rem black;
33}
34
35.playing {
36  transform: scale(1.1);
37  border-color: #ffc600;
38  box-shadow: 0 0 1rem #ffc600;
39}
40
41kbd {
42  display: block;
43  font-size: 4rem;
44}
45
46.sound {
47  font-size: 1.2rem;
48  text-transform: uppercase;
49  letter-spacing: .1rem;
50  color: #ffc600;
51}
52

行動規範の内容に同意します

回答3件

今風のイケてる解決方法は<script src="index.js" defer></script>という風にdefer属性を追加するだけでうまく行きます。

参考記事: <script> タグに async / defer を付けた場合のタイミング - Qiita

ブラウザはHTMLをロードした後、HTML解析しながらDOMツリーに変換していくということを行っています。
しかし、scriptタグを見つけた瞬間、DOMツリーへの変換作業をほっぽり投げてJavaScriptの実行に注力します。

なのでheadタグなんかのページの上部でscriptタグを宣言してしまうと
何もないDOMツリーを探して「何も無いんだけど？エラー！」となってしまいます。

昔ながらの対策は二通り

HTMLの最後の方にscriptタグを設置する、閉じbodyタグの直前とか
イベントの中にページのDOMツリー作成が終えたというものがあるので、addEventListenerを使い引っ掛ける

そりゃ不便だということで、
HTML5でscriptタグにdefer属性が追加されました。

deferには「延期する」という意味があります。
JavaScriptファイルのダウンロードは即行いますが、
自動的にDOMツリー完了まで実行は待ってくれます。

なのでCSSと同じようにheadタグの中に気軽に設置出来るようになりました。
HTMLの構造が美しくなりますね。

ただし、<script defer>alert("hoge")</script>という風にコード直書きの場合は遅延してくれないので注意してください。
今回のように<script src="index.js" defer></script>と外部ファイルを利用してください。

投稿2020/03/28 00:57

miyabi-sun

総合スコア21158

Ryo_was_taken

2020/03/28 02:30

今の流行り（主流）はどの方法なんでしょうかね。

行動規範の内容に同意します

ベストアンサー

外部jsとはindex.jsのことですか？
それだと、htmlが読み込まれる前に実行されるので
.keyを拾うことができていません。

投稿2020/03/27 12:57

yambejp

総合スコア114839

Ryo_was_taken

2020/03/27 13:00

回答ありがとうございます。初歩的なことをわかっていませんでしたが、いただいたコメントを読み理解することができました。ありがとうございます。

行動規範の内容に同意します

HTML
1<script src="index.js"></script><!-- ここに置く -->
2</body>
3</html>

投稿2020/03/27 12:57

kei344

総合スコア69407

Ryo_was_taken

2020/03/27 12:59

回答ありがとうございます。いただいた指摘をもとに修正しプログラムが動きました。ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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