【１分で解説】HTMLでJavaScriptを呼び出す方法（２つだけ）

JavaScript

2020.01.30

このページでは、HTMLとJavaScriptの関係性を踏まえ、HTMLでJavaScriptを呼び出す方法を解説します。

そもそも、JavaScriptってどうやって動かせばよいのか？JavaScriptとHTMLってどういう関係性なのか？このページでは、JavaScript初心者向けにJavaScriptとHTMLの関係性・制御方法を１から解説します。

このページで学べる内容

JavaScript初心者の方でも知らないと恥ずかしい超・重要知識ばかりですので、是非最後までご覧ください。

【前提】HTMLとは？

HTMLの理解がある方はこの章は読み飛ばしてください。

HTMLとは、Hyper Text Markup Language の頭文字をとった単語で、 タグによってWebページを構造化するマークアップ言語です。

今見ているこのページも、HTMLで構成されています。HTMLを用いることで、文章全体の構造や構成、それぞれのテキストの意味をブラウザ・検索エンジンに明確に伝えることができます。

JavaScriptの主な役割は、HTMLの制御・コントロールです。

HTMLだけで構成されたコンテンツは常に静的です。つまり、画面上に動きが出てきません。文字を動かしたりとか、画像をスライドさせながら表示したり、ボタンを設置したり・・・などは、JavaScripで制御することで初めて実現できます。（※CSSでも実現可能な機能もあります。）

【補足】CSSって？

CSSは、HTMLで記述された文章の体裁やデザインを指定するために用いられる言語です。文字の色や、画像の大きさ、ページ全体のレイアウトの指定はCSSが担います。

JavaScriptは、HTMLと親和性が非常に高い言語です。特殊な例外を除いて、基本はJavaScriptはHTMLから呼び出されるて実行されます。

JavaScriptを呼び出す方法（HTMLファイルにJavaScriptを埋め込む方法）は２つしかありません。

１つが、インラインスクリプトという方法。もう１つが、外部スクリプトという方法です。

インラインスクリプトは、HTMLファイルの中に直接JavaScriptのコードを埋め込む方法です。

方法は単純で、<script>タグを設置し、その中にJavaScriptのコードを直接記述します。

<script>
    //ここにJavaScriptを記述します。
</script>

サンプルコード

See the Pen script1 by ビズドットオンライン (@BizOnline) on CodePen.

非常に簡易的な記述方法なのですが、欠点がいくつか存在します。

まず１つ目に、インラインスクリプトはHTMLファイルに埋め込まれる形となるため、そのページ内でしか当該のJavaScriptは動きません。つまり、他のページ（Webページ全体）にも同じ動作を適用させたい場合、同じJavaScriptのコードを同様に埋め込んでいく必要が出てきてしまいます。

逆に言えば、そのページ内だけで実現したい機能であればインラインスクリプトがおすすめです。

２つ目のデメリットは、可読性の低下です。

インラインでJavaScriptを埋め込むため、どこからどこまでがJavaScriptなのか？という点がわかりづらくなってしまいます。

また、JavaScriptのソースコードがHTMLファイル内に存在することになるため、ソースコードも長くなる傾向にあります。そのため、複雑な機能を実現したい場合には、次に解説する外部スクリプトを利用するのが無難だと言えます。

外部スクリプトとはその名の通り、JavaScriptファイル（JSファイル）を別の場所に保存しておいて、HTMLファイルから呼び出す方法です。

<script src="(読み込みたいJavaScriptファイル)"></script>

イメージはこんな感じ。

外部スクリプトにすれば、HTMLファイルとJavaScriptのコードが別々の場所で管理されるため可読性・保守性の向上が見込めます。

大規模なアプリケーション開発やWebページ構築時には、外部スクリプトを用いるのがスタンダードとなります。

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。