初心者必見！HTMLで変数を使う方法10選

●HTMLの変数とは？
●HTML内での変数の実践的な使用方法
●変数を活用したフォーム処理
- ○サンプルコード5：フォームデータの取得と処理
- ○サンプルコード6：フォームのバリデーション
●よくあるエラーと対処法
●変数の応用例
まとめ

●HTMLの変数とは？

HTMLは静的なマークアップ言語ですが、JavaScriptと組み合わせることで動的なウェブページを作成することができます。

その際に重要な役割を果たすのが変数です。

○変数の基本概念

変数とは、データを一時的に保存するための “箱” のようなものです。

プログラミングにおいては、この “箱” に好きな名前をつけ、その中にデータを入れたり、取り出したりすることができます。

変数を使うことで、同じデータを繰り返し使用したり、条件に応じて異なるデータを表示したりすることが可能になります。

これによって、ウェブページをより動的で柔軟なものにすることができるのです。

○HTMLとJavaScriptを組み合わせた変数の基本的な使用例

それでは実際に、HTMLとJavaScriptを使って変数を利用する簡単な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>変数の使用例</title>
  <script>
    let userName = "太郎";
  </script>
</head>
<body>
  <h1>こんにちは、<script>document.write(userName);</script>さん！</h1>
</body>
</html>

このコードでは、JavaScriptの let を使って userName という変数を宣言し、そこに “太郎” という文字列を代入しています。

そして、HTMLの <h1> タグの中で、<script> タグを使ってその変数を呼び出しています。

実行結果↓

こんにちは、太郎さん！

このように、JavaScriptで宣言した変数をHTMLの中で使用することで、動的にページの内容を変更することができるのです。

○サンプルコード1：基本的な変数の宣言

次に、変数宣言の基本的な形式を見てみましょう。

let variableName = value;

ここで、let はJavaScriptの変数宣言のキーワードで、variableName は任意の変数名、value は変数に代入する値を表します。

例えば、下記のように宣言することができます。

let message = "Hello, world!";
let number = 42;
let isTrue = true;

このコードでは、message という変数に文字列 “Hello, world!” を、number という変数に数値の 42 を、isTrue という変数に真偽値の true を代入しています。

●HTML内での変数の実践的な使用方法

さて、基本的な変数の使い方はわかったけど、実際のHTMLページ内でどのように活用すればいいのか気になりますよね。

ここからは、HTMLとJavaScriptを組み合わせて、変数を使った実践的なテクニックをいくつか紹介していきます。

○JavaScriptを使用したデータ保持方法

まず、JavaScriptを使ってデータを保持する方法を見ていきましょう。

ユーザーの入力情報や、サーバーから取得したデータなど、様々なデータをJavaScriptの変数に保存することで、後からそのデータを利用することができるようになります。

○サンプルコード2：ユーザー入力のデータを変数に保存

例えば、ユーザーが入力したフォームのデータを変数に保存するには、下記のようなコードを使います。

<!DOCTYPE html>
<html>
<head>
  <title>ユーザー入力のデータを変数に保存</title>
</head>
<body>
  <input type="text" id="inputName">
  <button onclick="greet()">あいさつ</button>
  <p id="output"></p>

  <script>
    function greet() {
      let name = document.getElementById("inputName").value;
      document.getElementById("output").innerHTML = "こんにちは、" + name + "さん！";
    }
  </script>
</body>
</html>

このコードでは、<input> タグで作成したテキスト入力欄の値を、greet() 関数内で name 変数に保存しています。

そして、その変数を使って、あいさつのメッセージを動的に生成しているのです。

実行結果↓

(テキスト入力欄に "太郎" と入力した場合)
こんにちは、太郎さん！

このように、ユーザーからの入力データを変数に保持することで、そのデータを使った動的な処理が可能になります。

○サンプルコード3：条件に応じた内容の表示

次に、変数の値に応じて、表示する内容を切り替える方法を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>条件に応じた内容の表示</title>
</head>
<body>
  <script>
    let age = 20;
    if (age >= 20) {
      document.write("あなたは成人です。");
    } else {
      document.write("あなたは未成年です。");
    }
  </script>
</body>
</html>

ここでは、age 変数の値が20以上かどうかで、表示するメッセージを切り替えています。

このように、変数の値に応じて条件分岐することで、よりユーザーに合わせた動的なコンテンツを提供することができるのです。

実行結果↓

あなたは成人です。

この例では age の値を20としていますが、この値を変更することで、表示される内容も変化します。

○サンプルコード4：ループを使った動的なコンテンツ生成

最後に、ループを使って、変数を活用する方法を紹介しましょう。

ループを使うことで、同じような処理を繰り返し行うことができます。

