HTMLへのJavaScript記述方法をわかりやすく解説！使用例も紹介

私たちが普段見ているサイトにはHTMLが使われ、JavaScriptでサイトがより便利にしてくています。

そしてこの記事に訪れたあなたは、「HTMLにJavaScriptを使ってサイトを作ってみたい！」と考えていませんか？

しかし、いざサイトを作ろうとしたときに

「HTMLにJavaScriptを使う方法がわからない…」
「JavaScriptを外部ファイルで読み込む方法がわからない…」
「HTMLのIDタグをJavaScriptで取得するにはどうしたらいいの？」

とJavaScriptをどう使えばいいのかわからなくて困ってしまいますよね。

そこで今回はHTMLにJavaScriptを記述する方法を紹介！初心者のためにHTMLの書き方から解説していきます。

具体的な内容は以下の通りです。

HTMLやJavaScriptとは？
HTMLを書いてみよう
HTMLにJavaScriptを記述してみよう
HTMLとJavaScriptを使った使用例
HTMLとJavaScriptを学習する方法

この記事を読めばJavaScriptを使いこなせるようになりますよ。

HTMLやJavaScriptとは？

HTMLは私たちが普段目にするWebサイトを構成するマークアップ言語です。

文章や見出し、テーブルなどを作成する機能がタグとして備わっており、タグを使うことでHTMLを使ってサイトが作れるわけなんですね。

JavaScriptはサイトをより動的にしてくれます。例えば、一定時間ごとに表示する文を変えたり、ボタンをクリックすると文字が表示されたりできるようになるんですね。

そしてHTMLはタグで、JavaScriptが書けるようになりますよ。

実際のコードは後述する『HTMLにJavaScriptを記述してみよう』で紹介していますので、参考にしてくださいね。

HTMLを書いてみよう

「そもそもHTMLってどうやって書くの？」と疑問に思っている人もいるでしょうから、まずはHTMLを書く方法を解説していきますね。

実はHTMLファイルを作成するだけなら、メモ帳ですぐに作れてしまいます。

やり方は簡単で、メモ帳を保存するときに「〇〇.html」として保存するだけでHTMLファイルが作れるんですね。

保存するときにtxtファイルではなく、すべてのファイルとして保存するように気を付けてください。

それでは、保存方法がわかったところで以下の内容をやってみましょう。

それぞれサンプルコードを載せますので、どのように動いているのか考えながら学習してみてくださいね。

HTMLファイルを作成してみる

まずはメモ帳に以下の内容を記述し、HTMLファイルとして保存しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset = "utf-8">
  <title>Hello</title>
</head>
<body>
  <p>Hello</p>
</body>
</html>

保存したファイルを開くとHelloが表示されたサイトが作れました。

コード内を見ると<head>のような記号がたくさんあり、これがHTMLタグと言われるものなんですね。

またコードの最後には</head>のような記号がたくさんあるのがわかりますか？これは終わりを意味しています。

つまり<head>から</head>までの範囲に<head>が適用されるわけなんですね。

それぞれのタグについて解説すると以下のようになります。

タグ	説明
<html>	HTMLの内容を記述するもの
<head>	Webページの性質などの情報を表す
<body>	Webページに表示される内容を表す
<meta charset=”utf-8″>	ファイルをUTF-8形式で記述する

これらはHTMLを作るうえで必要不可欠なものです。それぞれのタグがわからなくても、上記のコードが基本の形となるということだけ覚えておけば問題ないでしょう。

見出しや文を書く

次は表示される内容を変えて見出しや文章を付けてみましょう。

<body>
  <h1>大見出し</h1>
  <h2>小見出し1</h2>
  <p>文章</p>
  <h2>小見出し2</h2>
  <p>文章</p>
</body>

上記のコードを<body>タグ内に記述してファイルを開くと、見出しがついているのがわかるでしょう。

<body>タグ内を見ると、<p>や<h1>が記述されていますね。<p>は文章を表示させてくれるもので、<h1>は見出しを表示させてくれる機能です。

見出しに関しては<h6>まで存在し、数字が大きくなるほど見出しが小さくなっていきます。

テーブルを作成する

次はテーブルを作成してみましょう。テーブルを作成するには<table>タグを使います。

<body>
  <table border="2">
    <tr>
      <th>商品名</th>
　　　<th>価格</th>
　　</tr>
　　<tr>
　　　<td>野菜</td>
　　　<td>250円</td>
　　</tr>
　</table>
</body>

