JavaScriptの記載場所

どうも。ぺんしるです。

エンジニア

JavaScriptはどこに記載すればよいの？

今日は、こういった疑問に答えます。

JavaScriptの記載場所については以前以下の記事で書きましたが、今日はそれを少し深堀していきますね。

結論としては、大きく分けると2パターンがあります。

HTMLに記載する場合

外部ファイル化する場合

ここから、深堀していきますね。

HTMLに記載する場合
1. headerタグ内
2. bodyの最後
外部ファイル化する場合
1. 同じサーバ上のファイルを参照
2. 別サーバのファイルを参照
外部ファイル化とHTML直書きの使い分け
最後に

HTMLに記載する場合

HTMLファイルにJavaScriptを記載するケースです。

headerタグ内

headerタグに記載する場合、以下の場所に記載することになります。

<!DOCTYPE html>
<html>
  <head>
　　<script>
  　　//ここにJavaScriptを記載
　　</script>
    <meta charset="utf-8">
    <title>test page</title>
  </head>
  <body>
    <input type="button" value="Click!">
  </body>
</html>

bodyの最後

bodyタグに記載する場合は、bodyタグの最後に記載します。

具体的には、以下の場所に記載することになります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test page</title>
  </head>
  <body>
    <input type="button" value="Click!">
　　<script>
  　　//ここにJavaScriptを記載
　　</script>
  </body>
</html>

外部ファイル化する場合

HTMLファイルに記載するのではなく、JavaScriptを外部ファイル化するやり方です。

同じサーバ上のファイルを参照

JavaScriptをtest.jsというファイル名で配置します。

console.log('hoge');

HTMLファイルには、test.jsのパスを記載します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test page</title>
  </head>
  <body>
    <script src="test.js"></script>
  </body>
</html>

JavaScriptファイルがhtmlファイルと別のフォルダにある場合は、相対パスで記載することも可能です。

例えば、JavaScriptファイルがHTMLの1階層上のjsというフォルダにある場合には、以下のように記載します。

<script src="../js/test.js"></script>

別サーバのファイルを参照

JavaScriptをCDN経由で参照する方法もあります。

CDNが何かについては、以下のサイトが詳しく解説しています。

企業情報

CDNetworksは、世界をリードするコンテンツデリバリネットワーク（CDN）プロバイダです。CDNのWeb高速化をはじめ、クラウド・セキュリティ（DDoS/WAF/Bot対策）、エッジコンピューティングなど、ネットワークインフラ全般のパフォーマンス改善をサポートしています。

CDNってそもそも何？なんかサーバの負荷が下がるって聞いたんだけど！〜Web制作/運営の幅が広がるCDNを知ろう第1回〜 | さくらのナレッジ

今回の連載では、まだCDN（Content Delivery Network）を使ったことのない・よく知らないというWebデザイナーさん、Webディレクターさんや企業のWeb担当者の方に向けて、CDNとは？いくら掛かるの

例えば、jQueryをCDNで参照する場合には、HTMLファイルには以下のように記載します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test page</title>
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  </body>
</html>

と書くと、どのような場合にCDNを使うか疑問に思うかもしれません。

ぺんしるは、CDNはあまり使用しないし、業務でもCDNを使っているのを見たことがありません。

理由は、CDNを使うとCDN先のサーバがダウンすると、システムが動かなくなるためです。

例えば、お客様から以下のような問い合わせがあったとします。