HTMLでscriptタグを使う方法を徹底解説！

2024.01.04

「htmlのscriptタグってどのような役割があるんだろう」
「scriptタグを使って外部ファイルを読み込む方法について知りたい」

上記のような疑問を抱えている方もいるのではないでしょうか。

scriptタグは外部ファイルに記述されたJavaScriptファイルを読み込むことができ、Web制作案件でも頻繁に利用します。

今回、DMM WEBCAMP MEDIAは、HTMLでscriptタグを使ってJavaScriptを操作する方法について解説していきます！

以上の項目に沿って説明します。

この記事を読むことで、scriptタグの役割と使い方について理解できます。

サンプルコードを用いて解説しており、プログラミング初心者の方でもわかりやすいので、ぜひチェックしてみてください！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLで利用できるscriptタグの役割

scriptタグは、HTMLファイル内でJavaScriptを実行したり、外部のJavaScriptファイルを読み込むことができるタグです。

scriptタグには、type属性とsrc属性が頻繁に利用されます。

type属性には、記述するスクリプトのタイプを指定します。HTML5の場合はtype属性の入力を省略しても問題ありませんが、他のバージョンだと動作しないこともあるので入力しておくことをおすすめします。

JavaScriptを利用する場合は、type属性に「text/javascript」と記述します。

<script type="text/javascript">JavaScriptのコードを記述</script>

src属性は、パスを指定して外部ファイルを読み込むときに利用します。

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

jQueryのように外部のサーバーへアクセスするCDNを利用する場合は、URLを記述して読み込むことも可能です。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

scriptタグの設置場所は、headタグかbodyタグの中で利用できます。headタグ内に記述するとbodyタグの前に実行され、bodyタグ内に記述するとbodyに記述されたコードの後に実行されます。

HTMLコードと連動するJavaScriptを記述する際は、scriptタグの実行タイミングを踏まえて利用しましょう。

scriptタグの使い方はシンプルで、<script>というタグの中に実行したいJavaScriptのコードを記述するだけです。

JavaScriptが実行されたらアラート画面が表示されるコードを例に見ていきましょう。

<body>
    <script type="text/javascript">alert("サンプルコードです");</script>
</body>

body内にscriptタグを利用する際は、他のコードと混同しないように閉じタグの手前に記述しましょう。

実行結果

scriptタグのコメントアウトは、下記のようにHTMLタグをコメントアウトする方法と同じです。

    <!--
    <script type="text/javascript">alert("サンプルコードです");</script>
    -->

また、scriptタグ内のコードをコメントアウトする方法は、JavaScriptと同じ方法になります。

<script type="text/javascript">//alert("サンプルコードです");</script>

今回、DMM WEBCAMP MEDIAでは、HTMLでscriptタグを使ってJavaScriptを操作する方法について解説しましたが、いかがでしたでしょうか？

scriptタグを利用すると、HTMLファイル内にJavaScritを記述したり、外部ファイルを読み込むことができます。

headタグとbodyタグのどちらにも設置できますが、設置場所によって実行順序が変わる点に注意しましょう。

ぜひ参考にしてみてくださいね！

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ

目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	12週間〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】大手DMMが運営のプログラミングスクール転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】フリーランスのエンジニアを最短で目指すエンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

DMM WEBCAMPでは転職成功率98％を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

資料をダウンロードする
IT技術の発展により、今後10~20年程度で47％の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

資料をダウンロードする
働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

資料をダウンロードする