JavaScriptの基本(2) HTMLにJavaScriptのコードを記述する方法

2023年1月9日2025年2月14日

当ページのリンクには広告が含まれています。

HTMLの<script>タグを使うことで、JavaScriptのコードをHTML内に記述することができます。前回の講座でconsole.log()の使い方を学んだので、HTMLでの記述方法を見てみましょう。

確かな力が身につくJavaScript「超」入門第2版 [ 狩野祐東 ]

楽天ブックス

¥2,728 （2025/02/13 11:47時点 | 楽天市場調べ）

Amazon

楽天市場

メルカリ

ポチップ

JavaScriptをHTMLに記述する

以下のように<script>タグを使って、HTML内にJavaScriptを書けます。

<body>
    <script>
      console.log("HTML内にJavaScriptを記述する");
    </script>
</body>

このように記述すると、コンソールに”HTML内にJavaScriptを記述する”と表示されます。実際の開発では、HTMLで画面を作りながらJavaScriptで動作を制御するため、両者を組み合わせて使うことが基本となります。学習を進める中で、HTMLの知識も身につけていきましょう！

また、JavaScriptを外部ファイルとして読み込む方法もあります。

<head>
    <script src="script.js"></script>
</head>

このようにすることでHTMLとJavaScriptのファイルを分けることができるのでコードの可読性が向上します。基本的にJavaScriptのコードは長くなることが多いので、この方法でJavaScriptファイルをHTMLに取り込むことがほとんどです。

JavaScriptでメッセージを表示する方法

console.log()での出力

console.log()を使うことで、ブラウザの開発ツールのコンソールにメッセージを表示できます。
これは前回の講座で紹介したので復習ですね！

console.log("こんにちは、JavaScript！");

これは主にデバッグ目的で使用されます。例えば、変数の値を確認する際に便利です。

let name = "Tom";
console.log("name : " + name);

alert() を使ったポップアップメッセージの表示

もう一つのメッセージ表示方法としてalert()があります。これを使うと、ポップアップメッセージを表示できます。

alert("アラート");

また、prompt()を使うと、ユーザーから入力を受け取ることができます。

let userName = prompt("あなたの名前は？");
alert("こんにちは、" + userName + "さん！");

このようにすることでユーザーと対話型のアプリを作成することができます。

JavaScriptのコメントの書き方

コメントとは

コメントはソースコード内に書くメモのようなもので、コードの意味を明示するために使用します。特にチーム開発では、他の人がコードを理解しやすくするためにコメントを活用することが重要です。

コメントの書き方

// 名前を出力
console.log(""山田太郎);

// 名前をポップアップメッセージで表示
alert("山田太郎");

また、複数行のコメントには/* */を使います。

/* これは複数行のコメントです。
   ここに説明を記述できます。 */
console.log("複数行コメントの例");

適切にコメントを記述してコードの可読性を向上させましょう！

ちなにみコメントの書き過ぎも可読性が下がる原因なので気をつけて下さい。

練習問題

コンソールに「山田花子」と表示するコードを書いてください。

2. ポップアップメッセージで「山田花子」と表示するコードを書いてください。

3. 上記のコードにコメントを追加してください。

4. HTML内にJavaScriptを記述するためのタグは何でしょう？

5. prompt() を使って、ユーザーの名前を入力させ、挨拶メッセージを表示するコードを書いてください。

練習問題の解答

(1) console.log("山田花子");

(2) alert("山田花子");

(3)の解答例
    // コンソールに出力
    console.log("山田花子");
    
    //ポップアップメッセージで表示
    alert("山田花子");

(4) <script>タグ

(5)
  let name = prompt("あなたの名前は？");
  alert("こんにちは、" + name + "さん！");