HTMLとJavaScriptを統合するには2つの方法があります。１つがインラインスクリプトを使用する方法。もう１つが外部スクリプトファイルを参照する方法です。
インラインスクリプトは、HTMLドキュメント内に直接JavaScriptコードを記述する方法。外部スクリプトは、JavaScriptコードを別のファイルに記述し、HTMLドキュメントからそのファイルを参照する方法です。
どちらの方法も、Webページに動的な機能を追加するために使用されますが、使用するシナリオによって最適な選択肢が異なります。
このページではそもそも、JavaScriptってどうやって動かせばよいのか？JavaScriptとHTMLってどういう関係性なのか？このページでは、JavaScript初心者向けにJavaScriptとHTMLの関係性・制御方法を１から解説します。
- JavaScriptとHTMLの関係性について
- HTMLでJavaScriptを呼び出す方法
- インラインスクリプト
- 外部スクリプト
Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。
参考 【JavaScript入門】基本文法/基礎文法を5分で
HTMLとJavaScriptの関係性
HTMLとJavaScriptは、どちらも現代のWeb開発において不可欠な技術です。HTML（HyperText Markup Language）は、Webページの骨組みを作るためのマークアップ言語であり、ページの構造や内容を定義。JavaScriptはプログラミング言語であり、ページに動的な要素やインタラクティビティを加える役割を果たします。
この２つが組み合わさることで、静的な文書だけでなく、ユーザーと対話するインタラクティブなWebページを作成することが可能になります。
参考 HTML CSS JavaScriptの違い・役割を３分でおさらい
HTMLでは、例えば「テキスト」「画像」「リンク」など、ページ上に表示される要素を定義します。HTMLタグを使用して、これらの要素をマークアップしブラウザにどのように表示すべきかを指示するのがHTMLの役割。
対してJavaScripでtは、HTMLで構築された基本的なページ構造に対して、動きや反応を加えることで、Webページをより動的にします。例えば、ユーザーがボタンをクリックしたときにポップアップを表示させたり、フォームに入力されたデータを検証したり、サーバーから新しい情報を取得してページに即時表示したりすることができます。JavaScriptは、HTMLとCSSと組み合わせて、ユーザー体験を向上させるための重要なツールです。
HTMLとJavaScriptを統合する
HTMLとJavaScriptを統合するには以下2つの方法があります。インラインスクリプトを使用する方法と、外部スクリプトファイルを参照する方法です。
| 特徴 | インラインスクリプト | 外部スクリプトファイル |
|---|---|---|
| 定義場所 | HTMLドキュメント内に直接記述 | 別のファイルにJavaScriptコードを記述し、HTMLから参照 |
| 利点 | 小さなスクリプトに適しており、外部ファイルを読み込む必要がないため、読み込み時間が短縮される場合がある | コードの再利用性が高まり、保守性が向上。大規模開発に適している |
| 制限 | HTMLとJavaScriptが密結合になり、コードが冗長になりがち。大規模開発には不向き | 外部ファイルの読み込みにより、ページの表示が遅くなる可能性がある |
| 使用例 | <script>alert('こんにちは！');</script> | <script src='scripts.js'></script> |
- インラインスクリプトは、HTMLドキュメント内にJavaScriptコードを直接埋め込む方法。この方法は、コード量が少なく、特定のページにのみ適用される小さな機能や動作に適しています。しかし、この方法はページのHTMLとJavaScriptコードが混在するため、複雑なプロジェクトではコードの管理が難しくなります。
- 外部スクリプトファイルの参照は、JavaScriptコードをHTMLから切り離し、別のファイルに保持する方法です。この方法は、コードの再利用性と保守性を高め、複数のページで同じスクリプトを使用する場合に特に有効です。ただし、外部ファイルの読み込みには時間がかかるため、Webサイトの読み込み速度に影響を与える可能性があります。
それぞれの方法を実際のサンプルコードを用いながら詳しく説明していきます。
JavaScript：インラインスクリプト
インラインスクリプトは、HTMLドキュメント内に直接JavaScriptコードを書き込む方法です。この方法を用いることで、HTML要素に直接動作を結びつけることができ、特定のイベントが発生した際にスクリプトを実行させることが可能です。
以下の＜sccript＞タグで囲まれた中にJavaScriptのコードを記載しています。
<!DOCTYPE html>
<html>
<head>
<title>インラインスクリプトのデモ</title>
</head>
<body>
<script>
// JavaScriptコードをここに書く
document.write('Hello, World!');
</script>
</body>
</html>
↑の例では、<script>タグ内にdocument.write('Hello, World!');というJavaScriptのコードを記述しています。このコードは、Webページが読み込まれると同時に実行され、「Hello, World!」というテキストがWebページに直接書き込まれます。
また、HTML要素のイベント属性内にJavaScriptコードを記述することで、インラインスクリプトを使用することもできます。以下に、いくつかの基本的な例を示します。
<button onclick="alert('クリックされました！')">クリックしてね</button>
↑の例では、ボタンがクリックされると、alert関数が呼び出され、「クリックされました！」というメッセージが表示されます。
<p onmouseover="this.style.color='red'">マウスを乗せてみてください</p>
↑の例では、段落のテキストの上にマウスを乗せると、テキストの色が赤に変わります。thisキーワードは現在のHTML要素を参照します。
<form onsubmit="return confirm('送信してもよろしいですか？');">
<input type="text" name="name">
<input type="submit" value="送信">
</form>
この例では、フォームが送信されようとすると、ユーザーに送信の確認を求めるダイアログが表示されます。confirm関数はユーザーが「OK」をクリックするとtrueを、それ以外をクリックするとfalseを返します。falseが返されると、フォームの送信はキャンセルされます。
インラインスクリプトのメリット・デメリット
インラインスクリプトの主な利点は小さなJavaScriptコードを迅速にテストし、結果を直接見ることができる点です。また、外部のスクリプトファイルを読み込む必要がないため、ページの読み込み時間を短縮できる場合があります。
一方で、インラインスクリプトの使用にはいくつかの制限があります。HTMLとJavaScriptが密接に結びつくため、コードが冗長になりやすく、特に大規模なプロジェクトでは管理が難しくなることがあります。また、同じJavaScriptコードを複数のページや要素で再利用することが難しくなります。
ポイント インラインスクリプトのメリット
- 即時実行： ページのロード時に即時実行されるため、初期化処理に適している。
- 迅速なテストとデバッグ： 小規模なスクリプトや単純な動作のテストに迅速かつ便利。
- 読み込み時間の短縮： 外部ファイルを読み込む必要がないため、読み込み時間が短縮される場合がある。
ポイント インラインスクリプトのデメリット
- 密結合： HTMLとJavaScriptが密結合になり、コードが冗長になりがち。
- 読み込み速度の低下： ページの読み込み速度が遅くなる可能性がある。（特にスクリプトが多い場合）
- 再利用性と保守性の低下： コードの再利用性が低下し、保守性が悪くなる。
- 大規模開発の不向き： 大規模なアプリケーションや複雑な動作には適していない。
まとめると、分かりやすい方法だけど、本格的に開発をするならこの方法はやめておこうね！というのがインラインスクリプトです。ちょっと試しにやってみたい・・・という場合にのみ利用するのがおすすめの方法です。
JavaScript：外部スクリプトファイル
外部スクリプトとはその名の通りJavaScriptファイル（JSファイル）を別の場所に保存しておいて、HTMLファイルから呼び出す方法です。
外部のファイルを参照するようにすることで、JavaScriptコードを再利用しやすくなりHTMLとJavaScriptの分離が促進されるため、Web開発プロセスがより管理しやすく効率的になります。外部スクリプトファイルは通常、.js拡張子を持ち、<script>タグのsrc属性を使用してHTMLページに組み込まれます。
<!DOCTYPE html>
<html>
<head>
<title>外部スクリプトのデモ</title>
</head>
<body>
<h1>外部スクリプトの例</h1>
<script src="example.js"></script>
</body>
</html>
↑の例では、example.jsという名前の外部JavaScriptファイルが同じディレクトリに存在すると仮定しています。ブラウザはこのスクリプトファイルを読み込み、HTMLページに定義された要素に対してJavaScriptコードを実行します。
JavaScript：外部スクリプトの利点
大規模なWebアプリケーション開発の現場では外部スクリプトの利用が一般的です。コードの再利用性を高め、プロジェクトの管理を容易にすることで、開発の効率性と品質を大幅に向上させることができます。
ポイント 外部スクリプトの利点
- 再利用性と保守性の向上
- 同じJavaScriptファイルを複数のHTMLページで再利用できるため、コードの重複が減り、保守が容易になる。
- 読み込みの最適化
- 外部スクリプトファイルはブラウザによってキャッシュされるため、ページの読み込み時間が短縮される可能性がある。
- HTMLとJavaScriptの分離
- プレゼンテーション（HTML）とロジック（JavaScript）を分離することで、開発プロセスがよりクリーンで管理しやすくなる。
この例では、HTMLページにメッセージを表示する簡単な外部JavaScriptファイルを組み込む方法を示します。
Step1 外部JavaScriptファイルの作成
まず、message.jsという名前の外部JavaScriptファイルを作成します。このファイルには、Webページにメッセージを表示するためのコードを記述します。拡張子を「.js」にすることがポイントで、あとは普通にJavaScriptのコードを記載すればOK。
// message.js
function showMessage() {
document.getElementById('message').textContent = '外部スクリプトからこんにちは！';
}
このスクリプトはshowMessageという関数を定義し、IDがmessageのHTML要素を探し、そのテキスト内容を「外部スクリプトからこんにちは！」に変更します。
Step2 HTMLドキュメントの作成
次に、上記のJavaScriptファイルを参照するHTMLドキュメントを作成します。
<!DOCTYPE html>
<html>
<head>
<title>外部スクリプトのサンプル</title>
</head>
<body>
<h1>外部スクリプトのデモ</h1>
<p id="message">このメッセージは置き換えられます。</p>
<button onclick="showMessage()">メッセージを表示</button>
<script src="message.js"></script>
</body>
</html>
このHTMLドキュメントには、<script src="message.js"></script>という行が含まれており、これによりmessage.jsファイルがページに読み込まれます。また、showMessage()関数がボタンクリックイベントによって呼び出され、IDがmessageの段落のテキストがJavaScript関数によって変更されます。
<script src="message.js"></script> と記述されているため、jsファイルはHTMLファイルと同じディレクトリ（フォルダ）に存在している必要があります。
ポイント 動作の仕組み
- ユーザーがWebページをロードすると、ブラウザはHTMLドキュメントを解析し始めます。
<script src="message.js"></script>タグに到達すると、ブラウザは指定されたJavaScriptファイル（この例ではmessage.js）を読み込み、実行します。- ユーザーがボタンをクリックすると、
showMessage()関数が呼び出され、指定されたHTML要素のテキスト内容が変更されます。
この例では、外部スクリプトファイルを利用することで、JavaScriptコードをHTMLドキュメントから分離し、コードの再利用性と保守性を向上させる方法を示しています。外部スクリプトの利用は、特に大規模なWebアプリケーション開発において有効な手法です。
スキルアップを手軽に！
話題のサブスク型プログラミングスクールをご紹介。
SAMURAI TERAKOYA
月額2,980円から始める－入会金不要/途中解約自由。無料体験プランからスタート可能！
飲み会1回分以下の料金で継続的なスキルアップを。
Freeks(フリークス)
月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題＆転職サポート制度あり。
ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】（最大240,000円）