●目次
JavaScriptはWeb開発において非常に重要な役割を担いますが、初心者にとってその最初のステップは、JavaScriptをHTMLに適切に読み込む方法を理解することです。
この記事では、JavaScriptの基本的な読み込み方法と、その際の環境構築について詳しく説明します。
これにより、あなたのWebサイトに動的な要素を簡単に追加できるようになります。
JavaScriptを読み込む方法
JavaScriptをHTMLに読み込むためには、主に3つの方法があります。
- インラインスクリプト
- 内部スクリプト
- 外部スクリプト（推奨）
インラインスクリプト
JavaScriptコードをHTMLの<script>タグ内に直接記述する方法です。
シンプルで、少量のJavaScriptを記述する際に便利です。
JavaScript
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptを読み込む</title>
</head>
<body>
<h1>JavaScriptの読み込み例</h1>
<script>
console.log("Hello, World!");
</script>
</body>
</html>内部スクリプト
<script>タグ内にJavaScriptを記述し、HTMLの<head>や<body>の中に配置します。
これにより、複数のHTMLページでスクリプトを共有できますが、HTMLファイルが長くなりがちです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部JavaScriptの例</title>
</head>
<body>
<h1>内部スクリプトの利用例</h1>
<button id="myButton">クリックしてね</button>
<script>
document.getElementById('myButton').onclick = function() {
alert('ボタンがクリックされました');
};
</script>
</body>
</html>
外部スクリプト
JavaScriptを外部ファイルに保存し、そのファイルをHTMLに読み込む方法です。この方法は、メンテナンスが容易で、コードの再利用性が高いという利点があります。
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部JavaScriptの読み込み例</title>
</head>
<body>
<h1>外部JavaScriptの利用例</h1>
<button id="myButton">クリックしてね</button>
<script src="./js/script.js"></script>
</body>
</html>JavaScript（script.js）
document.getElementById('myButton').onclick = function() {
alert('外部スクリプトが動作しました');
};ディレクトリ構成
project/
├── index.html
├── js/
│ └── script.js
└── css/
└── style.cssまとめ
JavaScriptをHTMLに接続する方法は、CSS同様にインライン、内部、外部の3つがあります。
ウェブサイトの規模や管理のしやすさに応じて、適切な方法を選択することが重要です。
特に外部スクリプトは、効率的かつスケーラブルなサイト運営に適しているため、初心者から上級者まで幅広く利用されています。