【JavaScript】変数の文字列を表示する
※本ページのリンクにはプロモーションが含まれています。
こんにちは、Ryohei（@ityryohei）です！
本記事では、JavaScriptで変数の文字列を表示する方法をご紹介しています。
JavaScriptで変数に代入した文字列をページに表示したいんだけど、どうすればいいの？
上記の疑問にお答えしています。
では、解説していきます。文字列を出力する方法
JavaScriptで変数に代入した文字列をページに表示する方法はいくつかありますが、代表的なものは下記の通りです。
- textContent
- innerHTML
※以前はdocument.write()も使われていましたが、現在は非推奨とされているため除外しています。
それぞれの使い方を見ていきましょう！
textContent
textContentは、テキストを取得・設定することができるNodeのプロパティです。HTMLは解釈されずにそのままテキストとして出力されます。また、textContentでテキストノードを設定すると、既存のコンテンツは新しいコンテンツに置き換えられます。（textContentでテキストを設定する要素内に他の要素や文字列が設定されていた場合、それらは削除されます。）
では、実際にtextContentで変数に代入した文字列を<body>に出力してみます。
let el = document.body;
let str = "こんにちは！";el.textContent = str;
実行結果を確認してみましょう。
See the Pen
6021-1 by ryohei (@intotheprogram)
on CodePen.
変数に代入したテキストが<body>内に表示されているかと思います。このようにtextContentは、指定した要素内にテキストを設定することができます。
続いて、冒頭でご説明した下記の点を確認していきたいと思います。
- 既存のコンテンツは置き換えられる
- マークアップはテキスト扱いになる
既存のコンテンツは置き換えられる
textContentは、コンテンツを設定する際に既存のコンテンツと置き換える形で動作します。確認のため、予め<body>に下記の要素がある状態で上記で使用したスクリプトを実行してみましょう。
<dody>
<h1>おはようございます！</h1>
</body>
実行結果をご確認ください。
See the Pen
6021-1-1 by ryohei (@intotheprogram)
on CodePen.
予め持っていた<body>が持っていた<h1>おはようございます！</h1>という要素は、新しい要素に置き換えられています。textContentでテキストを設定すると、既存の要素は置き換えられる点をご認識いただければと思います。
マークアップはテキスト扱いになる
textContentはHTMLを解釈しません。設定しようとする文字列にHTMLのタグを含めるとそのまま文字列として出力します。
試しにHTMLのタグを含めた文字列を出力してみましょう。
let el = document.body;
let str = "<h1>こんにちは！</h1>";el.textContent = str;
実行結果はご想像の通りです。
See the Pen
6021-1-2 by ryohei (@intotheprogram)
on CodePen.
HTMLのタグは解釈されず、そのまま文字列として出力されています。textContentを使用する場合は動きを理解しておくことでより使いやすいプロパティになるかと思います。
続いてinnerHTMLについてお話していきます。
innerHTML
innerHTMLは、要素を取得・設定することができるelementのプロパティです。innerHTMLで要素を設定すると、既存の要素を新しい要素に置き換えられます。（既存の要素は削除されます。）
前項でご紹介したtextContentとの違いは、HTML要素を解釈するという点です。innerHTMLは文字列だけではなくHTML要素（h1、pなど）を含めて出力することができます。
let el = document.body;
let str = "<h1>こんにちは！</h1>";el.innerHTML = str;
実行結果を確認してみましょう。
See the Pen
6021-2 by ryohei (@intotheprogram)
on CodePen.
変数に文字列と併せて代入したHTML要素が解釈され、ページに表示されています。
このようにinnerHTMLは、文字列に設定したHTML要素を解釈して出力することができます。ただしクロスサイトスクリプティングの対策として<script>は解釈されませんので、ご注意ください。
最後に
textContentとinnerHTMLは同じくらいの頻度で使用するプロパティです。それぞれの動きを理解しておくことで適切に使用することができるかと思います。何度かご自身の手で使用してみて、使用感を確認してみてくださいね！
以上、JavaScriptで変数の文字列を表示する方法のご紹介でした！
JavaScriptを基礎からしっかりと学びたい方へ
下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。
