このページでは、HTMLとJavaScriptの関係性を踏まえ、HTMLでJavaScriptを呼び出す方法を解説します。
そもそも、JavaScriptってどうやって動かせばよいのか?JavaScriptとHTMLってどういう関係性なのか?このページでは、JavaScript初心者向けにJavaScriptとHTMLの関係性・制御方法を1から解説します。
- 【前提】HTMLとは? ⇒詳細解説ページへのリンクあり
- JavaScriptとHTMLの関係性について
- HTMLでJavaScriptを呼び出す方法―インラインスクリプトと外部スクリプト
JavaScript初心者の方でも知らないと恥ずかしい超・重要知識ばかりですので、是非最後までご覧ください。
【前提】HTMLとは?
HTMLとは、Hyper Text Markup Language の頭文字をとった単語で、 タグによってWebページを構造化するマークアップ言語です。

今見ているこのページも、HTMLで構成されています。HTMLを用いることで、文章全体の構造や構成、それぞれのテキストの意味をブラウザ・検索エンジンに明確に伝えることができます。
JavaScriptとHTMLの関係性は?
JavaScriptの主な役割は、HTMLの制御・コントロールです。
HTMLだけで構成されたコンテンツは常に静的です。つまり、画面上に動きが出てきません。文字を動かしたりとか、画像をスライドさせながら表示したり、ボタンを設置したり・・・などは、JavaScripで制御することで初めて実現できます。(※CSSでも実現可能な機能もあります。)
CSSは、HTMLで記述された文章の体裁やデザインを指定するために用いられる言語です。文字の色や、画像の大きさ、ページ全体のレイアウトの指定はCSSが担います。
JavaScriptはHTMLから呼び出すことができる
JavaScriptは、HTMLと親和性が非常に高い言語です。特殊な例外を除いて、基本はJavaScriptはHTMLから呼び出されるて実行されます。

JavaScriptを呼び出す方法(HTMLファイルにJavaScriptを埋め込む方法)は2つしかありません。
1つが、インラインスクリプトという方法。もう1つが、外部スクリプトという方法です。
JavaScript:インラインスクリプトで読み込む
インラインスクリプトは、HTMLファイルの中に直接JavaScriptのコードを埋め込む方法です。
方法は単純で、<script>タグを設置し、その中にJavaScriptのコードを直接記述します。
<script> //ここにJavaScriptを記述します。 </script>
サンプルコード
See the Pen script1 by ビズドットオンライン (@BizOnline) on CodePen.
インラインスクリプトのデメリット①:適用範囲
非常に簡易的な記述方法なのですが、欠点がいくつか存在します。
まず1つ目に、インラインスクリプトはHTMLファイルに埋め込まれる形となるため、そのページ内でしか当該のJavaScriptは動きません。つまり、他のページ(Webページ全体)にも同じ動作を適用させたい場合、同じJavaScriptのコードを同様に埋め込んでいく必要が出てきてしまいます。
逆に言えば、そのページ内だけで実現したい機能であればインラインスクリプトがおすすめです。
インラインスクリプトのデメリット②:HTMLファイルの可読性が下がる
2つ目のデメリットは、可読性の低下です。
インラインでJavaScriptを埋め込むため、どこからどこまでがJavaScriptなのか?という点がわかりづらくなってしまいます。
また、JavaScriptのソースコードがHTMLファイル内に存在することになるため、ソースコードも長くなる傾向にあります。そのため、複雑な機能を実現したい場合には、次に解説する外部スクリプトを利用するのが無難だと言えます。
JavaScript:外部スクリプトで呼び出す
外部スクリプトとはその名の通り、JavaScriptファイル(JSファイル)を別の場所に保存しておいて、HTMLファイルから呼び出す方法です。
<script src="(読み込みたいJavaScriptファイル)"></script>
イメージはこんな感じ。

外部スクリプトにすれば、HTMLファイルとJavaScriptのコードが別々の場所で管理されるため可読性・保守性の向上が見込めます。
大規模なアプリケーション開発やWebページ構築時には、外部スクリプトを用いるのがスタンダードとなります。
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、1から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。