• 全ての記事
  • HTMLで変数を使うには？フロントエンドの保守開発ができる基礎を身に付けよう
catch-img

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

フロントエンド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自体で変数を定義することはできるのかを、まずは解説します。

ジョブサポートのフロントエンド(HTML5・CSS・JavaScript)入門5日はこちら

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とJavaScriptの基本。役割や呼び出し方を解説。 | Java・フロントエンド研修のジョブサポート Webサイトの構築にはCSSやHTMLを使いますが、アクティブなデザインを構築するにはJavaScriptを覚える必要があります。HTMLでJavaScriptを呼び出す方法、それぞれの言語が担う役割について学びましょう。 Java・フロントエンド研修のジョブサポート


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

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

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

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

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

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

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

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

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

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

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

フロントエンド(HTML5・CSS・JavaScript)入門5日はこちら

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>

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

■関連記事

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

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

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>

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

■関連サイト

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


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

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

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

前の記事

prev-article-image

新入社員に期待する三つのこと。組織の未来を変える新人教育

次の記事

next-article-image

Web説明会の企業に嬉しいメリットとは。トラブル防止策も紹介

新卒・中途未経験者を採用した
企業におすすめのエンジニア研修サービス

法人研修の実績2500名以上！中小企業～大手上場企業まで幅広く受講してます。
若手、新人エンジニア採用後の Java研修はジョブサポートお任せ下さい
おすすめお役立ち資料02
短期講座(入門5日、基礎10日) Java・フロントエンド (HTML5・CSS・JavaScript) 全国の中小～大手企業まで幅広くお問い合わせ、 受講を頂く人気講座です

運営会社

株式会社ジョブサポート

Java・フロントエンド(HTML5・CSS・JavaScript)の企業研修実績2500名以上を実施。受講満足度は95％。

おすすめお役立ち資料

おすすめお役立ち資料02
おすすめお役立ち資料02

関連記事

研修サービス一覧

プロエンジニア育成コース
新人エンジニア研修
短期通学講座
研修実績
よくあるご質問

ランキング

タグ一覧

logo
〒102-0072 東京都千代田区飯田橋
3-11-13 飯田橋 i-MARK ANNEX 8階
facebook_icon
        上へ戻る

        Copyright © 2021 JOB SUPPORT INC. All rights reserved.