スポンサーリンク

JavaScriptの記載場所

JavaScriptの記載場所 JavaScript
JavaScriptの記載場所

どうも。ぺんしるです。

エンジニア
エンジニア

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

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

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


結論としては、大きく分けると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が何かについては、以下のサイトが詳しく解説しています。

CDN(コンテンツ・デリバリ・ネットワーク)とは/What is CDN|CDNetworks
CDNとは、コンテンツデリバリネットワーク(Content Delivery Network)の略で、世界中に張り巡らされたWebサイトを配信するのためのネットワークを指し、Webサイトにアクセスしようとするエンドユーザに最も近いWebサーバ(CDNのサーバ)がリクエストに応えることで高速で安定した配信を効率的に実現す...
CDNってそもそも何?なんかサーバの負荷が下がるって聞いたんだけど!〜Web制作/運営の幅が広がるCDNを知ろう第1回〜 | さくらのナレッジ
今回の連載では、まだCDN(Content Delivery Network)を使ったことのない・よく知らないというWebデザイナーさん、Webディレクターさんや企業のWeb担当者の方に向けて、CDNとは?いくら掛かるの?リスクはないの?といった疑問への回答から、実際の設定方法、WordPressサイトでの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先のサーバがダウンすると、システムが動かなくなるためです。

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

お客様
お客様

なんか、おたくのシステムの表示がおかしいのだけど?

ぺんしる
ぺんしる

いや~、jQueryのCDNサーバが貧弱で…もごもご

とは、返しづらいですよね( ゚д゚ )

気軽に「このライブラリってどんな風に使うのかな~」程度に使用するにはCDNは良いと思いますが、業務で使用する場合(リリース物)はCDNは使用しないほうが良いと考えています。

外部ファイル化とHTML直書きの使い分け

  • どのような場合にJavaScriptをHTMLに直書きするか
  • どのような場合に外部ファイル化するか

ですが、JavaScriptのコード量が多い場合には、外部ファイル化すべきです。HTMLに大量のJavaScriptを記載するとコードが見づらくなるからです。

反対に、JavaScriptのコード量が少ない場合は、HTMLに直書きで良いと考えています。外部ファイル化すると、管理コストが増えるのとhttpリクエストが増えるためです。

最後に

いかがでしたか?

不明点があれば、遠慮なくこちらから質問してくださいね。


ではでは!

コメント

タイトルとURLをコピーしました