こんにちは、Jeannieです。
今回は「JavaScriptの記述場所を学ぼう!」というテーマで記事を書きました。
以下の思いを持った読者を対象に記事を書いてみたので、「自分のことだ!」と思った人は是非読んでみてくださいね。
結論をいうと、JavaScriptを書く場所は大きく分けると2パターンあります。
それぞれメリット・デメリットがありますし、実務経験からどっちのパターンが良く使われるのかなども解説しているので、初心者の人は是非参考にしてみてください!
JavaScriptを書く場所は2パターンある
JavaScriptのコードを書く場所は大きく分けると以下の2パターンあります。
それぞれのパターンについて詳しく見ていきましょう。
パターン1:HTMLファイルに直接書く
JavaScriptはHTMLファイルに直接書くことが出来ます。
まずはコード例を見てみましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>HTML内に組み込むパターン</h1>
<script>
console.log('HTML内にJavaScriptのコードを直接書けるよ');
</script>
</body>
</html>
<script>~</script>で囲まれてる部分がJavaScriptのコードです。
このコードを実際にブラウザで表示するとこんな感じになります。

Google Chrome で表示した結果です。
ちゃんとコンソールにJavaScriptで出力した内容が表示されてますね。
こんな感じでHTML内にJavaScriptのコードを書くことで、ブラウザ上でHTMLを読み込んだ時に<script>タグ内に書いたJavaScriptが実行されるようになります。
ちなみに、HTMLファイル内に直接JavaScriptを書く場合は、<head>~</head>と<body>~</body>内のどこに書いてもOKです。
ただ、僕が実務を通して見てきた感じだと、このパターンの場合は上のコード例みたいに</body>タグの直前に書くことが多いですね。
HTML内のいろんなところにJavaScriptが書かれてあると、どこにJavaScriptが埋め込まれてあるか後から分かりにくくなっちゃうので。
このパターンのメリット、デメリットを簡単にまとめるとこんな感じです。
メリットとしては、HTMLを書きながら同じファイルにJavaScriptも書けるので作業がちょっと楽になるっていうところと、同じファイルでHTMLとJavaScriptを見ることが出来るっていうところですね。
ただ、HTMLは行数が多くなることがほとんどなので、JavaScriptの内容を見たい時に探すのが大変だったりもします。
続いてパターン2を見ていきましょう。
パターン2:JavaScriptファイルに書いてHTMLで読み込む
パターン2は、JavaScriptのコードを別ファイルに切り出して、それをHTMLで読み込むパターンです。
これも先にコード例を見てみましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>JavaScriptファイルに書いてHTMLで読み込むパターン</h1>
<script src="output.js"></script>
</body>
</html>
console.log('JavaScriptファイルに切り出して書けるよ');
このコードを実際にブラウザで表示するとこんな感じになります。

こっちもちゃんとコンソールにJavaScriptで出力した内容が表示されてますね。
こっちのパターンでは、<script>タグ内にJavaScriptを直接書くのではなく、JavaScriptを別のファイルに切り出して記述します。
HTMLの方では、<script>タグのsrc属性で「output.js」というJavaScriptファイルを指定して読み込んでます。
このHTMLをブラウザで表示すると、JavaScriptファイルが読み込まれてコンソール上に文字列が表示されます。
このパターンのメリット、デメリットを簡単にまとめるとこんな感じです。
メリットとしては、HTMLとJavaScriptを別々のファイルに書くので、ソースコードを管理しやすいというところですね。
HTMLだけを直したい、JavaScriptだけを直したいといった時にお互いが独立しているので、変に間違えて修正するリスクも下がります。
デメリットとしては、どちらかのソースコードを見てるときにもう片方のソースコードも見たいとなった時に、そのファイルを探す必要があるというところです。
ただ、実務ではそのデメリットよりも別々に管理することでのメリットの方が大きいので、一般的にはこっちのパターンを取ることが多いです。
なので、JavaScriptを触ったことがない人や勉強したての人は、こっちのパターンで慣れることをおすすめします。
JavaScriptの実行順序
JavaScriptの記述場所について2パターンを説明してきましたが、これらの2パターンは同時に使うことが出来ます。
組み合わせた例を見てみましょう。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>パターン1とパターン2を組み合わせた例</h1>
<script src="output.js"></script>
<script>
console.log('HTML内にJavaScriptのコードを直接書けるよ');
</script>
</body>
</html>
console.log('JavaScriptファイルに切り出して書けるよ');
JavaScriptファイルから読み込むパターンと、<script>タグ内に直接書くパターンを同じファイルに書いた例です。
このコードを実際にブラウザで表示するとこんな感じになります。

結果から分かるように、JavaScriptファイルから読み込んだパターンが先に出力されていますね。
これはHTMLの方でJavaScriptから読み込むパターンを先に書いたからです。
JavaScriptは<script>タグ内に直接コードが書かれているか、JavaScriptファイルとして読み込まれるかにかかわらず、HTMLの上から書いた順番で実行されるということを覚えておきましょう。
まとめ
今回はJavaScriptのコードを記述する場所について説明しました。
実際の業務では、管理のしやすさからJavaScriptファイルに書くパターンがほとんどなので、こちらの書き方で慣れるようにしましょう。
コメント