ZeroPlus Media > Web制作 > JavaScript > 【jQuery】配列の基本と便利なメソッドを紹介

【jQuery】配列の基本と便利なメソッドを紹介

JavaScript

2022/02/23

2023/04/22

この記事では「jQueryを用いた配列の基本操作方法について」学習できます。配列を扱えると、複数のデータをプログラミングで取得・追加・削除など多くのことができるようになります。

配列を扱うときに使える便利なメソッドについても解説していきます。

この記事で身につく内容

jQueryの配列の基本知識
配列を扱うときに使えるメソッドの使い方

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

【jQuery】配列とは
- 配列の要素数を取得：変数名.length
- 配列の特定の要素取得：変数名[数字]
jQuery配列を扱うときに仕様するメソッド
配列をループで取得する
- 配列の連想配列（オブジェクト）をループする
配列を使ってリストを追加してみよう
まとめ

【jQuery】配列とは

配列とは複数のデータを1つのデータのように扱えるデータ型のことです。

配列は[]とnew Array()を使った2つの定義方法があります。

配列の基本書式

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

// new Arrayで記述する場合
const 変数名 = new Array('要素1','要素2','要素3',...);

new Array()は記述量が多くなってしまうこともあり、使用される機会は多くありません。

一般的に配列を宣言する時は[]が使われます。

配列を定義しconsole.log()を用いて中身を確認します。

const array = ['123', 'abc', 'あいうえお', 123];
console.log(array);

出力結果

配列の要素数を取得：変数名.length

配列の要素数を取得する場合は、変数名.lengthを使用します。

const array = ['123', 'abc', 'あいうえお', 123];

console.log(array.length);

出力結果

配列の特定の要素取得：変数名[数字]

配列の特定の要素を取得する場合は下記の記述をします。

const array = ['123', 'abc', 'あいうえお', 123];


console.log(array[1]);

出力結果

配列の数え方は、左端から０，１，２...と数えます。console.log(array[1]);は左から数えて1番目の要素（0番目が'123'なので）、すなわち'abc'が表示されます。

jQuery配列を扱うときに仕様するメソッド

jQueryには便利なメソッドがあります。その中でも配列を扱うときに使用するメソッドをいくつか紹介します。

配列の末尾に要素を追加：pushメソッド

配列の末尾に要素を追加するpushメソッドがあります。

pushメソッドは下記の記述になります。

const array = ['123', 'abc', 'あいうえお', 123];
array.push('テスト'); // pushメソッド：配列arrayの末尾に要素'テスト'を追加する
console.log(array);

出力結果

コンソール画面で確認すると、配列の末尾に要素が追加されています。

配列の先頭に要素を追加：unshiftメソッド

配列の先頭に要素を追加するunshiftメソッドがあります。

unshiftメソッドは下記の記述になります。

const array = ['123', 'abc', 'あいうえお', 123];
array.unshift('top'); // unshiftメソッド：配列arrayの先頭に要素'top'を追加する
console.log(array);

出力結果

コンソール画面で確認すると、配列の先頭に要素が追加されています。

配列の末尾の要素を削除：popメソッド

配列の末尾の要素を削除するpopメソッドがあります。

popメソッドは下記の記述になります。

const array = ['123', 'abc', 'あいうえお', 123];
array.pop(); // popメソッド：配列arrayの末尾要素を削除する
console.log(array);

出力結果

コンソール画面で確認すると、配列の末尾の要素が削除されています。

配列をループで取得する

jQueryのメソッドeach文を使用して配列を取得できます。

each文の記述は以下になります。

const array = ['123', 'abc', 'あいうえお', 'テスト'];

$(array).each(function (i, val) {
  console.log(i, val);
});

出力結果

each文で配列をループ（繰り返し）して要素を取得します。function(i, val)の「i」の部分は、indexの頭文字で添え字（インデックス）を取得することができます。

配列の連想配列（オブジェクト）をループする

連想配列とは、keyと値がセットになったデータのことです。自動的に割り振られる数字（key）を持ち、そこに任意の文字列を設定することができます。

連想配列の基本書式

const 変数名 = {'key1: 値1','key2 : 値2','key3:値3',...};

連想配列が複数ある場合は、以下のような記述になります。

const items = [{
    num: 1,
    name: 'taro',
    hobby: 'サッカー'
  },
  {
    num: 2,
    name: 'jhon',
    hobby: 'プログラミング'
  },
  {
    num: 3,
    name: 'rika',
    hobby: '読書'
  }
]
console.log(items);

出力結果

コンソール画面で左端の数字0,1,2（key）それぞれに含まれるデータを確認することができます。

この連想配列をeach文で取得するのは下記の記述になります。

$(items).each(function (i, val) {
  console.log(i, val);
});

出力結果

配列を使ってリストを追加してみよう

配列を扱えると、HTMLに配列の情報を出力することもできます。

例えば、以下のHTMLにボタンをクリックしたらulタグにリストを追加する処理をします。

<body>
  <ul id="list">
  </ul>
  <button id="js-btn">click!</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script>
</body>

const list = $('#list');
const btn = $('#js-btn');
let val = 0;
btn.on('click', function () { // ボタンをクリックしたら
    const array = ['123', 'abc', 'あいうえお', 'テスト']; // 配列 array
    list.append('<li>' + array[val] + '</li>');
    val++
  }
);

出力結果

See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.

ボタンをクリックすると、配列の要素数だけ要素がliタグに追加されます。要素の数は4つなので5つ目以降は'undefind'（定義されていない）となります。

appendメソッドはjQueryのメソッドの一つで、指定要素にHTMLやテキストを追加することができます。