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

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

今回は

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

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

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で指定して、書き換えることもできます。

実行結果

JavaScript内で変数を宣言する

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

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

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

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

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

See the Pen
JS scriptタグ
by rabbittyu (@rabbittyu)
on CodePen.

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

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

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

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

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

ページ読み込み時

num1をクリックした時

num2をクリックした時

計算をクリックした時

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

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

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

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

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

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

実行結果

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

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

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

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

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

まとめ

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

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

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