Web Design

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

2021年7月17日

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

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

 この記事でわかること

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

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学んでいます(6ヶ月コース)
使用テキスト:HTML&CSS、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のオブジェクトを理解しよう。

 参考図書


Kindle Unlimited会員の方は無料で読めます
※ 会員以外の方は、無料体験(30日)で読めます

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事
【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.