【JavaScript入門】JavaScriptの記述場所を学ぼう！

こんにちは、Jeannieです。

今回は「JavaScriptの記述場所を学ぼう！」というテーマで記事を書きました。
以下の思いを持った読者を対象に記事を書いてみたので、「自分のことだ！」と思った人は是非読んでみてくださいね。

対象読者
  • HTMLとかCSSの知識はある程度あるけどJavaScriptも勉強してみたい！
  • JavaScriptの文法とか学びたいけど、そもそもどこに書くの？
  • JavaScriptって何となく知ってるけど、どうやって動いてるの？
この記事から学べること
  • JavaScriptのソースコードを記述するパターンが学べる
  • 身につけておくべきJavaScriptの記述場所が学べる

結論をいうと、JavaScriptを書く場所は大きく分けると2パターンあります。
それぞれメリット・デメリットがありますし、実務経験からどっちのパターンが良く使われるのかなども解説しているので、初心者の人は是非参考にしてみてください！

JavaScriptを書く場所は２パターンある

JavaScriptのコードを書く場所は大きく分けると以下の2パターンあります。

  • パターン１：HTMLファイルに直接書く
  • パターン２：JavaScriptファイルに書いてHTMLで読み込む

それぞれのパターンについて詳しく見ていきましょう。

パターン１：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を同じファイルで見ることが出来る
デメリット
  • JavaScriptのコードがどこに書いてあるかが分かりづらい

メリットとしては、HTMLを書きながら同じファイルにJavaScriptも書けるので作業がちょっと楽になるっていうところと、同じファイルでHTMLとJavaScriptを見ることが出来るっていうところですね。

ただ、HTMLは行数が多くなることがほとんどなので、JavaScriptの内容を見たい時に探すのが大変だったりもします。

続いてパターン２を見ていきましょう。

パターン２：JavaScriptファイルに書いてHTMLで読み込む

パターン２は、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が同じファイル上で見れない

メリットとしては、HTMLとJavaScriptを別々のファイルに書くので、ソースコードを管理しやすいというところですね。

HTMLだけを直したい、JavaScriptだけを直したいといった時にお互いが独立しているので、変に間違えて修正するリスクも下がります。

デメリットとしては、どちらかのソースコードを見てるときにもう片方のソースコードも見たいとなった時に、そのファイルを探す必要があるというところです。

ただ、実務ではそのデメリットよりも別々に管理することでのメリットの方が大きいので、一般的にはこっちのパターンを取ることが多いです。

なので、JavaScriptを触ったことがない人や勉強したての人は、こっちのパターンで慣れることをおすすめします。

JavaScriptの実行順序

JavaScriptの記述場所について２パターンを説明してきましたが、これらの2パターンは同時に使うことが出来ます。

組み合わせた例を見てみましょう。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>パターン１とパターン２を組み合わせた例</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のコードを記述する場所は２パターンある
    • HTMLの<script>タグ内に直接書くパターン
    • JavaScriptファイルに書いてHTMLで読み込むパターン
  • パターンに関係なくHTMLの上から順に実行される

実際の業務では、管理のしやすさからJavaScriptファイルに書くパターンがほとんどなので、こちらの書き方で慣れるようにしましょう。

コメント