HTMLとJavaScriptを統合するには2つの方法があります。1つがインラインスクリプトを使用する方法。もう1つが外部スクリプトファイルを参照する方法です。
インラインスクリプトは、HTMLドキュメント内に直接JavaScriptコードを記述する方法。外部スクリプトは、JavaScriptコードを別のファイルに記述し、HTMLドキュメントからそのファイルを参照する方法です。
どちらの方法も、Webページに動的な機能を追加するために使用されますが、使用するシナリオによって最適な選択肢が異なります。
このページではそもそも、JavaScriptってどうやって動かせばよいのか?JavaScriptとHTMLってどういう関係性なのか?このページでは、JavaScript初心者向けにJavaScriptとHTMLの関係性・制御方法を1から解説します。
Webエンジニア/Webデザイナーを目指す方であれば知らないと恥ずかしい超・基本知識の1つです。是非最後までご覧ください。
参考 【JavaScript入門】基本文法/基礎文法を5分で
HTMLとJavaScriptの関係性
HTMLとJavaScriptは、どちらも現代のWeb開発において不可欠な技術です。HTML(HyperText Markup Language)は、Webページの骨組みを作るためのマークアップ言語であり、ページの構造や内容を定義。JavaScriptはプログラミング言語であり、ページに動的な要素やインタラクティビティを加える役割を果たします。
この2つが組み合わさることで、静的な文書だけでなく、ユーザーと対話するインタラクティブなWebページを作成することが可能になります。
参考 HTML CSS JavaScriptの違い・役割を3分でおさらい
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)を分離することで、開発プロセスがよりクリーンで管理しやすくなる。
スキルアップを手軽に!
話題のサブスク型プログラミングスクールをご紹介。
SAMURAI TERAKOYA
月額2,980円から始める-入会金不要/途中解約自由。無料体験プランからスタート可能!
飲み会1回分以下の料金で継続的なスキルアップを。
Freeks(フリークス)
月額10,780円でJavaScript、Pythonなどのカリキュラムが学び放題。
質問し放題&転職サポート制度あり。
ウズウズカレッジ/CCNAコース用
月額33,000円(税込)〜インフラエンジニアの登竜門「CCNA」取得を目指す。
コース受講→転職成功で【実質全額無料】(最大240,000円)