JavaScriptでの文字表示方法は4つ｜オブジェクトの詳細確認方法も紹介

システム
エンジニア

「JavaScriptで変数を表示する方法」なんだか難しそうですね。

プロジェクト
マネージャー

実際にどんな方法で変数を表示するのかみていきましょう。

JavaScriptとは

JavaScriptとは、WebサイトやWebアプリケーションの作成に使用されるプログラミング言語の名称です。

JavaScriptを使用することで、ボタンをクリックした際にイベントを発生させたり、スライドショーやアニメーションなどの動きのあるコンテンツを作成することができます。

この記事では、JavaScriptを使用して文字表示をする方法をご紹介いたします。

JavaScriptで文字を書く方法は4つ

JavaScriptを使用して文字表示をする方法はいくつかありますが、おもな方法は下記の4つです。

それぞれに用途があり、使い分けることが可能です。これから、具体的なソースコードを交えてご説明していきます。

1： document.writeでテキストとして表示させる

document.write()は、()の中の文字を表示します。使い方はシンプルで、下記のように使用します。

文字列を表示する時は、「’」(シングルクォーテーション)か、「”」(ダブルクォーテーション)で囲みます。また、下記のようにHTMLタグを使用することも可能です。

2：innerHTMLへ書き込んで表示させる

innerHTMLを使用した方法では、指定したHTML要素の中身に文字を書き込んで表示することができます。

使い方は、下記のような形です。

下記の例では、getElementById()メソッドを使用してid=”sampleArea”の部分のHTML要素を取得したあと、innerHTMLに「”表示したい文字列”」を指定して書き込みます。

■HTML

■JavaScript

この方法の特徴は、すでにあるHTML要素が置き換わることです。<div>タグの中の「サンプル」という文字は「表示したい文字列」に置き換えられます。

3： insertAdjacentHTMLで追加して表示させる

insertAdjacentHTMLを使用した方法では、指定したHTML要素の前後に文字を追加して表示することができます。

使い方は、下記のような形です。

追加する位置は、”beforebegin”、”afterbegin”、”beforeend”、”afterend”の4つから指定でき、それぞれ下記の位置に追加されます。

下記の例では、<div id=”sampleArea”>のタグの前に、「表示したい文字列」が追加されます。
■HTML

■JavaScript

innerHTMLと似ていますが、文字を追加する場面ではHTMLオブジェクトを置き換えるinnerHTMLの方法より処理が速く、より安全に処理をすることができます。

4：ブラウザのコンソールに表示させる

console.log()は、()の中の文字をブラウザのコンソールに表示します。

コンソールはブラウザごとに用意されている開発者に向けたツールです。console.log()は、下記のように使用します。

console.log()を使用した文字はWebサイトを閲覧するユーザーには表示されず、ブラウザのコンソールにのみ表示されます。

console.logを使ってwindowやdocumentのオブジェクトの詳細を確認する方法

console.log()では文字のほかにも、いろいろなオブジェクトの詳細をコンソールに表示することができます。

ウィンドウサイズやURLなど、今開いているブラウザの情報が入った「window」オブジェクトや、HTML文書の情報が入った「document」オブジェクトの詳細を確認するには、下記のように使用します。

■windowオブジェクト

■documentオブジェクト

console.log()では、配列や変数などのオブジェクトも詳細を確認することができます。Webサイトのデバッグ時に使用すると便利です。

システム
エンジニア

数値や文字列を再利用できるのはとても便利ですね。

プロジェクト
マネージャー

実際にコードを書いて実践してみるととても勉強になりますよ。

JavaScriptでの文字表示に挑戦しよう

今回は、JavaScriptで文字を表示するときに使える、4つの文字表示方法をご紹介いたしました。

JavaScriptでは文字表示を扱う場面も多く、使いこなせると大変便利です。それぞれの場面に応じて、ぜひ使い分けに挑戦してみてください。