保存してファイルを開くとテーブルがしっかりと表示されました。上の段に見出しと商品のラベルがついて、下の段に野菜と250円が表示されていますね。

上から順番に見ていくと<table>タグがあり、ここでテーブルを作成しています。

border=”2”というのはテーブルの外枠の太さを表しているので自分の好みに合わせて変えるといいでしょう。

次に<tr>タグがあり、その中に<th>タグや<td>タグが記述されていますね。

<tr>タグは行を追加するものであり、<th>と<td>はそれぞれ見出しのセル、通常のセルを表してくれます。見出しのセルはラベルのように扱えますよ。

テキストボックスやボタンを追加する

次はテキストボックスやボタンを追加してみましょう。テキストボックスやボタンを追加するには<button>タグや<textarea>タグを使います。

<button onclick=sample();”>Click</button>
<textarea id="sample"></textarea>

上の<button>タグはボタンを、下の<textarea>タグはテキストボックスを追加してくれるんですね。

途中にあるonclickやidは一体何でしょうか？実はこれらがJavaScriptと重要にかかわってくれます。

まずボタンをクリックすると何かしらの変化を起こしてくれますよね。その機能を持たせるのがonclickです。

ボタンをクリックしたとき、onclickに指定された関数が実行されて変化が起きる仕組みになっているんですね。

またidにはJavaScriptで、指定されたidの情報を取得できます。例えば、テキストボックスに書かれた文章を取得するときにidが使われますよ。

HTMLにJavaScriptを記述してみよう

『HTMLとJavaScriptとは？』で解説した通り、タグでJavaScriptを記述できるようになります。ではどのように記述するのか見てみましょう。

<body>
  <script>
　　var str = "Hello!"
　　document.write(str)
  </script>
</body>

<body>部分に<script>タグを入れて、その中でJavaScriptを記述できます。（<head>タグにも入れられますよ。）

上記のコードならHello!を入れた変数を作り、document.writeで表示させているんですね。

それではJavaScriptを使いこなせるように、以下の内容も解説しておきます。

HTMLのIDタグを取得する
HTML要素を追加する
外部ファイルを読み込んでJavaScriptを使う

どれも重要なものですので、使いこなせるようにしましょう。

HTMLのIDタグを取得する

JavaScriptでよくやる事例としてHTMLのIDタグを入手することが多くあります。IDタグを入手するにはどうしたらいいのでしょうか？

IDタグを入手するにはgetElementByIdを使います。

<body>
  <p id="sample"></p>
  <script>
　　const str = document.getElementById("sample");
　　str.innerHTML = "Hello!";
  </script>
</body>

ファイルを開くとHello!と表示されたサイトが開きました。上記のコードを見るとタグには何も表示されていませんが、idとしてsampleがありますね。

このsampleをgetElementByIdで取得し、中身をHello!に変えているんですね。

IDタグの取得を上手く使えばある条件を満たすと表示が変わるように作れます。少しずつ動的なサイトになってきましたね。

HTML要素を追加する

またJavaScriptでよく使われる方法としてHTML要素を追加することも多くあります。
どのようにして追加するのか以下のコードを見てみましょう。

<body>
  <p id="sample">Hello!</p>
  <script>
　　const str = document.getElementById("sample");

　　const new_str = document.createElement("p");
　　new_str.textContent = "World";
　　str.appendChild(new_str);
  </script>
</body>

このcreateElementがHTML要素を追加する機能で、JavaScriptでHTMLが記述できるんですね。

作成された<p>は、Worldという文字が入り、idがsampleの<p>タグの後ろに配置されました。この方法もうまく使えば動的なサイトになれるので覚えておくといいですね。

外部ファイルを読み込んでJavaScriptを使う

JavaScriptを使うとき、HTMLファイルではなく外部ファイルとして使いたい場面はありませんか？

そんなときに「どうやって外部ファイルを読み込んだらいいんだろう…」と困ってしまいますよね。

実はやり方はとても簡単で、srcで外部ファイルのパスを指定すれば読み込めます。

<body>
  <script src="sample.js"></script>
</body>

上記のコードのようにsrcでファイル名を指定すれば外部ファイルを読み込んでくれるわけなんです。

HTMLファイルをたくさん作るときに、ひとつひとつのファイルにJavaScriptを使うのはとても面倒ですよね。

