catch-img

HTMLで変数を使うには?フロントエンドの保守開発ができる基礎を身に付けよう

近年、フロントエンド開発の需要が増え、HTML・CSSの知識が求められるようになってきました。弊社のお客様でも社内SE、新人に簡単な開発ができるように基礎知識を学ばせたいと問い合わせが増えてきておりニーズの増加を実感しています。HTMLで変数を使う方法はいくつかあり、その中でも一般的なのはJavaScriptやPHPと併用する方法です。他のプログラミング言語を交えた変数の使い方やHTMLで変数を使う方法について解説します。

目次[非表示]

  1. 1.HTMLで変数の定義は可能?
    1. 1.1.varタグを使えば可能
      1. 1.1.1.変数となるvar要素
    2. 1.2.JavaScriptやPHPを使うのが一般的
  2. 2.なぜHTMLでは変数定義に他の言語を使うのか
    1. 2.1.HTMLはマークアップ言語だから
    2. 2.2.JavaScriptやPHPはアプリ開発に使われる言語
    3. 2.3.HTMLで変数を使う方法
    4. 2.4.PHPを使う書き方
    5. 2.5.JavaScriptを使う
  3. 3.HTMLにJavaScriptの変数を渡す
    1. 3.1.innerHTMLやtextContentを使って渡す
  4. 4.document.write()を使って渡す
  5. 5.他のプログラミング言語と組み合わせて変数を使おう

HTMLで変数の定義は可能?

HTML単独で変数を使用した経験がないという人も多いのではないでしょうか。HTML自体で変数を定義することはできるのかを、まずは解説します。

varタグを使えば可能

HTMLでも変数を使うことは可能です。その場合、以下のように記述します。

<var>変数</var>

この<var>というタグが、変数を使うための記述になります。

<p>次のxに当てはまる数を求めよ<br>
 2
 <var>x</var>
 +
 <var>y</var>
 =12
</p>

xとyがそれぞれ変数となります。

変数となるvar要素

varは「variable」の略です。HTMLだけでなく、一般的なプログラミング言語において、変数もしくは引数であることを表します。

JavaやJavaScriptなどでは高頻度で使うことになるので、覚えておくと良いでしょう。

JavaScriptやPHPを使うのが一般的

上記のように、HTMLでも変数を用いることはできますが、あまりオーソドックスとは言えません。

多くの参考サイトや書籍を見ても、HTML自体で変数を使うことについては扱っておらず、JavaScriptやPHPなど、他のプログラミング言語を用いる形で記述がされています。

なぜHTMLでは変数定義に他の言語を使うのか

HTMLでもvar要素を使えば変数を利用することは可能ですが、あまり一般的とは言えません。なぜHTMLの変数定義には、他の言語を使うのでしょうか。

HTMLはマークアップ言語だから

そもそも、HTMLとはどのような役割を持つのかについて知る必要があります。HTMLは、「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の頭文字をとってそう呼ばれています。日本語では「ハイパーテキストにマークを付ける言語」という意味です。

ハイパーテキストとは、「別のデータを挿入できる高性能のテキスト」のことです。別のデータとは、別サイトへのリンクであったり画像や音楽であったりします。

HTMLとは、このハイパーテキストを用いてWebサイトを構築することを目的とした言語です。そして、動的にページを動かしたり、アプリを組んだりということは基本的にはHTMLを用いては行いません。

値を戻したり、渡すといった処理も基本的にはできません。そのため、HTMLでは変数を使うのは、本来の目的ではないのです。

JavaScriptやPHPはアプリ開発に使われる言語

JavaScriptやPHPというプログラミング言語は、WebアプリやWebサイト内の動的な機能を付けるためによく使われます。

例えば、ショッピングサイトの買い物カゴに入っている商品の点数や金額の合計、問い合わせフォームでユーザーが記載したデータを表示するといった機能は、JavaScriptやPHPで変数を用いて行います。

こうしたアプリ開発に使われる言語の方が変数をコンスタントに使うため、HTML内にこれらの言語を呼び出し、変数を定義するという使い方をするのが一般的です。

HTMLで変数を使う方法

