JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptオブジェクトの内容を画面に出力する方法【サンプルコード付き】

JavaScriptでオブジェクトの内容を取得して画面に表示したい場合、new キーワードを使ってオブジェクトを生成し、そのプロパティの値を innerHTML 経由でHTMLに出力する方法が基本となります。

以下のコードでは、dept というオブジェクトを作成し、社員名・部署・技術スタックという3つのプロパティを設定しています。そして、その値を組み合わせた文字列をページ上の指定した要素に出力しています。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <p id="test"></p>
      <script>
         var dept = new Object();
         dept.employee = "Amit";
         dept.department = "Technical";
         dept.technology ="C++";
         document.getElementById("test").innerHTML =
         dept.employee + " is working on " + dept.technology + " technology.";
      </script>
   </body>
</html>

コードの解説

1. オブジェクトの生成

new Object() を使うことで空のオブジェクトを作成できます。なお、現在のJavaScriptではより簡潔に書けるオブジェクトリテラル（const dept = {};）が一般的に推奨されています。

2. プロパティへの値の代入

ドット記法（.）を使うことで、オブジェクトに自由にプロパティを追加できます。ここでは employee、department、technology の3つを設定しています。

3. HTML要素への出力

document.getElementById("test") でIDが「test」の段落要素を取得し、innerHTML に文字列を代入することで、ブラウザ上に結果が表示されます。

デバッグ時のおすすめ：console.log() と JSON.stringify()

開発中にオブジェクトの中身を手軽に確認したい場合は、console.log() の利用が便利です。また、オブジェクト全体を文字列として整形して出力するには、以下のように JSON.stringify() を使います。

console.log(JSON.stringify(dept, null, 2));

第2引数と第3引数を指定することで、インデントされた見やすい形式で出力できるため、オブジェクトの構造確認に役立ちます。

  1. JavaScriptのImage()オブジェクトとは？使い方とサンプルコードを解説

    JavaScriptにおけるImage()オブジェクトは、HTMLの<img>要素を表すオブジェクトです。このオブジェクトを使うことで、JavaScriptから動的に画像を生成し、Webページに追加することができます。Image()コンストラクタには、引数として画像の幅と高さをピクセル単位で指定できます。また、生成した画像オブジェクトのsrcプロパティに画像のURLを設定することで、画像を読み込むことが可能です。Image()オブジェクトの基本的な使い方以下は、JavaScriptでImage()オブジェクトを使用するサンプルコードです。コード例<!DOCTYPE html&

  2. JavaScriptオブジェクトの内容を文字列として表示する方法

    JavaScriptでオブジェクトの内容を文字列形式で画面に表示したい場合、document.getElementById()でHTML要素を取得し、innerHTMLを使って書き出すのが基本的な方法です。オブジェクトを文字列に変換するには、JSON.stringify()メソッドを活用します。 実装手順 まず、表示先となるHTML要素にIDを設定します。次に、JavaScript側でそのIDを指定して要素を取得し、変換した文字列をinnerHTMLに代入します。 コード例 <!DOCTYPE html> <html lang="ja"> <h