アジェンダ
Web開発では、コードの管理や読みやすさを向上させるために、HTMLファイル内に書かれているJavaScriptコードを外部ファイルに切り分けることが推奨されています。この記事では、HTML内のscriptタグに直接書かれたJavaScriptを、外部ファイルとして切り分ける方法を簡単に解説します。
1. インラインJavaScriptの問題点
例えば、以下のようにHTML内に直接JavaScriptコードが書かれているとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>ようこそ！</h1>
<button id="btn">クリックしてね</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
alert('ボタンがクリックされました');
});
</script>
</body>
</html>
このコードは動作しますが、JavaScriptがHTMLファイルに直接書かれているため、可読性やメンテナンス性が低くなります。
2. 外部JavaScriptファイルを作成
まず、JavaScriptコードを外部ファイルに移すために、新しいJavaScriptファイルを作成します。ファイル名はscript.jsにしましょう。このファイルに以下のコードを記述します。
document.getElementById('btn').addEventListener('click', function() {
alert('ボタンがクリックされました');
});
3. HTMLファイルで外部ファイルを読み込む
次に、HTMLファイル内のscriptタグを修正して、外部のJavaScriptファイルを読み込むようにします。先ほどのインラインコードを削除し、<script>タグでscript.jsを参照します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>ようこそ！</h1>
<button id="btn">クリックしてね</button>
<script src="./script.js"></script>
</body>
</html>
4. 外部ファイルを利用するメリット
- 可読性の向上: HTMLとJavaScriptが分離されることで、コードの構造がよりシンプルで理解しやすくなります。
- メンテナンス性の向上: 複数のHTMLファイルで同じJavaScriptを使いたい場合、外部ファイルを参照するだけで済むため、コードの再利用が容易になります。
- パフォーマンスの向上: 外部JavaScriptファイルはキャッシュされるため、ページの読み込み速度が向上することがあります。
まとめ
HTMLファイル内に直接書かれているJavaScriptコードは、外部ファイルに分割することで、管理やメンテナンスが容易になります。外部ファイルを使うことで、より整理されたコードを作成できるため、プロジェクトが大規模になった場合でも効率的に開発を進めることができます。