JavaScript でオブジェクトを印刷する

1. console.log() メソッドを使用して JavaScript でオブジェクトを出力する
2. console.dir() メソッドを使用して JavaScript でオブジェクトを出力する
3. JavaScript における console.log() と console.dir() の違い
4. JSON.stringify() メソッドを使用して JavaScript でオブジェクトを出力する
5. まとめ

print 関数は、JavaScript の主要な関数の 1つです。 この記事では、JavaScript でオブジェクトを印刷するための一般的で簡単なテクニックを学びます。

JavaScript の print 関数は、JavaScript ファイルの内容を表示または印刷します。 オブジェクトのプロパティまたは配列にすることができます。

JavaScript でオブジェクトを印刷するには、いくつかの方法があります。

console.log() メソッドを使用して JavaScript でオブジェクトを出力する

console.log() 関数は、JavaScript でオブジェクトを出力する一般的な方法です。 この関数は、Web コンソールに引数を表示/出力し、結果として文字列を取得できます。

構文：

console.log(object);

Sam と Roger の値を含む array という配列と、type や model などのオブジェクト プロパティを含む car というオブジェクトを作成しましょう。 次に、これらのプロパティに値を Ford および Mustang として割り当てることができます。

以下に示すように、console.log() 関数を使用して配列とオブジェクトを出力できます。

コード例:

const array = ['Sam', 'Roger'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);

このコードを実行すると、配列とオブジェクトが文字列形式で表示されます。

出力：

たとえば、次のコードでは、オブジェクト car には、type と model という 2つのオブジェクト プロパティがあります。 console.log() 関数は、これらのプロパティを出力するために使用されています。

コード例:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type);
console.log(car.model);

その結果、車種フォードとモデルムスタングが得られました。

出力：

また、console.log() 関数を使用して、値を 1 行で出力することもできます。

コード例:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(car.type, ',', car.model);

上記のコードは、以下の結果を提供します。

出力：

console.dir() メソッドを使用して JavaScript でオブジェクトを出力する

console.dir() 関数は、JavaScript でオブジェクトを出力する別の方法です。 これにより、ユーザーは指定されたオブジェクトのプロパティを、対話型リストとも呼ばれる階層リストとして印刷できます。

開閉用三角ボタンをクリックすると、オブジェクトのプロパティを表示できます。

構文：

console.dir(object);

前の例を見てみましょう。 以下に示すように、console.dir() 関数を使用してオブジェクトのプロパティを出力できます。

ここで、オブジェクト car はコード内の唯一のオブジェクトであるため、指定する必要はありません。

コード例:

const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.dir(car);

その結果、開閉用三角ボタンを使用してコンソールでオブジェクトを取得できます。 クリックすると、次のように子オブジェクトを表示できます。

出力：

JavaScript における console.log() と console.dir() の違い

console.log() と console.dir() の主な違いは、console.log() 関数がオブジェクトの toString 表現を提供し、console.dir() 関数が提供することです。 JavaScript オブジェクトとそのプロパティのインタラクティブなリストを提供します。 例を見てみましょう。

配列は値 Ford、Toyota、および BMW で宣言され、オブジェクト car はプロパティ type および model で宣言されます。

console.log() 関数と console.dir() 関数を使用して、配列とオブジェクトの両方を表示します。 最初の 2つの console.log() 関数の結果として、それらの toString 形式を確認できます。

コード例:

const array = ['Ford', 'Toyota', 'BMW'];
const car = {
  type: 'Ford',
  model: 'Mustang'
};

console.log(array);
console.log(car);
console.dir(array);
console.dir(car);

出力：

JSON.stringify() メソッドを使用して JavaScript でオブジェクトを出力する

Web 開発を検討する場合、JSON は Web サーバーからのデータと Web サーバーへのデータの変換に使用されます。 データを転送するときは、文字列形式で Web サーバーに到達する必要があります。 そうしないと、エラーが発生し始めます。

これを考慮して、オブジェクトをコンソールに送信する前に、JavaScript のオブジェクトを文字列形式に変換する必要もあります。 これを実現するために、JavaScript は JSON.stringify() 関数を提供します。

この関数により、オブジェクトは文字列形式に変換され、サーバーに正常に送信されます。

構文：

JSON.stringify(object);

前のオブジェクト car に HP を新しい属性として追加しましょう。 HPは車の馬力を表します。

また、HP は 460 を値とする数値です。 HP は数値であるため、car オブジェクトは文字列に変換せずにコンソールに解析できません。

それでは、JSON.stringify()関数を使って文字列に変換してみましょう。

まず、新しいプロパティをオブジェクトに HP として追加し、その値として 460 を割り当ててから、JSON.stringify() 関数を使用して車のオブジェクトを文字列に変換します。 JSON.stringify() 関数を新しい変数 (carString) に割り当て、console.log() 関数を使用して新しい変数を出力します。

コードは次のとおりです。

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

let carString = JSON.stringify(car);
console.log(carString);

また、JSON.stringify() 関数を console.log() 関数の引数にすることで、新しい変数を宣言せずにこれを行うことができます。

const car = {
  type: 'Ford',
  model: 'Mustang',
  HP: 460
};

console.log(JSON.stringify(car));

どちらの方法でも、結果はオブジェクトの文字列ですが、JSON 形式です。

出力：

まとめ

上記のメソッドを使用して、JavaScript でオブジェクトを印刷できることは明らかです。 console.table() や Object.entries() など、JavaScript でオブジェクトを表示できるメソッドは他にもいくつかありますが、ここで説明するメソッドは最も一般的で頻繁に使用されるものです。