広告 Write

JavaScriptのオブジェクトの定義と出力【配列、繰り返し】

2021年7月17日

JavaScriptオブジェクト
  • JavaScriptでオブジェクトという言葉が出てきたけれど、よくわからない…
  • オブジェクトの定義の仕方、出力方法を知りたい

この記事はそんな方へ向けて書いています。

 この記事でわかること

  • JavaScriptのオブジェクトの定義と出力
  • オブジェクトを繰り返し文や配列で出力する方法

 本記事の信頼性

オブジェクトの意味がよくわかりませんでした。
職業訓練校の授業でも、なかなか理解できなかったのです。

本記事では、JavaScriptのオブジェクトの定義から出力まで、基礎から勉強し直したことをまとめています。
JavaScriptのオブジェクトおよび関連事項（メソッド、パラメーター）もわかります。

「スラスラ読める JavaScriptふりがなプログラミング」も利用した結果、全体像が見えるようになりました（100%とまではいきませんが）。

JavaScriptのオブジェクトの定義と出力

JavaScriptオブジェクト

オブジェクトとメソッド、パラメーター

オブジェクト

オブジェクト（Object）は英語で「もの」という意味があります。
JavaScriptでは「対象」と考えると良いです。

JavaScriptでは、Webブラウザ内のさまざまな要素に「命令」できます。
その対象となるものが「オブジェクト」です。

メソッド

メソッド（Method）には「方法」などの意味があります。
JavaScriptでは「命令」と考えるのが良いです。

オブジェクト（対象）に「何を」して欲しいのかを示します。

メソッドをたくさん覚えるとプログラムを作れる幅が広がります。

パラメーター

パラメーター（Parameter）は「設定値」などの意味です。
メソッドに細かい調整を加えていきます。

たとえば、console.logメソッドはそのままでは「開発者ツールに表示したい」しか分かりません。
「何を」という足りない部分を、パラメーターで指定するのです。

パラメーターはメソッドにより内容や数が異なり、省略できるものもあります。

JavaScriptの書式

console.logは次の書式です。

オブジェクト．メソッド（パラメーター, パラメーター2, パラメーター2, …）;

次の意味です。

だれに．どうする（なにを）

console.log(123);であれば「コンソール（開発者ツール）に数値（123）をlog（表示）しろ」という意味になるのです。

オブジェクト：違う種類のデータをまとめる

オブジェクトは、複数のデータを記録する便利な容れ物です。

データをまとめるので「配列が便利なのでは？」と感じますが、オブジェクトは違う種類のデータをまとめるのに便利です。

配列は、数字の順番でデータを格納します。
オブジェクトは、データに名前をつけて格納します。

  • 配列：部屋の番号が数字
  • オブジェクト：部屋の番号が名前

ひとつの物に、複数の関連情報などを格納するのに便利です。

「オブジェクト指向」というプログラムの主たる考え方をするのにも使われます。

オブジェクト指向とは、コンピュータプログラムの設計や実装についての考え方のひとつ。
互いに密接に関連するデータと手続き（処理手順）をオブジェクト（object）と呼ばれるひとつのまとまりとして定義。
さまざまなオブジェクトを組み合わせて関連性や相互作用を記述していくことによりシステム全体を構築していく手法。
»  IT用語辞典

» 参考：初心者向けに徹底解説！オブジェクト指向とは？

オブジェクトの書き方、出力方法

オブジェクトは{  }でくくり「キー：値」の組みを「 , 」で繋いで複数指定します。

配列は[ ]でくくりますが、オブジェクトは{ }でくくります。

 オブジェクトの書き方

変数　＝　{ プロパティ1：値a , プロパティ2：値b , ……}

 オブジェクトの2つの出力方法

  • オブジェクト名[ 'プロパティ1' ]
  • オブジェクト名．プロパティ1

記述例

const cat = {
　'name':'みけ',
　'type':'ミックス',
　'age':'4',
　'seibetsu':'オス',
　'color':'黒'
}

console.log(cat[name]);
//出力結果：みけ

console.log(cat.type);
//出力結果：ミックス

別例を、HTMLに記述してみます。

index.html

<script>

let date = { name:'鈴木' , bill:30000, crg:true };

console.log(date['name']);
console.log(date['bill']);

console.log(date.name);
console.log(date.bill);

</script>

//出力結果：
鈴木
30000
鈴木
30000

オブジェクトを、繰り返し文や配列で出力する方法

JavaScriptのオブジェクト

オブジェクトも配列と同じく、繰り返し処理と相性が良いです。
一気に出力できます。

オブジェクトをすべて出力【繰り返し文：for in】

for in文を使うと、オブジェクトをすべて出力できます。

 for in 文の書き方

for(繰り返しで使うキーが入っている変数 in オブジェクト名){
　処理
}

HTMLに記述してみます。

index.html

<script>

const cat = {
　'name':'みけ',
　'type':'ミックス',
　'age':'4',
　'seibetsu':'オス',
　'color':'黒'
}

for(key in cat){
　console.log(key+'は、'+cat[key]);
}

</script>

//出力結果：
nameは、みけ
typeは、ミックス
ageは、4
seibetsuは、オス
colorは、黒

オブジェクトcatを定義し、データを格納。
左側がkey、右側がvalue。
for in文で出力。

複数のデータを配列にまとめる

配列[ ]の中に、オブジェクト{ }をカンマで区切ると、複数のオブジェクトをまとめた配列がつくれます。
配列内のオブジェクトから特定の値を取り出すには、変数[配列のインデックス][オブジェクトのプロパティ]で出力できます。

index.html

let data = [
　 { name:'鈴木' , bill:30000, crg:true },
　 { name:'佐藤' , bill:50000, crg:false }
];

 console.log(date[0]['name']);
 console.log(date[1]['bill']);

//出力結果：
鈴木
50000

まとめ：JavaScriptのオブジェクトを毎日使って、慣れる

JavaScriptオブジェクト

オブジェクトは、なかなかややこしい話です。
テキストや本を読んでも、1回で「はい、そうですか」と理解できません。

まずは、JavaScriptにどんなオブジェクトやメソッドがあり、パラメーターとの組み合わせがあるのか、慣れる必要があります。

よく言われるように「プログラミング言語は外国語学習と似たところ」があります。

外国語学習が上達する近道は、毎日使って慣れることです。

以上です。

P.S.慣れると楽しい未来が見えてきますね。

関連記事【JavaScript入門】初心者向けに「基礎文法」を完全まとめ
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由

-Write