<!DOCTYPE html>
<html>
<head>
  <title>ループを使った動的なコンテンツ生成</title>
</head>
<body>
  <script>
    let count = 5;
    for (let i = 1; i <= count; i++) {
      document.write("<p>これは" + i + "番目のパラグラフです。</p>");
    }
  </script>
</body>
</html>

このコードでは、count 変数の値を5としています。

そして、for ループを使って、1から count までの数字を i 変数に代入しながら、パラグラフを生成しています。

実行結果↓

<p>これは1番目のパラグラフです。</p>
<p>これは2番目のパラグラフです。</p>
<p>これは3番目のパラグラフです。</p>
<p>これは4番目のパラグラフです。</p>
<p>これは5番目のパラグラフです。</p>

このように、ループと変数を組み合わせることで、動的に複数の要素を生成することができます。

この手法は、例えばブログの記事一覧や、商品のカタログページなどを作成する際に非常に役立ちます。

●変数を活用したフォーム処理

Webサイトでは、ユーザーからの情報を入力するためのフォームが欠かせません。

ここでは、フォームから送信されたデータを変数で処理する方法について見ていきましょう。

○サンプルコード5：フォームデータの取得と処理

まずは、フォームから送信されたデータを取得し、変数に代入する基本的な方法から始めましょう。

<!DOCTYPE html>
<html>
<head>
  <title>フォームデータの取得と処理</title>
</head>
<body>
  <form>
    <label for="name">お名前：</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email"><br>

    <button type="button" onclick="processForm()">送信</button>
  </form>

  <p id="output"></p>

  <script>
    function processForm() {
      let name = document.getElementById("name").value;
      let email = document.getElementById("email").value;

      document.getElementById("output").innerHTML = "お名前：" + name + "<br>メールアドレス：" + email;
    }
  </script>
</body>
</html>

このコードでは、<form> タグでフォームを作成し、その中に “お名前” と “メールアドレス” の入力欄を設置しています。

そして、送信ボタンがクリックされると processForm() 関数が呼び出されるようになっています。

processForm() 関数の中では、getElementById() を使ってフォームの入力値を取得し、name 変数と email 変数に代入しています。

最後に、これらの変数を使って、入力されたデータを表示しています。

実行結果↓

(お名前に "山田太郎"、メールアドレスに "taro@example.com" と入力した場合)
お名前：山田太郎
メールアドレス：taro@example.com

このように、フォームのデータを変数に保存することで、そのデータを自由に処理したり、表示したりすることができるようになります。

○サンプルコード6：フォームのバリデーション

フォームのデータを処理する際には、ユーザーが正しい形式のデータを入力したかどうかをチェックする、バリデーションが重要です。

ここでは、変数を使ったシンプルなバリデーションの例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>フォームのバリデーション</title>
</head>
<body>
  <form>
    <label for="age">年齢：</label>
    <input type="number" id="age" name="age"><br>

    <button type="button" onclick="validateForm()">送信</button>
  </form>

  <p id="output"></p>

  <script>
    function validateForm() {
      let age = document.getElementById("age").value;

      if (age < 0 || age > 120) {
        document.getElementById("output").innerHTML = "正しい年齢を入力してください。";
      } else {
        document.getElementById("output").innerHTML = "あなたの年齢は " + age + " 歳ですね。";
      }
    }
  </script>
</body>
</html>

ここでは、年齢を入力するためのフォームを用意しています。

validateForm() 関数の中で、入力された年齢が0歳未満または120歳超の場合は、エラーメッセージを表示するようにしています。

実行結果↓

(年齢に "-10" と入力した場合)
正しい年齢を入力してください。

(年齢に "30" と入力した場合)
あなたの年齢は 30 歳ですね。

このように、変数を使ってフォームの入力値をチェックすることで、ユーザーに適切なデータを入力してもらうことができます。

より複雑なバリデーションを行う場合は、正規表現などを使うこともありますが、基本的な考え方は同じです。

●よくあるエラーと対処法

HTMLとJavaScriptを使った変数の活用方法を学んでいく中で、初心者の方はいくつかのよくあるエラーに遭遇するかもしれません。

でも大丈夫、ここではそんなエラーの原因と対処法を一緒に見ていきましょう。

○未定義の変数を使用したときのエラー

JavaScriptでは、変数を使う前に宣言する必要があります。

宣言していない変数を使おうとすると、”ReferenceError: variable is not defined” というエラーが発生します。

例えば、下記のようなコードを実行すると、このエラーが起きてしまいます。

<!DOCTYPE html>
<html>
<head>
  <title>未定義の変数を使用したときのエラー</title>
</head>
<body>
  <script>
    console.log(userName);
  </script>
