Webページに「動き」を与えるJavaScript。
しかし、HTMLにどうやって埋め込めばよいかわからず、困っている人も多いでしょう。
そこでこの記事では、HTMLにJavaScriptを埋め込むための基本的な2つの方法から、Webサイトの表示速度を損なわないための応用的なテクニックまで、初心者の方にもわかりやすく丁寧に解説します。
 |
|
JavaScriptをHTMLに埋め込む2つの基本パターン
HTMLファイルでJavaScriptを動作させるには、主に「HTMLファイル内に直接書き込む方法」と、「外部に専用ファイルを作成して読み込む方法」があります。
どちらも<script>というHTMLタグを利用する点は共通しています。
それぞれの方法を具体的に見ていきましょう。
scriptをHTMLに直接埋め込む
一つ目は、HTMLファイル内の<script>タグの開始タグと終了タグの間に、直接JavaScriptのコードを記述する方法です。
この方法を「インライン」や「埋め込み」形式と呼びます。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの埋め込みサンプル</title>
</head>
<body>
<h1>ボタンをクリックしてください</h1>
<button id="alertButton">クリック！</button>
<script>
// idが"alertButton"の要素を取得
const button = document.getElementById('alertButton');
// ボタンがクリックされた時の処理を定義
button.addEventListener('click', function() {
alert('ボタンがクリックされました！');
});
</script>
</body>
</html>
実行結果
上記のHTMLファイルをブラウザで開くと、「ボタンをクリックしてください」という見出しと「クリック！」というボタンが表示されます。
そのボタンをクリックすると、「ボタンがクリックされました！」というメッセージのダイアログが画面に現れます。
ソースコードの解説
このサンプルでは、<body>タグの終わりに<script>タグを設置しています。
const button = document.getElementById('alertButton');この行は、HTML内にあるid="alertButton"という属性を持つ要素（この場合は<button>タグ）を探し出し、buttonという名前の定数に格納する処理です。button.addEventListener('click', function() { ... });これは、先ほど取得したボタン（button）に対して、「もしクリックされたら、function() { ... }の中の処理を実行せよ」という命令を追加しています。addEventListenerはイベント（ここではクリック）を監視するための機能です。alert('ボタンがクリックされました！');addEventListenerによって指定された処理の中身です。alert()は、引数に指定した文字列をブラウザの警告ダイアログとして表示する命令。これにより、ボタンがクリックされたことをユーザーが視覚的に認識できます。
このように、HTMLファイル内に直接スクリプトを記述することで、手軽に動作を試すことが可能です。
外部ファイルとしてJavaScriptを読み込む
二つ目は、JavaScriptのコードを.jsという拡張子を持つ別のファイルとして保存し、HTMLからそのファイルを読み込む方法です。
こちらが現在、Web開発における主流な方法といえるでしょう。
サンプルコード
まず、JavaScriptのコードだけを記述したファイルを作成します。
ファイル名は任意ですが、ここではscript.jsとします。
【script.js】
// idが"alertButton"の要素を取得
const button = document.getElementById('alertButton');
// ボタンがクリックされた時の処理を定義
button.addEventListener('click', function() {
alert('外部ファイルからJavaScriptが実行されました！');
});
次に、このscript.jsを読み込むためのHTMLファイルを作成します。
【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの外部読み込みサンプル</title>
</head>
<body>
<h1>ボタンをクリックしてください</h1>
<button id="alertButton">クリック！</button>
<script src="script.js"></script>
</body>
</html>
実行結果
index.htmlをブラウザで開くと、先ほどの直接埋め込んだ場合と全く同じようにボタンが表示されます。
そしてボタンをクリックすると、「外部ファイルからJavaScriptが実行されました！」というメッセージのダイアログが現れます。
ソースコードの解説
JavaScriptのコード（script.js）の内容は、先ほどのインライン形式で書いたものとほぼ同じです。
重要なのはHTML側の<script>タグです。
<script src="script.js"></script><script>タグにsrc属性（ソースの略）を追加し、その値に読み込みたいJavaScriptファイルへのパスを指定します。今回はHTMLファイルと同じ階層にscript.jsを置いているため、ファイル名だけの指定で問題ありません。
src属性を使うと、ブラウザは指定されたファイルをダウンロードし、その中身を解釈して実行します。
これにより、HTMLとJavaScriptのコードを完全に分離することが実現できるのです。
HTMLに直接埋め込むメリット・デメリット
手軽な直接埋め込みですが、いくつかの利点と欠点があります。
メリット
最大のメリットは、HTMLファイル一つで完結する手軽さでしょう。
外部ファイルを別途作成する必要がなく、HTTPリクエスト（サーバーへのファイル要求）の回数も増えません。
ごく短いコードを試したり、そのページだけでしか使わない特殊な処理を記述したりする場合には便利です。
デメリット
一方で、デメリットも存在します。
JavaScriptのコードが長くなると、HTMLファイル全体の記述量が増え、どこに何が書かれているのか見通しが悪くなります。
これは、コードの管理を難しくする要因です。
また、他のHTMLページで同じJavaScriptを使いたくなった場合、その都度コードをコピー＆ペーストする必要があり、修正があった際にはすべてのページのコードを書き直さなければなりません。
これは非効率的で、ミスの原因にもなります。
外部ファイルとしてJavaScriptを読み込むメリット・デメリット
現在主流となっている「外部ファイル読み込み」の利点と欠点を見ていきましょう。
メリット
最大のメリットは、HTML（構造）とJavaScript（振る舞い）を分離できる点にあります。
これにより、コードの役割分担が明確になり、管理や修正が非常に容易になります。
また、一つのJavaScriptファイルを複数のHTMLページから読み込むこともできるため、コードの再利用性が格段に向上します。
さらに、一度読み込まれた外部JavaScriptファイルはブラウザにキャッシュ（一時保存）されるため、ユーザーがサイト内の別ページに移動した際に、再度同じファイルをダウンロードする必要がありません。
結果として、ページの表示速度の向上に繋がるのです。
デメリット
デメリットは、管理するファイルがHTMLとJavaScriptの2つ以上に分かれる点です。
しかし、これはコードの管理しやすさというメリットの裏返しでもあり、現代の開発ではほとんど問題になりません。
また、ファイルを読み込むためのHTTPリクエストが発生しますが、これも後述するasync/defer属性や、現在の通信技術（HTTP/2など）によって影響は最小限に抑えられます。
読み込みを効率化する2つの属性（async・defer）
外部ファイルとしてJavaScriptを読み込む際、ページの表示パフォーマンスを向上させるための重要な属性がasyncとdeferです。
これらは<script>タグに追加して使用します。
ブラウザはHTMLを上から順に読み込み（解析し）、画面に表示していきます。
その途中で<script src="..."></script>を見つけると、通常はHTMLの解析を一旦中断し、JavaScriptファイルのダウンロードと実行を優先します。
もしJavaScriptファイルが大きければ、その間ユーザーは真っ白な画面を見ることになりかねません。
asyncとdeferは、この問題を解決するために生まれました。
非同期で実行する「async属性」
async属性は「asynchronous（非同期）」の略です。
この属性を付けた<script>タグは、HTMLの解析を止めずに、解析と並行してJavaScriptファイルのダウンロードを進めます。
そして、ダウンロードが完了した時点でHTMLの解析を中断し、スクリプトを実行します。
<script src="analytics.js" async></script>ダウンロードが完了次第すぐに実行されるため、複数のasyncスクリプトがある場合、実行される順番は保証されません。
そのため、他のスクリプトに依存しない、独立した機能（例えばGoogle Analyticsのようなアクセス解析タグなど）の読み込みに適しています。
HTMLの解析後に実行する「defer属性」
defer属性は「延期する」という意味を持ちます。
この属性を付けた<script>タグも、asyncと同様にHTMLの解析と並行してダウンロードが行われます。
しかし、asyncと決定的に違うのは、ダウンロードが完了してもすぐには実行されない点です。
スクリプトの実行は、HTML全体の解析がすべて完了した直後（DOMContentLoadedイベントの前）まで延期されます。
<script src="main.js" defer></script>複数のdeferスクリプトがある場合、HTMLに記述された順序通りに実行されることが保証されます。
HTMLの要素（DOM）を操作するような一般的なJavaScriptは、HTMLの解析が終わってから実行されるべきなので、このdefer属性の利用が、現在最も安全で推奨される方法となっています。
初心者が「HTMLでのJavaScript埋め込み」などのスキルを効率的に学ぶには
HTMLでのJavaScript埋め込みや外部ファイル読み込みといったことをはじめ、HTML/CSSやWordPressに関するスキルを高めたい場合は、「WPHack講座」がおすすめです。
WPHack講座のメリットは、主に以下の通りです。
格安料金でHTMLを中心としたスキルを高めたい場合には最適なので、「月数千円の出費で効率的にスキルを身に付けられる」という点にメリットを感じる方は、「WPHack講座」の利用を検討してみてもいいかもしれません。
実務未経験エンジニアでも希望の転職先を見つけやすい！！
週1～3日からできる副業案件多数！！
フリーランス案件の単価の高さは圧倒的！！
