JavaScriptの変数をHTMLに反映させる方法
JavaScriptを使っていて変数をHTMLに反映させたいことはありませんか？
JavaScriptはWebサイトに動きを付ける言語として有名ですが、動きだけでなくテキストや画像などコンテンツを書き換えることもできます。
本記事では、JavaScriptの変数をHTML側に反映させる方法を3つ紹介します。
変数の概念から実際にHTMLを書き換えるところまで説明するので、最後まで読んで実際に試してみましょう。
目次
JavaScriptの変数とは
HTMLを書き換える前に以下2点をチェックしておきましょう。
・変数の意味
・JavaScriptの変数の種類
まずは変数がどういうものであるか、最初に説明します。
変数の意味
「変数」とは、プログラミング言語で一般的に使われる数値や文字列を扱うための概念です。
変数は何かを入れる箱によく例えられます。
例えば、Aという箱にりんごを入れます。
多くの人はりんごを食べたくなったら箱から取り出して食べるでしょう。
この例と同じで、変数に数値や文字列を先に入れておきます。
プログラムで必要な場面では、変数に入っている値を取り出して使います。
JavaScriptの変数の種類
| 変数の種類 | 再宣言 | 再代入 |
| var | ◯ | ◯ |
| let | × | ◯ |
| const | × | × |
JavaScriptの変数は以下3つあります。
・var
・let
・const
var
varはJavaScriptの一番古い変数の種類です。
変数は、変数名の先頭にvarやletなどのキーワードをつけて定義します。
varで定義した変数は以下のように再宣言と再代入ができます。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
let
letは、「ES6」と呼ばれる2015年から標準の仕様となったJavaScriptの変数です。letは再宣言ができませんが、再代入は可能です。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
const
constもletと同じくES6から始まった変数です。再宣言と再代入ができないため、「定数」と呼ばれることもあります。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
変数をHTMLに反映させる方法
それでは、JavaScriptの変数を使ってHTMLを書き換えたり表示させる方法を見ていきましょう。
今回は以下3つの方法をご紹介します。
・アラートを表示する
・テキストを書き換える
・変数展開を使って出力する
アラートを表示する
まず手軽に変数を出力できるのが、アラートを表示させる方法です。
HTMLを書き換えることはしませんが、簡単に画面上でJavaScriptの変数を出力できます。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
「alert();」のカッコの中に変数を入れればOKです。あとはブラウザでページを読み込むとアラート画面の中に変数の値が表示されます。
ちなみに、「alert();」は「window.alert();」の省略形です。
テキストを書き換える
次に、Webサイトに表示されているテキストを書き換える方法です。
書き換える方法はいくつかありますが、今回は「textContent」をご紹介します。
「textContent」は対象要素のテキストにアクセスできるので、書き換える場合は以下のように書きましょう。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
ボタンを押すと、変数で定義した値に書き換えられたと思います。
このように実はたった数行でJavaScriptの変数をHTMLに反映できます。
変数展開を使って出力する
最後に、「変数展開」を使って変数をHTMLに反映させる方法を説明します。
「変数展開」とは、文字列の中に変数を埋め込んで文字列として出力させる方法です。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
変数展開自体はJavaScriptからHTMLに出力させる方法ではありません。
しかし、上で紹介した2つの方法と組み合わせることでより柔軟に文字列を出力できます。
文字列をHTMLに出力する際の注意点
JavaScriptからHTMLに文字列を出力する際は以下の点に気をつけてください。
・特殊文字と実体参照
・XSS対策
特殊文字
特殊文字は、HTML上で特別な意味を持つ文字です。
例えば、以下のような文字列をJavaScriptのinnerHTMLで出力すると、単純な文字列ではなくHTML上で意味を持つ文字となってしまいます。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
HTMLでは、特殊文字をテキストとして使う場合「実体参照」に置き換えなければなりません。代表的な特殊文字は以下の通りです。
| 文字 | 実体参照 |
| < | < |
| > | > |
| & | & |
| “ | " |
| ‘ | ' |
| 改行なしの半角スペース | |
脆弱性対策
特殊文字を実体参照に置き換えて出力する方法は以下のようになります。
See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.
特殊文字をそのまま書いて出力すると、HTML上で何らかの意味を持ってしまいます。
この特性による脆弱性を利用した攻撃にXSS（クロスサイトスクリプティング）があります。
例えば、フォームなどに入力した値を画面に出力する場合に特殊文字を実体参照に置き換えていないと、悪意のあるスクリプトがそのまま実行されてしまいます。
JavaScriptから値を出力する際は上のように実体参照を使ってエスケープ処理（サニタイズ）しなければならない点に注意してください。
また、innerHTMLではなくtextContentで出力させると、
JavaScriptでHTMLを書き換えよう
JavaScriptの変数を使ってHTMLに出力させる方法を紹介しました。
JavaScriptはWebサイトに動きをつけられる便利なプログラミング言語です。
一方で、HTMLと違い脆弱性対策を常に意識しなければならない点に注意してください。
今回の内容を参考に、JavaScriptの変数を使って文字列を出力してみましょう。
