HTMLで変数を定義する方法と変数の使い方【varタグ＋JavaScript】

プログラミングでは変数が必須であることはご存じのはず。ではプログラミング言語ではないHTMLでも変数を作成し、計算の効率を向上させる方法はご存じでしょうか？

今回は

・varタグを使ったHTML内での変数宣言の方法
・JavaScript使用してHTML内で変数宣言を行う方法

以上の2点についてご紹介します。

目次 [非表示]

1 HTMLで変数を宣言する方法
- 1.1 varタグで変数を宣言する
- 1.2 JavaScript内で変数を宣言する
  - 1.2.1 scriptタグ内にJavaScriptを記述する方法
  - 1.2.2 外部ファイルにJavaScriptを記述する方法
2 HTML内で宣言した変数はどう利用する？
- 2.1 varタグで作成した変数の利用方法
- 2.2 JavaScriptで作成した変数の利用方法
3 まとめ

HTMLで変数を宣言する方法

varタグで変数を宣言する

varタグの基本情報

まずはvarタグを使用した変数宣言の方法です。var（読み方：バー）タグは「variable」の略で、varタグが囲んだ値が変数であることを示します。

varタグは見た目を変更するためのタグではありませんが、ブラウザによってはイタリック体で表示されるようです。

varタグで利用できる属性

varタグでは以下の、グローバル属性のみが使用可能です。

属性	説明
accesskey属性	キーボードのショートカットの生成し、簡易なアクセスを可能にする
class属性	要素に任意の名称を与える（同じclass名を複数の要素に与えられる）
dir属性	テキストの書字方向を示す・ltr：「left to right」左から右・rtl：「rght to left」右から左・auto：自動的に書字方向を決定する
hidden属性	要素に関連性がないことを示す
id属性	要素に任意の名称を与える（同じidは使用できない：一意性）
lang属性	要素の言語を定義する
style属性	要素にCSSスタイル宣言を適用する

varタグの使い方・サンプルコード

実際にvarタグを使用してみると、囲った値がイタリック体で表示されるのが分かります。これはブラウザで設定されているデフォルトの値なので、varタグをCSSで指定して、書き換えることもできます。

<p>消費税計算：<var>price</var> × <var>tax</var></p>

1	<p>消費税計算：<var>price</var> × <var>tax</var></p>

実行結果

JavaScript内で変数を宣言する

続いてJavaScript内で変数を宣言する方法をご紹介します。

JavaScriptとHTMLは相互に依存しあっている関係です。そのため、JavaScriptはHTML内にscriptタグを用いて記述するか、外部ファイルにJavaScriptを書き、それを紐づける形で実現します。

scriptタグ内にJavaScriptを記述する方法

HTMLではscriptタグを使用してJavaScriptを書き込むことができます。今回はheadタグ内に記述していますが、bodyタグ内に記述しても構いません。

ここではhensuという変数を宣言し、その変数を出力するプログラムを作成しました。設置したクリックボタンを押すことで、作成した関数が呼び出され、プログラムが実行されます。

注意

再度実行したい場合は、画面左下のReturnをクリックしてください。

外部ファイルにJavaScriptを記述する方法

JavaScriptはCSSのように外部ファイルに記述することもできます。今回はHTMLファイルをmain.html、JavaScriptファイルをmain.jsとして保存しました。

HTML内で外部ファイルからJavaScriptをロードするには、scriptタグを設置し、src属性を指定します。src属性の中で指定するのは、JavaScriptが記述されているファイルの相対パスです。

MEMO

相対パスは、目的のファイルを現在の位置から辿ることを意味します。つまりここではmain.jsのファイル位置を、main.htmlのファイル保存位置から辿ることを指します。

<!DOCTYPE himl>
<html lang="ja">
  <head>
    <!-- JavaScriptファイルを呼び出す -->
    <script src="main.js"></script>
  </head>
  
  <body>
    <!-- ボタン押下時num1をアラート表示 -->
    <button onclick="call_num1()">num1</button>
    <!-- ボタン押下時num2をアラート表示 -->
    <button onclick="call_num2()">num2</button>
    <!-- ボタン押下時num1とnum2の計算を表示 -->
    <button onclick="call_calc()">計算</button>
  </body>
</html>

<!DOCTYPE himl>

<head>

</head>

<body>

</body>

</html>