HTMLで変数を使う方法としてPHP、JavaScriptを使うという方法があります。それぞれのプログラミングをHTMLで使うための具体的な記述の仕方について解説します。

PHPを使う書き方

PHPをHTML内で使うには、以下のようにコードを埋め込みます。※PHPは環境構築が別途必要になるためご了承下さい。

<!DOCTYPE html>
<html>
 <body>
  <?php ここにPHPの処理を記述 ?>
 </body>
</html>

上記の構文を使い、変数を用いて記述してみましょう。

<!DOCTYPE html>
<html>
 <body>
  <?php $name=”佐藤洋子”; ?>
  <p> <?php echo $name; ?>は女性です<br />
  <?php echo $name; ?>の出身は静岡県です </p>  </body>
</html>

この記述をすると、以下のようにWeb上に表示されます。

佐藤洋子は女性です 佐藤洋子の出身は静岡県です

JavaScriptを使う

HTML内でJavaScriptを使う方法は主に2通りあります。

一つ目は、外部にあるJavaScriptのプログラムをHTMLに呼び込む方法です。以下のように記述をします。

<script type="text/javascript" src="ファイル名.js"></script>

もう一つは、HTML内にJavaScriptを直接記述するという方法です。以下のように記述します。

<script type="text/javascript"> /JavaScriptのコードを記述; </script>

一つ目の方法と比べると利用される頻度はそこまで高くありませんが、覚えておくと良いでしょう。

■関連記事

  HTMLとJavaScriptの基本。役割や呼び出し方を解説。 | 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート Webサイトの構築にはCSSやHTMLを使いますが、アクティブなデザインを構築するにはJavaScriptを覚える必要があります。HTMLでJavaScriptを呼び出す方法、それぞれの言語が担う役割について学びましょう。 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート

フロントエンド(HTML・CSS・JavaScript)入門5日ー株式会社ジョブサポート

HTMLにJavaScriptの変数を渡す

JavaScriptで出した変数をどのようにHTMLに渡せば良いのでしょうか。方法はいくつかありますが、その中で代表的なものを紹介します。

innerHTMLやtextContentを使って渡す

「innerHTML」は、HTML要素の中身を変更するのに使うJavaScriptの関数です。読み込みと書き込みの両方を行うことができます。ボタンをクリックした後のWeb上の表記を書き換える、といったことに使われます。

<p id="sample">これはサンプルです</p>
<script> var elem = document.getElementById("sample"); elem.innerHTML = "innerHTML "; </script>

「textContent」の使い方も、多少の違いはありますが書き方はほぼ同様です。

<p id="sample">これはサンプルです</p>
<script> var elem = document.getElementById("sample"); elem.textContent = "textContent"; </script>

なお「innerHTML」はタグもきちんと読み込んでくれますが、「textContent」の場合、タグもそのまま文字列として表示されてしまうという違いがあります。

document.write()を使って渡す

document.write()のメソッドを使うという方法があります。document.write()とは、()内の情報をWeb上に表示させるためのメソッドです。具体的には、以下のように記述します。

<body>
 <script> document.write("こんにちは"); </script> 
</body>

実践ではあまり使われませんが、シンプルなため、初心者向けの学習サイトなどで使われることがあります。

■関連記事

  基礎から学ぶJavaScript研修。プランやカリキュラム解説 | 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート JavaScriptに関して知識があまりなく、どのような研修を行えばエンジニアやエンジニアを目指す従業員に効果的か分からない人事の方もいるでしょう。この記事では、研修の具体的なプランやカリキュラムについて解説していきます。 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート

オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

他のプログラミング言語と組み合わせて変数を使おう

HTMLでもvarタグを使って変数を定義することは可能ですが、ショッピングサイトやWebアプリのような複雑な動作には不向きです。

こうした動的なサイトを作る場合は、JavaScriptやPHPと組み合わせて変数を使いましょう。HTMLでは、他のプログラミング言語を埋め込んだり、外部のファイルを呼び出したりといったことが可能です。

ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava・フロントエンド研修(通学、オンライン・リモート講座)の受け入れを行っており、助成金を活用すれば費用負担を軽減して研修受講ができるのでお気軽にお問い合わせ下さい。


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。