今すぐ覚えられる!HTMLでJavaScriptを読み込む(呼び出す)方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでJavaScriptを呼び出す方法について解説しています。Webサイトを制作する上でHTMLやCSSを使えば静的なページは作れますが、動きを出して表現力を上げたいと思ったらJavaScriptを覚える必要があります。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

監修してくれたメンター

寺谷 文宏

Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。テックアカデミーではフロントエンド、Javaコースを担当。

HTMLとCSSのみでは動きのあるWebページを作ることは難しいです。例えばプルダウンメニューやスライドインページなどはCSSのみで出来ない訳ではありませんが、難しい技術になってきます。

そんな時に使用するプログラミング言語が「JavaScript」です。

今回は、そんなJavaScriptをHTMLから呼び出す方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

目次

1時間でできる無料体験!

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

これからプログラミングを始める方向けの無料動画講座もあります。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptを読み込む(呼び出す)方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptの読み込み方

JavaScriptプログラムを実行するには、次の2通りの方法があります。

1.HTMLファイルにJavaScriptファイル名を記述して外部ファイルごと読込む方法(外部スクリプト)

2.HTMLファイル内にJavaScriptコードをそのまま記述してしまう方法(インラインスクリプト)

1.外部スクリプト

外部スクリプトをHTML内で読み込む方法です。Webデザインの現場ではこちらの方が一般的に使用されています。

書き方は以下の通りです。

<script type="text/javascript" src="techAcademy.js"></script>

HTMLファイルに上記のコードを1行記述することで、techAcademy.jsという名称のファイルに記述されたJavaScriptプログラムを実行することができます。

また、この1行をHTMLファイルのどこに記述するかという点についてですが、場所はHTMLファイル内<body>タグの最下部が一番確実です。

以下のようにHTMLファイル内に記述しましょう。

HTML

<html>
  <head></head>
  <body>
    <p>ここにHTMLの文章などが入ります</p>
    <script type="text/javascript" src="techAcademy.js"></script>
  </body>
</html>

ここで、JSファイル読込み処理のsrcの値は、HTMLファイルとJSファイルの配置場所によって変化するので気を付けましょう。

例えば、HTMLファイルと同じディレクトリにjsというフォルダがあり、その中にtechAcademy.jsというファイルが配置されている場合、JSファイル読み込み処理は以下のように記述します。

<script type="text/javascript" src="js/techAcademy.js"></script>

2.インラインスクリプト

HTML内にJavaScriptを直接埋め込む方法です。

一般的にほとんど使う機会はありませんが、覚えておくと良いでしょう。

書き方は以下の通りです。

HTML

<script type="text/javascript">
  // タグ内にjavascriptコードを直接記述します。
  console.log("JavaScriptを実行しています");
</script>

上記のようなコードをHTMLファイルのbodyタグ内に記述することで、JavaScriptを動作させることができます。

 

大石ゆかり

JavaScriptもCSSのようにファイルに直接書いたり、外部のファイルから読み込んだり出来るんですね~♪

田島悠介

そうだよ。HTMLとJavaScriptは親和性が高いんだ。

大石ゆかり

せっかくなので、プログラミング言語らしいところが見てみたいです!

田島悠介

じゃあ、さっそく画面に今日の日付を表示するプログラムを書いてみよう!

 

実際に書いてみよう

JavaScriptで動きのある画面を作る例として、ボタンを押すと今日の日付が表示されるプログラムをご紹介します。

画面実行イメージ

「今日は何日ですか?」のボタンを押下すると、テキストボックスにメッセージが表示されます。

JavaScript ( techAcademy.js )

// ボタンを押すと、ブロック内のプログラムが実行される
$("#btn1").on("click", function()  {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let message = `今日は${year}年${month}月${day}日です`
  // jQueryを使って画面にメッセージを表示する
  $("#tBox").val(message);
});

HTML ( jsLoad.html )

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HelloTechAcademy</title>
    <link rel="stylesheet" href="sample.css">
  </head>
  <body>
    <p class="title">Hello TechAcademy !</p>
    <div id="area1">
      <button type="button" id="btn1">今日は何日ですか?</button>
      <br>
      <input type="text" id="tBox" class="font-main" />
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="techAcademy.js"></script>
  </body>
</html>

CSS ( sample.css )

.font-main {
  padding: 2px;
}

#btn1 {
  margin-bottom: 4px;
}

 

[PR] Webデザインで副業する学習方法を動画で公開中

まとめ

今回はJavaScriptファイルをHTMLから読み込んで、実際に動きのある画面が実現できるプログラムをご紹介しました。

JavaScriptを使ったページを作るには、まずJSファイルの読み込みに成功する必要があります。

読み込みを成功させて、動きのあるリッチなサイトを作っていきましょう。

JavaScriptのwindow.openメソッドの使い方についても合わせてご覧ください。

 

監修してくれたメンター

寺谷文宏 ( Teratani Fumihiro )

Webアプリケーションエンジニアとして数多くのプロジェクトを経験し、
フロントエンドからサーバーサイドまで総合的な開発を得意としています。
TechAcademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

ボタンを押すだけで、今日の日付が表示されました。

田島悠介

JavaScriptを使えばこのぐらいは簡単に実現できるよ。

大石ゆかり

HTMLやCSSでは、そういうの出来ないですよね~。

田島悠介

そうだね。他にもJavaScriptのコンテンツがあるので、よかったら見てみてね。

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料体験 に参加してみませんか?

初心者でも最短1時間で学習が体験できるカリキュラム、現役エンジニアに何でも相談できるカウンセリング、無制限のチャット質問サービスすべて無料で体験 できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら体験者限定の割引特典付き! 無料体験はこちら

HTMLを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

HTMLを学習していて、このように思ったことはありませんか?

テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する