var num1 = 10;
var num2 = 20;

// num1を呼び出す関数
function call_num1() {
    alert(num1);
}

// num2を呼び出す関数
function call_num2() {
    alert(num2);
}

// num1*num2の計算を表示する関数
function call_calc() {
    document.write(num1 * num2);
}

var num1 = 10;

var num2 = 20;

// num1を呼び出す関数

function call_num1() {

alert(num1);

}

// num2を呼び出す関数

function call_num2() {

alert(num2);

}

// num1*num2の計算を表示する関数

function call_calc() {

document.write(num1 * num2);

}

ページ読み込み時

num1をクリックした時

num2をクリックした時

計算をクリックした時

HTML内で宣言した変数はどう利用する？

HTML内で変数を作成できることは分かりましたが、実際にこれらの変数はどう利用できるのでしょうか？今回は実用例をご紹介します。

varタグで作成した変数の利用方法

varタグを使用した場合は、「この値が変数であること」を意味します。つまり、HTML内で変数宣言を行い、変数を使用して計算ができるわけではなく、囲った値が変数であることを明示するだけなのです。

使い方としては以下のような使い方ができるでしょうか。変数とは、値が変わる値のことを指すので、商品ごとに異なる価格を変数priceとして明示しています。

数学に関するサイトを構築する方には便利なタグかもしれません。

<p>税込み価格＝<var>price</var>×1.10</p>
<p>軽減税率＝<var>price</var>×1.08</p>

1 2	<p>税込み価格＝<var>price</var>×1.10</p> <p>軽減税率＝<var>price</var>×1.08</p>

実行結果

JavaScriptで作成した変数の利用方法

一方JavaScriptで変数を作成した場合は、もっと応用的なプログラムを組むことができます。もっとも、現在公開されている多くのサイトはJavaScriptとHTML/CSSの組み合わせで作成されています。

では簡単なサイトを作ってみましょう。今回は入力された郵便番号が上3桁、下4桁の条件に一致する場合のみ検索を開始します。

ここではtopとbottomという変数を作成し、documet.form.top_zip.valueとdocument.form.bottom_zip.valueで、それぞれテキスト欄に入力された値を取得します。

条件分岐の際はlengthメソッドを適用し、入力された文字数を取得し、判定しています。&&は「かつ(and)」という意味を持つ論理演算子です。

<!DOCTYPE himl>
<html lang="ja">
  <head>
    <script>
      function get_zipcode () {
        // 郵便番号上3桁top、郵便番号下4桁bottom
        var top,bottom = 0;
        // 入力された値を取得
        top = document.form.top_zip.value;
        bottom = document.form.bottom_zip.value;
        // top=3桁かつbottom=4桁でのみ検索を開始
        if(top.length == 3 && bottom.length == 4) {
          alert("住所検索を開始します");
        } else {
          alert("正しい郵便番号を入力してください");
        }
      }
    </script>
  </head>
  
  <body>
    <form name="form">
      <p>郵便番号</p>
      <p>〒 <input type="text" name="top_zip" style="width: 40px;" placeholder="123"> ー <input type="text" name="bottom_zip" style="width: 50px;" placeholder="1234"></p>
      <button onclick="get_zipcode()">住所検索</button> <!--クリック時に関数を呼び出す -->
    </form>
  </body>
</html>

<!DOCTYPE himl>

<head>

function get_zipcode () {

// 郵便番号上3桁top、郵便番号下4桁bottom

var top,bottom = 0;

// 入力された値を取得

top = document.form.top_zip.value;

bottom = document.form.bottom_zip.value;

// top=3桁かつbottom=4桁でのみ検索を開始

if(top.length == 3 && bottom.length == 4) {

alert("住所検索を開始します");

} else {

alert("正しい郵便番号を入力してください");

}

</script>

</head>

<body>

</form>

</body>

</html>

まとめ

今回はHTML内で変数を作成する方法についてご紹介しました。JavaScriptで変数と関数を作成し、それをHTML内で呼び出して使用する方法は、今ではどのサイトでも用いられている方法です。

JavaScriptを使用すれば、さらに多様な機能を持つページが作成できるので、基本を押さえてどんどんコードを書いていきましょう！

参考文献：
<var>:変数要素 – MDN Web Docs
HTML5タグリファレンス
htmlで値（変数）を定義する方法

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。