プログラミングの基礎⑤：記述ルール／配列とオブジェクトの基本

こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。

Web制作コースと事務・ライティングコースに所属しています。

複数のデータをまとめて扱うために、配列やオブジェクトの理解は欠かせません。
この記事を読むと、データを整理して効率的に処理できるようになります。

配列（Array）
連想配列（Objectを使ったキー付きリスト）
オブジェクト（Object）
オブジェクト配列（Array of Objects）
まとめ

配列（Array）

概要

配列とは「同じ種類のデータを順序付きで並べた集合」です。
インデックス（0 から始まる番号）でアクセスし、順番が重要な場面に使います。
変数では、特定の値をひとつ入れるのに対し、配列では、複数の値を入れます。

実例

// letでfruits配列を宣言し、配列に'りんご', 'バナナ', 'オレンジ'を入れる。
let fruits = ['りんご', 'バナナ', 'オレンジ'];

//インデックス番号0から始まる番号が自動的に配列に与えられます。
//fruits[0]=りんご,fruits[1]=バナナ,fruits[2]=オレンジとなります。

// 要素へのアクセス（インデックス）
console.log(fruits[0]);        // → りんごをコンソールに表示。

// 配列の長さ(要素数)を取得
console.log(fruits.length);    // → 3をコンソールに表示。

// 配列に要素を追加 (push)
fruits.push('パイナップル');   //パイナップルを配列の最後に追加。
console.log(fruits);           // → ['りんご', 'バナナ', 'オレンジ', 'パイナップル']

// 配列から最後の要素を削除 (pop)
fruits.pop();                  //配列の最後にある、パイナップルを削除。
console.log(fruits);           // → ['りんご', 'バナナ', 'オレンジ']

// for 文で配列を順に処理
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);      // → りんご、バナナ、オレンジ
}

// for…of 文（簡易ループ）
for (const fruit of fruits) {
  console.log(fruit);          // → りんご、バナナ、オレンジ
}

✅ ポイント

インデックスは整数で、負数や小数点を使うとエラーになります。

配列の要素は型が混在しても構いません（例：[1, 'a', true]）。

push や pop は配列自体を変更します。

逆に slice() などは新しい配列を返し、元はそのままです。

連想配列（Objectを使ったキー付きリスト）

概要

JavaScript では「連想配列」と呼ばれる構造はオブジェクトで実装します。
連想配列(オブジェクト)は「キーと値」の集合体であり、データ＋振る舞い（メソッド）を一つにまとめられます。
他にも、キー（文字列）と値のペアとしてデータを格納でき、数値だけでなく名前や ID をキーに使えます。

実例

//letでstudent連想配列(オブジェクト)を宣言。読みやすいよう改行しています。
let student = {
  id: 'A001',                 //idキーに、A001を入れる。
  name: '花子',               //nameキーに、花子を入れる。
  age: 15,                    //ageキーに、15を入れる。

  //gradesキーに連想配列で、mathキーに90、englishキーに85を入れる。
  grades: { math: 90, english: 85 } 
};

// キーでアクセス（ドット記法）
console.log(student.name);       // → 花子  student配列のnameの値を出力する。

// ブラケット記法（キーが変数の場合など）
//letでage変数を宣言し15を入れる
let key = 'age';
console.log(student[key]);       // → 15  student配列のkeyを出力する。

// 新しいgradePointAverageプロパティを追加
//student配列のgradesのmathの値と、englishの値を足して2で割ることで平均を取得。
//student配列に、student.gradePointAverageを追加し、コンソールに出力する。
student.gradePointAverage = (student.grades.math + student.grades.english) / 2;
console.log(student);  

// idプロパティの削除
delete student.id;

✅ ポイント

キーは文字列（またはシンボル）で、重複しないようにします。

値には数値・文字列・配列・オブジェクト・関数など何でも入れられます。

Object.keys(obj) で全キーを取得、Object.values(obj) で全値を取得できます。

オブジェクト（Object）

概要

オブジェクトは「名前と値のペア」の集合です。
「人」「車」など属性が多いものを表すのに便利です。
ほぼ連想配列と同じものとされています。

実例

// letでcarオブジェクトの宣言。
let car = {
  brand: 'トヨタ',
  model: 'カローラ',
  year: 2020,
  isElectric: false
};

// プロパティへのアクセス。
console.log(car.brand);          // → トヨタ

// メソッド（関数をプロパティに持たせる）。
//functionで関数を定義しcarオブジェクトにstartEngineプロパティを入れる。
car.startEngine = function() {

  //carオブジェクト内では、thisキーワードでオブジェクトのプロパティにアクセスできる。
  console.log(`${this.model} のエンジンが始動しました。`);
};
car.startEngine();               // → カローラ のエンジンが始動しました。

✅ ポイント

メソッドはオブジェクト内に定義した関数です。this キーワードで同じオブジェクトのプロパティにアクセスできます。

for…in 文を使えば、全キーをループして処理することも可能です。

オブジェクト配列（Array of Objects）

概要

オブジェクト配列は「複数のオブジェクトを並べた配列」です。
学生一覧や商品カタログなど、同じ構造を持つデータをまとめて扱いたいときに便利です。

実例

// letでstudentsオブジェクト配列の宣言。
let students = [
  //複数のオブジェクトを並べた配列。
  { id: 'A001', name: '花子', age: 15 },
  { id: 'A002', name: '太郎', age: 16 },
  { id: 'A003', name: '次郎', age: 15 }
];

// for文によるstudents配列のループで全学生を表示。
for (const s of students) {
  console.log(`${s.id} - ${s.name} (${s.age})`);
}

// letでfifteenYearOld変数を宣言し,条件に合う学生だけ抽出（filter）。
let fifteenYearOld = students.filter(s => s.age === 15);
console.log(fifteenYearOld);   // → [{id: 'A001', …}, {id: 'A003', …}]

✅ ポイント

for…of 文で順に要素（オブジェクト）を取り出し、各プロパティへアクセスできます。

配列メソッド filter, map, reduce などを使うと、条件検索や変換が簡単に行えます。

まとめ

項目	主なポイント
配列	順序付きのデータを格納。インデックスでアクセスし、`push`, `pop`, `for…of` などで操作。
連想配列（Object）	キーと値のペアでデータを格納。数値・文字列・オブジェクト・関数など何でも入れられる。
オブジェクト	名前付き属性を持つ「ひとつ」の実体。メソッドも定義できる。ほぼ連想配列と同意。
オブジェクト配列	同じ構造の複数オブジェクトを順序付きで格納。`for…of`, `filter`, `map` などで操作。

次回は「プログラミングの基礎⑥：記述ルール／関数とメソッドの使い方」について学習します

▶次回

プログラミングの基礎⑥：記述ルール／関数とメソッドの使い方
こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。Web制作コースと事務・ライティングコースに所属しています。関数は、よく使う処理をまとめて何度も再利用できる仕組みです。料理のレシピに例えると、同じ手順を繰り返し使える便利...
kanau-lab.co.jp
2025.11.23

◀前回

プログラミングの基礎④：記述ルール／演算子と条件分岐の使い方
こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。Web制作コースと事務・ライティングコースに所属しています。計算や条件分岐を正しく使えるようになると、プログラムで複雑な処理ができるようになります。IF文や演算子はExce...
kanau-lab.co.jp
2025.11.23