</body>
</html>

実行結果↓

ReferenceError: userName is not defined

この場合、userName 変数が宣言されていないためにエラーが発生しています。

エラーを解消するには、変数を事前に宣言しておく必要があります。

<!DOCTYPE html>
<html>
<head>
  <title>未定義の変数を使用したときのエラー（修正後）</title>
</head>
<body>
  <script>
    let userName;
    console.log(userName);
  </script>
</body>
</html>

実行結果↓

undefined

let を使って変数を宣言したことで、エラーが解消されました。

ただし、変数には何も代入していないので、undefined という値が出力されています。

○型の不一致による問題

JavaScriptでは、変数に異なる型の値を代入することができます。

しかし、意図しない型の値を代入してしまうと、予期せぬ動作を引き起こす可能性があります。

例えば、数値を期待している変数に文字列を代入してしまった場合、下記のようなことが起こります。

<!DOCTYPE html>
<html>
<head>
  <title>型の不一致による問題</title>
</head>
<body>
  <script>
    let num = 10;
    num = "20";
    console.log(num + 5);
  </script>
</body>
</html>

実行結果↓

本来は数値の加算を期待していたのに、文字列の連結が行われてしまいました。

これは、num 変数に文字列 “20” を代入したために、+ 演算子が加算ではなく連結として機能したためです。

このような問題を避けるためには、常に変数の型に注意を払い、意図した型の値を代入するように心がけましょう。

また、必要に応じて parseInt() や parseFloat() などの関数を使って、文字列を数値に変換することもできます。

○スコープ外の変数を参照したときのエラー

JavaScriptには、変数のスコープという概念があります。

スコープとは、変数が有効な範囲のことを指します。

ある関数の中で宣言された変数は、その関数の中でしか使えません。

これを理解せずに、スコープ外の変数を参照しようとすると、エラーが発生します。

<!DOCTYPE html>
<html>
<head>
  <title>スコープ外の変数を参照したときのエラー</title>
</head>
<body>
  <script>
    function greet() {
      let message = "こんにちは！";
    }

    greet();
    console.log(message);
  </script>
</body>
</html>

実行結果↓

ReferenceError: message is not defined

ここでは、greet() 関数の中で宣言された message 変数を、関数の外で参照しようとしているためエラーが発生しています。

この問題を解決するには、変数のスコープを理解し、適切な位置で変数を宣言する必要があります。

変数を関数の外で使いたい場合は、その変数を関数の外で宣言しましょう。

<!DOCTYPE html>
<html>
<head>
  <title>スコープ外の変数を参照したときのエラー（修正後）</title>
</head>
<body>
  <script>
    let message;

    function greet() {
      message = "こんにちは！";
    }

    greet();
    console.log(message);
  </script>
</body>
</html>

実行結果↓

こんにちは！

message 変数を関数の外で宣言したことで、エラーが解消され、意図した動作になりました。

●変数の応用例

さて、HTMLとJavaScriptを組み合わせて変数を使う基本的な方法は理解できたと思います。

ここからは、もう少し実践的な変数の応用例を見ていきましょう。

これらの例を通して、変数の可能性と柔軟性を実感していただければと思います。

○サンプルコード7：APIからのデータ取得と表示

まずは、Web API からデータを取得し、そのデータを変数に保存して表示する例です。

この例では、JSONPlaceholder という無料のテスト用APIを使用します。

<!DOCTYPE html>
<html>
<head>
  <title>APIからのデータ取得と表示</title>
</head>
<body>
  <h1>ユーザー情報</h1>
  <div id="user"></div>

  <script>
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(data => {
        let user = data;
        document.getElementById('user').innerHTML = `
          <p>名前: ${user.name}</p>
          <p>メール: ${user.email}</p>
          <p>住所: ${user.address.street}, ${user.address.suite}, ${user.address.city}</p>
        `;
      });
  </script>
</body>
</html>

このコードでは、fetch() 関数を使ってAPIからユーザー情報を取得しています。

取得したデータは data 変数に保存され、その後 user 変数に代入されています。

最後に、user 変数の内容を使ってHTMLを動的に生成し、ページに表示しています。

実行結果↓

ユーザー情報
名前: Leanne Graham
メール: Sincere@april.biz
住所: Kulas Light, Apt. 556, Gwenborough

このように、APIから取得したデータを変数に保存することで、そのデータを柔軟に使うことができます。

この手法は、動的なWebアプリケーションを作る際に非常に重要です。

○サンプルコード8：複数のフォーム要素を動的に扱う

お問い合わせフォームやアンケートフォームなど、複数の入力欄を持つフォームを扱う際にも、変数は大活躍します。