しかし外部ファイルを利用すると、すべてのHTMLファイルに上記のようなコードを記述するだけで、JavaScriptが使えてしまうのでとても便利なんです。

もしたくさんのファイルを作るときは外部ファイルを利用するといいですよ。

HTMLとJavaScriptを使った使用例

HTMLとJavaScriptを記述する方法がわかったところで、実際にHTMLとJavaScriptを使っていきましょう。

ここでは以下の内容を解説します。

使用例1：現在時刻を表示する
使用例2：テキストボックスに書き込んだ文を出力する
使用例3：4択クイズを作成する

それぞれサンプルコードを載せています。「コードをどうやって組むのかわからなかった…」と感じた人は、どのようにして動いているのかを考えてみてください。

使用例1：現在時刻を表示する

ファイルを開くと現在の時刻が表示されるようにしましょう。ファイルを開いた時の時間を表示させればいいので、毎秒ごとに更新する必要はありません。

考え方としては、時間はDate()を使えば作成できそうですね。完成したコードを見てみましょう。

<body>
  <script>
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    document.write(hour + ":" + minute + ":" + second);
  </script>
</body>

HTMLファイルの<body>部分を上記の内容に変更して、開いてみるとしっかりと時間が表示されましたね。

document.writeの部分に注目してください。Dateオブジェクトで現在時刻を取得した変数をdocument.writeでサイトに表示させているんですね。

使用例2：テキストボックスに書き込んだ文を出力する

次はテキストボックスに書き込んだ文を表示させてみましょう。以下の画像のようにボタンをクリックすると文章が変わるようにします。

<body>
  <script>
　　function clickNow(){
　　　var input = document.getElementById('input');
　　　var value = input.value;
　　　var msg = document.getElementById('msg');
　　　msg.textContent = "あなた：" + value;
　　}
　</script>
  <p id="msg">なにか入力してください</p>
  <input type="text" id="input">
  <button onclick="clickNow();">Click</button>
</body>

<body>部分を以下の内容に変更してみるとちゃんとできましたね。<script>部分を見ると関数clickNow()があるのがわかりますか？

この関数はボタンがクリックされたときに実行されるようになっています。実際に<button>タグを見てみるとonclick属性に関数が指定されていますね。

ボタンがクリックされると、テキストボックスのIDタグが取得されます。そのあと取得されたIDタグの中身が、id=msgの文章に反映されるわけなんですね。

使用例3：4択クイズを作成する

次は使用例2を応用して4択クイズを作成してみましょう。

正解の選択肢を選んでクリックすると正解の文が表示され、それ以外の文では不正解の文を表示させます。

<body>
  <script>
　　function ClickAnswer(){
　　　var c1 = document.getElementById('check1');
　　　var c2 = document.getElementById('check2');
　　　var c3 = document.getElementById('check3');
　　　var c4 = document.getElementById('check4');
　　　var ans = "";
　　　if(c2.checked){
　　　　ans = "正解！";
　　　}
　　　if(c1.checked || c3.checked || c4.checked){
　　　　ans = "不正解…";
　　　}
　　  var msg = document.getElementById('msg');
　　  msg.textContent = ans;
　　}
  </script>
  <p>朝の挨拶はどれ?</p>
  <p>
　  <input type="radio" name="quiz" id="check1">
      <label for="check1">こんにちは</label><br>
　  <input type="radio" name="quiz" id="check2">
      <label for="check2">おはよう</label><br>
　  <input type="radio" name="quiz" id="check3">
      <label for="check3">こんばんは</label><br>
　  <input type="radio" name="quiz" id="check4">
      <label for="check4">おやすみなさい</label>
  </p>
  <button onclick="ClickAnswer();">answer</button>
  <p id="msg"></p>
</body>

コードが長く「何をやっているのかさっぱりわからない！」と感じてしまう人もいるでしょう。

しかしコードが行っていることは使用例2のように、ボタンをクリックしたら文章を変更しているだけです。

ただ新しくradioや<label>タグが使われていますね。radioは上記の写真のようにどれか一つを選択するボタン、<label>は『おはよう』などのラベルを表します。

name属性をすべて一致させることで、その中から一つを選択できるようになるので4択クイズを作れるわけなんですね。

後はそれぞれの選択肢にIDタグをつけて『おはよう』をチェックした時に正解を、それ以外は不正解を表す文を表示させればＯＫですよ。