HTML script src属性とは？外部JavaScriptの読み込み方法を初心者向けに解説
生徒
「HTMLのscriptタグは見たことがあるんですが、srcっていう属性は何のためにあるんですか？」
先生
「src属性は、外部にあるJavaScriptファイルを読み込むための指定ですよ。HTMLの中に直接JavaScriptを書く代わりに、別のファイルを読み込むことができます。」
生徒
「別のファイルにするメリットはあるんですか？」
先生
「ありますよ。コードを整理しやすくなり、同じJavaScriptを複数のページで使い回すこともできます。Web制作ではとてもよく使われる方法です。」
生徒
「なるほど。HTMLとJavaScriptを連携する方法なんですね。」
先生
「その通りです。それではHTMLのscriptタグのsrc属性について、基本から順番に見ていきましょう。」
1. HTML script src属性とは
HTMLのscriptタグのsrc属性とは、外部JavaScriptファイルを読み込むための属性です。HTMLだけでは、ページの構造や文章を表示することができますが、動きのある処理やクリックイベントなどを実装する場合はJavaScriptが必要になります。
しかし、JavaScriptをすべてHTMLファイルの中に書いてしまうと、コードが長くなり、読みづらくなってしまいます。そこで使われるのが外部JavaScriptファイルです。
外部JavaScriptファイルとは、拡張子がjsのファイルのことです。このファイルの中にJavaScriptプログラムを書いておき、HTMLのscriptタグのsrc属性で読み込むことで、HTMLとJavaScriptを連携させることができます。
srcという言葉は、英語のsourceという単語の略です。意味は読み込み元という意味になります。つまり、どのJavaScriptファイルを読み込むかを指定する場所がsrc属性なのです。
2. script src属性の基本的な書き方
HTMLで外部JavaScriptを読み込む基本的な書き方はとてもシンプルです。scriptタグの中にsrc属性を書き、その中にJavaScriptファイルのパスを指定します。
パスとは、ファイルの場所を示す住所のようなものです。コンピュータの世界では、どのフォルダのどのファイルを使うのかを指定する必要があります。
例えば、script.jsというJavaScriptファイルを読み込む場合は次のように書きます。
<script src="script.js"></script>
このコードを書くことで、HTMLファイルはscript.jsというJavaScriptファイルを読み込み、その中に書かれているプログラムを実行します。
HTMLとJavaScriptの連携を行うときに、最も基本になる書き方なので、Web制作を学ぶ初心者の方は必ず覚えておきたいポイントです。
3. HTMLとJavaScriptを連携する簡単な例
実際にHTMLとJavaScriptを連携させる簡単な例を見てみましょう。ここでは、ボタンをクリックするとメッセージが表示される簡単なプログラムを作ります。
まずはHTMLファイルを書きます。
<h1>JavaScript読み込みテスト</h1>
<button onclick="showMessage()">クリック</button>
<script src="script.js"></script>
次にscript.jsというJavaScriptファイルを作成し、次のように書きます。
function showMessage(){
alert("JavaScriptが読み込まれました");
}
このようにHTMLファイルとJavaScriptファイルを分けて書くことで、プログラムの役割が整理され、管理しやすいWebページになります。
4. scriptタグをbodyの最後に置く理由
HTMLでscriptタグを使うときは、bodyタグの一番最後に書くことがよくあります。これはWebページの表示速度と関係があります。
ブラウザはHTMLを上から順番に読み込んでいきます。もしページの途中でJavaScriptを読み込むと、JavaScriptの処理が終わるまでページの表示が止まってしまうことがあります。
そのため、多くのWebサイトではHTMLの最後にJavaScriptを読み込むようにしています。これによって、ページの文章や画像を先に表示し、そのあとでJavaScriptを読み込むことができるため、ユーザーにとって見やすいページになります。
<h1>サンプルページ</h1>
<p>ここはページの本文です。</p>
<script src="script.js"></script>
この書き方は実際のWeb制作でもよく使われる基本的なHTML構造です。
5. 複数のJavaScriptファイルを読み込む方法
Webサイトが大きくなると、JavaScriptファイルが一つだけでは足りなくなることがあります。例えば、メニューの処理、アニメーションの処理、フォームのチェックなど、機能ごとにファイルを分けることがあります。
その場合は、scriptタグを複数書くことで、複数のJavaScriptファイルを読み込むことができます。
<script src="menu.js"></script>
<script src="animation.js"></script>
<script src="form.js"></script>
このように書くことで、それぞれのJavaScriptファイルが順番に読み込まれます。
JavaScriptファイルを分けて管理すると、プログラムの整理がしやすくなり、後から修正するときにも作業が楽になります。Web制作では、コードの整理と管理のしやすさがとても重要になります。
6. 相対パスと絶対パスの違い
scriptのsrc属性で指定するファイルの場所には、相対パスと絶対パスという二つの書き方があります。
相対パスとは、現在のHTMLファイルから見た位置でファイルの場所を指定する方法です。多くのWebサイトでは、この相対パスが使われます。
例えばjsフォルダの中にscript.jsがある場合は次のように書きます。
<script src="js/script.js"></script>
一方で絶対パスは、Webサイトの完全なURLで指定する方法です。
<script src="https://example.com/js/script.js"></script>
相対パスはサイト内部のファイルを読み込むときに使い、絶対パスは外部のJavaScriptライブラリを読み込むときに使われることが多いです。
7. 外部JavaScriptを使うメリット
HTMLのscriptタグのsrc属性を使って外部JavaScriptを読み込む方法には、いくつかの大きなメリットがあります。
一つ目は、コードを整理できることです。HTMLファイルとJavaScriptファイルを分けることで、HTMLはページの構造、JavaScriptは動きの処理という役割に分けることができます。
二つ目は、同じJavaScriptを複数ページで使えることです。一つのJavaScriptファイルを複数のHTMLページから読み込めば、同じプログラムを何度も書く必要がありません。
三つ目は、ページの管理がしやすくなることです。JavaScriptの修正が必要になった場合でも、JavaScriptファイルだけを変更すれば、すべてのページに反映されます。
このようにHTML script src属性は、Web制作やフロントエンド開発において非常に重要な役割を持っています。HTMLとJavaScriptを効率よく連携させるための基本的な技術として、多くのWebサイトで利用されています。
まとめ
HTML script src属性の重要なポイント
HTMLでWebページを作るとき、ページの構造を作るHTMLと、動きを担当するJavaScriptを分けて管理することはとても大切です。そのときに使われるのがHTMLのscriptタグのsrc属性です。scriptタグのsrc属性を使うことで、外部JavaScriptファイルを読み込み、HTMLとJavaScriptを連携させることができます。
Web制作やフロントエンド開発では、HTMLだけでページを作ることはほとんどありません。ボタンをクリックしたときの処理、メニューの開閉、入力フォームのチェック、画像の切り替えなど、多くの場面でJavaScriptが利用されます。そのためHTML script src属性を理解することは、Web制作初心者が必ず身につけたい基本知識の一つです。
scriptタグのsrc属性は、JavaScriptファイルの場所を指定するための属性です。srcという言葉は読み込み元という意味を持ち、どのJavaScriptファイルを使用するのかを指定する役割があります。例えばscript.jsというファイルを読み込む場合はscriptタグの中にsrc属性を書き、その中にファイルのパスを指定します。
HTMLとJavaScriptを同じファイルに書くこともできますが、外部JavaScriptとして分けることでコードの管理がとても簡単になります。ページ構造はHTML、動きの処理はJavaScriptというように役割を分けることで、コードが読みやすくなり、修正や追加の作業もしやすくなります。
また外部JavaScriptの大きなメリットとして、複数ページで同じJavaScriptを利用できる点があります。例えばメニュー処理や画面のアニメーションなど、共通の処理を一つのJavaScriptファイルにまとめておけば、複数のHTMLページから同じscriptファイルを読み込むだけで同じ機能を利用できます。これによってWebサイト全体の管理がとても効率的になります。
scriptタグを書く場所も重要なポイントです。多くのWebページではbodyタグの最後にscriptタグを書く方法が使われています。ブラウザはHTMLを上から順番に読み込みます。その途中でJavaScriptが実行されるとページ表示が一時停止してしまうことがあります。そのため文章や画像などの表示を先に読み込み、そのあとでJavaScriptを実行することでページ表示をスムーズにすることができます。
さらにscriptタグは複数書くことができるため、JavaScriptファイルを機能ごとに分割することも可能です。例えばメニュー用JavaScript、アニメーション用JavaScript、入力チェック用JavaScriptなどのように分けることで、プログラムの構造が整理され、Webサイトの規模が大きくなっても管理しやすくなります。
src属性で指定するファイルの場所には相対パスと絶対パスがあります。相対パスは現在のHTMLファイルを基準としてファイルの位置を指定する方法です。多くのWeb制作ではこの相対パスが利用されます。一方で絶対パスは完全なURLで指定する方法で、外部ライブラリや外部サービスのJavaScriptを読み込むときに使用されます。
HTML script src属性はシンプルな書き方ですが、Web制作の現場では非常に重要な役割を持っています。HTMLとJavaScriptの連携方法を理解し、外部JavaScriptファイルを正しく読み込めるようになることで、より本格的なWebページや動きのあるWebサイトを作ることができるようになります。
サンプルプログラムで理解を深める
次のサンプルはHTMLページから外部JavaScriptを読み込み、ボタンをクリックするとメッセージが表示される簡単な例です。HTML script src属性を使うことでHTMLとJavaScriptがどのように連携しているのかを理解することができます。
<h1 class="page-title">JavaScript連携サンプル</h1>
<p class="lead-text">このページでは外部JavaScriptを読み込みます。</p>
<button class="btn btn-primary" onclick="showMessage()">メッセージ表示</button>
<script src="js/script.js"></script>
次はscript.jsというJavaScriptファイルの内容です。このファイルをHTMLから読み込むことでクリックイベントの処理が実行されます。
function showMessage(){
alert("JavaScriptが正しく読み込まれました");
}
このようにHTMLとJavaScriptを別のファイルとして管理すると、ページ構造とプログラム処理が明確に分かれます。Web制作の現場ではこの方法が基本となり、ほとんどのWebサイトがこの仕組みで作られています。
HTML script src属性を理解することは、HTML JavaScript連携の第一歩です。Web制作初心者の方は、外部JavaScriptファイルを作成し、HTMLから読み込む練習を繰り返すことで、より実践的なWeb開発スキルを身につけることができます。
生徒
今日はHTML script src属性について学びました。最初はただのタグの一つだと思っていましたが、外部JavaScriptファイルを読み込むとても大事な役割があることが分かりました。
先生
その理解はとても大切です。HTMLはページ構造を作り、JavaScriptはページの動きを作ります。そしてその二つをつなぐ役割を持つのがscriptタグのsrc属性です。
生徒
外部JavaScriptファイルにするとコードが整理されるという話も印象に残りました。HTMLの中に全部書くよりも、役割ごとに分けたほうが読みやすいですね。
先生
その通りです。Web制作ではコードの整理と再利用がとても重要です。同じJavaScriptを複数ページで使えるようにするためにも、外部JavaScriptファイルを利用する方法は覚えておきましょう。
生徒
scriptタグをbodyの最後に書く理由も理解できました。ページ表示を先に行ってからJavaScriptを読み込むことで表示が速くなるのですね。
先生
その理解で正しいです。HTML JavaScript連携の基本として、script src属性の使い方、相対パスの書き方、複数JavaScriptファイルの読み込み方法などをしっかり覚えておくと、これからのWeb制作やフロントエンド開発に大きく役立ちます。
生徒
HTMLとJavaScriptがどのようにつながっているのかがよく分かりました。これからは外部JavaScriptファイルを使ったWebページ作成にも挑戦してみたいです。
先生
とても良い姿勢です。HTML script src属性の理解はWeb開発の基礎です。実際にサンプルコードを書きながらHTMLとJavaScriptの連携を体験することで、さらに理解が深まっていきます。
「意味」がわかればWebは楽しい！現役エンジニアが教える、挫折しないためのHTML構造化入門
「Webの仕組み」を正しく操る。HTML5でプロフェッショナルな情報設計の第一歩を。
本講座では、単なるタグの暗記ではなく、「検索エンジンやAIに正しく伝わる情報の構造化」という本質的な技術を学びます。モダンWebの土台であるHTML5を通じて、将来的にWebデザイナーやフロントエンドエンジニアを目指すための「稼げる基礎力」を最短距離で身につけます。
具体的なワークショップ内容と環境
【つくるもの】
自己紹介やポートフォリオの土台となる「構造化されたWebページ」を作成します。見出し、段落、リスト、リンク、画像配置など、商用サイトでも必ず使われる「セマンティックなマークアップ」をゼロから体験してください。
【開発環境】
世界中のプロが愛用するVisual Studio Code (VS Code)を使用します。Emmet（高速入力機能）の設定から、HTMLの文法ミスを自動チェックする拡張機能まで、現場基準の効率的な環境を一緒に構築します。
この60分で得られる3つの武器
Googleから高く評価されるタグの選び方を理解し、検索上位を狙えるサイト構造の作り方を学びます。
プロが使うショートカットや自動補完機能を習得し、タイピングの手間を最小限にする技術を体得します。
画像への代替テキストや適切な階層構造など、誰にとっても使いやすい「優しいWeb」の作り方を伝授します。
※本講座は、将来的にWebデザイナー、コーダー、フロントエンドエンジニアを目指す未経験者のためのエントリー講座です。「モクモク」独自のマンツーマン形式により、コードを1行書くたびに生まれる疑問をその場で解決します。
現役エンジニアが教えるHTML入門
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
