JavaScriptでは、コードのデバックとしてconsole.logがよく使われますが、配列やオブジェクトのデータを参照する際に便利なのがconsole.tableです。
console.tableは、配列やオブジェクトからなるデータを表形式で出力するため、可読性を上げるために役に立ちます。

そこで今回は、ブラウザのconsole.logやconsole.tableを使って、データの表示や操作を行なっていきます。
同時に配列・オブジェクトの構造の理解も深めていきましょう。

デモ

今回は、以下を完成図として実装していきます。
サザエさんに出てくるキャラクターの中から、条件にマッチしたキャラクターの情報のみを表示させてみましょう。

demo-console

HTML・JavaScriptの準備

まずは、HTMLファイルの用意と、登場人物のプロフィールをJavaScriptで用意します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Array Challenge</title>
</head>
<body>
  <h1>サザエさん登場人物</h1>
  <h2>コンソールを使ってプロフィールチャートを作ってみよう！</h2>
  <iframe src="https://giphy.com/embed/3o6nULFVz6Rc9X8msg" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<script src="main.js"></script>
</body>
</html>

JavaScript

const characters = [
  { first: 'サザエ', last: 'フグ田', age: 24, },
  { first: '波平', last: '磯野', age: 54 },
  { first: 'フネ', last: '磯野', age: 50 },
  { first: 'マスオ', last: 'フグ田', age: 28 },
  { first: 'カツオ', last: '磯野', age: 11 },
  { first: 'ワカメ', last: '磯野', age: 9 },
  { first: 'タラオ', last: 'フグ田', age: 3 },
  { first: 'ノリスケ', last: '波野', age: 24 },
  { first: 'タイコ', last: '波野', age: 22 },
  { first: 'イクラ', last: '波野', age: 1.5 },
  { first: '', last: '中島', age: 11 },
  { first: '花子', last: '花沢', age: 11 }
];

オブジェクトにfirst・last・ageというキーを用意し、それぞれ名前・名字・年齢を記述します。また、作成したオブジェクトを配列に格納します。

ここでは登場人物が幅広いサザエさんを取り上げていますが、好みのテーマで作成して構いません。

JavaScriptでデータを表示する

ここからは、配列やオブジェクトの操作に使える手法を用いながらデータを表示していきます。
いくつかお題を出しながら進めていくので、条件に合うキャラクターを表示させてみましょう。

キャラクター全員を表示する

まずは、用意したすべてのキャラクターの情報を表示させます。
方法はいくつかありますが、繰り返し処理に良くに使われるmapメソッドを使います。

const　allCharacter = characters.map(character=> {
  return　character
});
console.table(allCharacter);

mapメソッドは、配列のすべての要素に対し、繰り返し処理を行い新しい配列を返します。
関数の結果をconsole.tableで出力してみましょう。

console.table1

12件すべてのデータが表示されるのが確認できます。
関数の実行結果が自動的に表として出力されるため、データが見やすくなりました。

20歳以下のキャラクターのみ表示する

次に、20歳以下のキャラクターのみ表示させてみましょう。
ここではfilterメソッドを使います。

const underTwenty = characters.filter(character => {
  return character.age <= 20;
});
console.table(underTwenty);

filterメソッドは、条件に一致する要素を検索し、一致したすべての要素の配列を返します。
同様にconsole.tableで出力してください。

console.table2

20歳以下のキャラクターのみが表示されていることが分かります。

磯野家のみ表示する

続いて、すべてのキャラクターの中から磯野家のみ表示させます。

上記と同じようにfilterメソッドを使用すると、磯野家全員のデータを取得することができます。
ここでは、磯野家の中でもデータの一番先頭にいるキャラクターを検索してみましょう。その場合は、findメソッドを用います。

const isonoFamily = characters.find(character => {
  return character.last == '磯野';
});
console.log(isonoFamily);

findメソッドは、条件に一致したはじめの配列要素を返します。

console.log1

console.logで確認すると、磯野家の中で一番はじめに格納されている波平のデータが表示されているのが分かります。

特定のキャラクターに情報を追加する

さいごに、特定のキャラクターに情報を追加します。
スプレッド演算子を使って、カツオに「小学生」という情報を追加してみましょう。

まずは、オブジェクトのクローンを作ります。
このようにスプレッド演算子を記述することで、カツオのオブジェクトをクローンすることができます。

const cloneLuke = {...characters[4]};
console.log(cloneLuke);

そして、プロパティを追加した新しいオブジェクトを生成します。
スプレッド演算子に加え、追加したいプロパティを記述することで、情報が追加されるようになります。

const newObj = {...characters[4], 職業: '小学生'};
console.log(newObj);

出力結果を確認してみましょう。

console.log2

カツオのデータ情報に、職業: "小学生"が追加されました。

以上ですべての実装が完成です。

まとめ

今回は、コンソールを使って配列やオブジェクトのデータを見ていきました。

デバッグ時やデータを参照したい場合、console.logやconsole.tableを使い分けられるととても便利です。
console.tableを使うと、データの内容が表形式で出力されるためデータの解析に役に立ちます。

配列やオブジェクトの操作に活用してみてください。

データ表示の関連記事

・Console API
・配列メソッド -新しい配列
・配列メソッド -検索