JavaScriptではコードのデバックとしてconsole.logがよく使われますが、配列やオブジェクトのデータを参照する際に便利なのが「console.table」です。
「console.table」は、配列やオブジェクトからなるデータを表形式で出力するため、可読性を上げるために役に立ちます。
そこで今回は、ブラウザのconsole.logやconsole.tableを使って、かんたんなデータを作っていきます。
基本的な配列・オブジェクトの構造の理解も深めていきましょう。
デモ
今回は以下を完成図として実装していきます。
サザエさんの一部のキャラクターを元に、条件にマッチしたキャラクターの情報のみを表示させてみましょう。
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で出力してみましょう。
12件すべてのデータが表示されるのが確認できます。
関数の実行結果が自動的に表として出力されるため、データが見やすくなったのが感じられるのではないでしょうか。
20歳以下のキャラクターのみ表示する
つぎに、20歳以下のキャラクターのみ表示させてみましょう。
ここではfilterメソッドを使います。
const underTwenty = characters.filter(character => {
return character.age <= 20;
});
console.table(underTwenty);filterメソッドは、条件に一致する要素を検索し、一致したすべての要素の配列を返します。
同様にconsole.tableで出力してください。
20歳以下のキャラクターのみが表示されていることが分かります。全部で6件のデータです。
磯野家のみ表示する
続いて、すべてのキャラクターの中から磯野家のみ表示させます。
上記と同じようにfilterメソッドを使用すると、磯野家全員のデータを取得することができますが、磯野家の中でもデータの一番先頭にいるキャラクターを検索してみましょう。
その場合は、findメソッドを用います。
const isonoFamily = characters.find(character => {
return character.last == '磯野';
});
console.log(isonoFamily);findメソッドは、条件に一致したはじめの配列要素を返します。
console.logで確認すると、磯野家の中で一番はじめに格納されている波平のデータが表示されているのが分かります。
特定のキャラクターに情報を追加する
さいごに、特定のキャラクターに情報を追加します。
スプレッド演算子を使って、カツオに「小学生」という情報を追加してみましょう。
まずは、オブジェクトのクローンを作り、コンソールにオブジェクトとして戻り値を表示させます。
このようにスプレッド演算子を記述することで、カツオのオブジェクトをクローンすることができます。
const cloneLuke = {...characters[4]};
console.log(cloneLuke);そして、プロパティを追加した新しいオブジェクトを生成し、コンソールにオブジェクトとして戻り値を表示させます。
スプレッド演算子に加え、追加したいプロパティを記述することで、情報が追加されるようになります。
const newObj = {...characters[4], 職業: '小学生'};
console.log(newObj);出力結果を確認してみましょう。
たしかに、カツオのデータ情報に「職業：’小学生’」が追加されました。
以上ですべての実装が完成です。
まとめ
今回はコンソールを使って、配列やオブジェクトのデータを見ていきました。
データの構成によって、console.logやconsole.tableを使い分けられるととても便利です。
console.tableを使うと、データの内容が表形式で出力されるため、データの解析に役に立ちます。
配列やオブジェクトの操作の理解を深めながら活用してみてください。
JavaScriptの基本をおさらい