ここでは、フォームの各入力欄の値を変数に保存し、それらを組み合わせて動的にメッセージを表示する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>複数のフォーム要素を動的に扱う</title>
</head>
<body>
  <form>
    <label for="name">お名前：</label>
    <input type="text" id="name" name="name"><br>

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email"><br>

    <label for="message">メッセージ：</label>
    <textarea id="message" name="message"></textarea><br>

    <button type="button" onclick="handleSubmit()">送信</button>
  </form>

  <div id="output"></div>

  <script>
    function handleSubmit() {
      let name = document.getElementById('name').value;
      let email = document.getElementById('email').value;
      let message = document.getElementById('message').value;

      document.getElementById('output').innerHTML = `
        <p>${name}さん、メッセージありがとうございます！</p>
        <p>メールアドレス：${email}</p>
        <p>メッセージ内容：${message}</p>
      `;
    }
  </script>
</body>
</html>

ここでは、handleSubmit() 関数の中で、各入力欄の値を name、email、message という変数に保存しています。

そして、これらの変数を使ってメッセージを動的に生成し、ページに表示しています。

実行結果↓

(フォームに "山田太郎"、"taro@example.com"、"こんにちは！" と入力した場合)
山田太郎さん、メッセージありがとうございます！
メールアドレス：taro@example.com
メッセージ内容：こんにちは！

このように、複数の入力値を変数で管理することで、それらを組み合わせた動的な処理を簡単に実現できます。

○サンプルコード9：ローカルストレージを使ったデータの永続化

Webアプリケーションを作る際、ユーザーのデータを永続的に保存したい場合があります。

そんな時に便利なのが、ブラウザのローカルストレージ機能です。

ここでは、変数とローカルストレージを組み合わせて、データを保存・読み込みする例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>ローカルストレージを使ったデータの永続化</title>
</head>
<body>
  <label for="memo">メモ：</label>
  <input type="text" id="memo">
  <button onclick="saveMemo()">保存</button>
  <button onclick="loadMemo()">読み込み</button>
  <p id="output"></p>

  <script>
    function saveMemo() {
      let memo = document.getElementById('memo').value;
      localStorage.setItem('memo', memo);
    }

    function loadMemo() {
      let memo = localStorage.getItem('memo');
      document.getElementById('output').innerText = memo;
    }
  </script>
</body>
</html>

このコードでは、saveMemo() 関数で入力欄の値を memo 変数に保存し、それをローカルストレージに保存しています。一方、loadMemo() 関数では、ローカルストレージから memo の値を読み込み、ページに表示しています。

実行結果↓

(メモ欄に "買い物リスト" と入力し、保存ボタンをクリック)
(ページを再読み込みし、読み込みボタンをクリック)
買い物リスト

このように、変数とローカルストレージを組み合わせることで、ユーザーのデータを永続的に保存・読み込みすることができます。

この手法は、ショッピングカートの内容やユーザー設定など、様々な場面で活用できます。

○サンプルコード10：複雑な条件の下での変数利用

最後に、より複雑な条件分岐と変数の組み合わせ方を見てみましょう。

ここでは、ユーザーの年齢と会員ステータスに応じて、異なるメッセージを表示する例を考えます。

<!DOCTYPE html>
<html>
<head>
  <title>複雑な条件の下での変数利用</title>
</head>
<body>
  <script>
    let userAge = 25;
    let isMember = true;

    let message;

    if (userAge < 20) {
      message = "未成年の方は、保護者の同意が必要です。";
    } else {
      if (isMember) {
        message = "会員の方は、特別割引が適用されます！";
      } else {
        message = "会員登録すると、お得なサービスが受けられます。";
      }
    }

    document.write(`<p>${message}</p>`);
  </script>
</body>
</html>

ここでは、userAge 変数でユーザーの年齢を、isMember 変数で会員ステータスを表現しています。

そして、これらの変数の値に応じて、if 文を使って条件分岐し、適切なメッセージを message 変数に代入しています。

実行結果↓

会員の方は、特別割引が適用されます！

この例のように、複数の変数と条件分岐を組み合わせることで、より精緻な制御が可能になります。

実際のWebアプリケーションでは、ユーザーの入力やサーバーからのレスポンスなど、様々な要因に基づいて処理を分岐させる必要があります。

そのような場合に、変数を上手く활用することが重要になってきます。

まとめ

HTMLとJavaScriptを組み合わせた変数の使い方について、基本から応用まで幅広く解説してきました。

この記事で紹介した例を参考に、ぜひ自分のWebプロジェクトで変数を活用してみてください。

最初は戸惑うこともあるかもしれませんが、練習を重ねるうちに、変数の使い方が自然と身についていくはずです。