このレッスンはただ今 無料公開中 です。

初学者向け マンツーマン プログラミング・レッスン

Javascriptの配列とオブジェクト

本章では配列とオブジェクトについて学習していきます。実は配列もまたオブジェクトのうちのひとつなのですが、使用頻度が高いので特別に取り上げて詳しく学んでいきます。

Javascriptの配列

配列は複数データのまとまりを保持します。今までは変数に単一のデータを代入する例ばかりを見てきましたが、配列は大量のデータを扱うのに向いています。
配列の実際の使用例を見てみましょう。main.jsに次のようにコードを書いて下さい。

main.js
var data = ["りんご", "みかん", "ぶどう", "メロン"];
console.log(data[0]);
console.log(data[1]);
console.log(data[2]);
console.log(data[3]);

実行結果は

りんご
みかん
ぶどう
メロン

となりました。

このように1つの変数に複数の値をまとめて入れておくことができるのが、配列の特徴です。

変数名 = ["要素1", "要素2", "要素3", ...];

配列とは値に順序をつけて格納できるオブジェクトです。 配列に格納したそれぞれの値のことを要素、それぞれの要素の位置のことを「インデックス」index と呼びます。 インデックスは先頭の要素から 0、1、2 のように 0 から始まる連番となります。

作成した配列の要素へインデックスとなる数値を、 配列[インデックス] の形式で記述することで、 そのインデックスの要素を配列から読み取ることができます。

console.log(data[0]);
console.log(data[1]);
console.log(data[2]);
console.log(data[3]);

このような配列が威力を発揮するのは、for文などの繰返し処理内で使われるときです。繰返し処理は後の章で詳しく述べますが、まずは一例として次のコードを試してみましょう。

main.js
var data = ["りんご", "みかん", "ぶどう", "メロン"];
for (var i = 0; i < data.length; i++) {
  console.log(data[i]);
}

実行結果は同じになります。

りんご
みかん
ぶどう
メロン

for文を使って、data配列のデータ件数の分だけ繰り返し処理を行い、配列に格納された値を1件づつ出力しています。繰返し処理については後の章で学習するため、ここでは詳しく解説しません。 なんとなくこんな風に使えるんだなくらいに思っておいて下さい。

オブジェクトとは

Javascriptのオブジェクトは、名前(キー)と値(バリュー)が対になった「プロパティ」の集合です。

実は今までも登場してきた、配列や関数などもオブジェクトの一種です。 JavaScriptには、あらゆるオブジェクトのもととなるObjectという組み込みオブジェクトがあります。

オブジェクトはとても深い概念なのでここではあまり詳細まで追いかけることはしません。ごく簡単な使用例にそって、Javascriptのオブジェクトに触れてみたいと思います。

main.js
var obj = {
  text: 'Javascriptを勉強中です。',
  days: 5,
};
console.log("私は" + obj.days + "日間" + obj.text);

まずobjという変数を宣言しています。そして { } 波括弧で囲ったその中に、次のような書き方でデータを設定しました。 {} の中身を「プロパティ」とも言います。

text: 'Javascriptを勉強中です。',
days: 5,

配列のように複数のデータを保持できますが、さらにひとつひとつの値に名前(キー)が付けられていて、値(バリュー)の内容がわかりやすくなっていますね。

名前
text Javascriptを勉強中です 文字列型
days 5 数値型

オブジェクトの書き方

{} 波括弧の中に キー名: 値 の対をカンマで区切っていくつでも設定できます。

オブジェクト名 = {キー名1: 値1, キー名2: 値2, ...}

プロパティの呼び出し方

オブジェクトが代入された変数名のうしろに . ドットを打って、その後ろにキー名でアクセスできます。

オブジェクト.キー名

まとめ

本章では配列とオブジェクトについて学びました。
これで、単一データだけでなく複数のまとまったデータも扱えるようになりました。

いずれにしろ「データに名前をつける」という原則には変わりないことが、わかって頂けたでしょうか。配列のインデックスやオブジェクトのキーは、ひとつづつのデータの「名前」です。名前をつかってその値を取り出す、というのがプログラミングの基本的な動作になります。