JavaScriptの配列と連想配列の扱い方（宣言・要素・追加・削除）

記事内にPRが含まれる場合があります

2026年5月7日

URLをコピーしました！

こちらも自分用の備忘録としてまとめたものです。

JavaScriptの基本的な配列の宣言方法

JavaScriptではいくつかの配列の宣言方法がある。C言語のように配列長を指定せずに生成することもできる。

//47個の空の要素をもつ配列を宣言
var todoufuken = new Array(47);

//4つの文字列を格納した配列を宣言
var fruits = ['いちご', 'みかん', 'リンゴ', '梨'];

//配列のオブジェクトを新規生成
var hairetu = new Array();

//配列のオブジェクトを新規生成
var students = [];

JavaScriptで配列の要素にアクセスする方法

fruits[3]とかで配列の前から4番目の要素にアクセスできる。添字は0から開始する。

配列の長さを取得するには

hairetu.lengthでこの配列の要素の数を取得できる。

要素の何番目にあるかを探すには

fruits.indexOf('みかん');

とやれば「みかん」が何番目にあるかを探すことが出来る。みかんは2番目にあるので1が返される。

配列に要素を追加するにはpushを使う

students.push('佐藤 一郎');

これでこの配列の一番後ろに要素が追加される。配列長はもちろん1つ増える。

配列の最後の要素を取り除くにはpopを使う

var students = ['鈴木　太郎','佐藤　花子','小林　良夫','高橋　美和'];
var last = students.pop();

こうすることでlastには’高橋　美和’が返る。そしてpopした後は配列自体が変わる。 pop後のstudentsの配列の中身は、[‘鈴木　太郎’,’佐藤　花子’,’小林　良夫’]となる。

JavaScriptの連想配列の宣言の仕方

連想配列のオブジェクトを宣言する。これで空のオブジェクトができる。

var rensohairetu = new Object();

何でかって言うとJavaScriptでは「連想配列」という用語は使わないらしく、オブジェクトの宣言と同じだから。 JavaScriptではいわゆる連想配列に、関数を持たせることも出来て、まさにそれがオブジェクトだよねっていう話。関数が無ければ私たちがよく思い浮かぶ連想配列そのもの。簡単な連想配列の宣言の仕方として以下の書き方がある。

var human = {};

先にキーと値を入れて宣言することもできる。

var human1 = {name: 'アベル', job: '勇者', lv: 48, hp:255, mp:100};
var human2 = {name: 'さとし', job: 'ポケモンマスター', lv:18, hp:108, mp:98};

連想配列の各要素にアクセスするにはキーを指定する

human1.name
human1.hp

とか

human1['job']
human2['name']

で要素にアクセスできる。

連想配列に要素を後から追加することもできる

human1.town = 'アリアハン';
human2['town'] = 'マサラタウン';

連想配列の各要素に順番にアクセスするにはforループを使える

for (var key in human1) {
	//keyは添字の文字列を表し
	//human1[key]で要素にアクセスできる
}

JavaScriptで連想配列の配列を作る事も出来る

連想配列を3個もつ配列を宣言するには以下のようにすればよい。

var items = [
	{
	name : 'NTT東日本',
	brand: 'フレッツ光',
	url : 'flets.com',
	ryokin: 4400,
	gaiyo : 'NTT東日本で契約できるOCN光サービスです。'
	},
	{
	name : 'NTTコミュニケーションズ',
	brand: 'OCN光',
	url : 'ntt.com',
	ryokin: 3960,
	gaiyo : 'NTTコミュニケーションズで契約できるOCN光サービスです。'
	},
	{
	name : 'So-net',
	brand: 'NURO光',
	url : 'nuro.jp/hikari/',
	ryokin: 5700,
	gaiyo : 'So-netが回線からプロバイダーまで一括で提供しているの光通信サービス。'
	},
];

これをループでまわして1個1個取り出して表示するJavaScriptをサンプルとしてCodePenで記述してみた。

See the Pen js-array-test by pghappy (@pghappy) on CodePen.

以上です。