文法の基礎！jQueryで配列を使用する方法【初心者向け】
プログラミング初心者向けに、jQueryで書く配列の使い方を解説しています。配列の知識はプログラミングをする上で非常に重要です。初心者の方でも理解できるように実際にコーディングする部分を説明しているので、ぜひご覧ください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
山本 理仁
テックアカデミーではフロントエンドコースを担当。
JavaScriptのライブラリであるjQueryで配列を使用する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
配列は、jQueryだけでなくプログラミングの基礎になる知識なので、ぜひ使えるようにしておきましょう。
目次
- JavaScriptの配列
- jQueryの配列の書き方
- jQueryの配列を実際に書いてみよう
- jQueryの配列をループする書き方
- jQueryの配列の作成の書き方
- jQueryの配列の要素追加と要素取得の書き方
- jQueryの配列の要素を検索する書き方
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
JavaScriptの配列
jQueryの配列の前に、JavaScriptの配列について確認しておきましょう。
配列とは、複数のデータをまとめて管理する方法のひとつです。
例えば、5つのデータを足すとします。
まず、配列を使わない場合を見てみましょう。
以下のように、5つの変数を用意して、順に足していく必要があります。
var a = 10; var b = 20; var c = 30; var d = 40; var e = 50; var sum = a + b + c + d + e;
次に、配列を使った場合について見てみましょう。
var num = [10, 20, 30, 40, 50]; // 最初の例の a=10; b=20; c=30; d=40; e=50; に相当。
var sum = 0;
for(i = 0; i < 5; i++){
sum = sum + num[i];
}
// ↑この4行まとめて、最初の例の sum = a + b + c + d + e に相当。
ここまでは、jQueryではなく、JavaScriptの配列やfor文の書き方になります。
詳しくはこちらの記事も参考にしてください。
ここからは、jQueryではどのように書くのか、見ていきましょう。
田島メンター！配列もjQuery用のものがあったりするんですか？
配列はJavaScriptの書き方で問題ないんだけど、展開するときにeachメソッドを使うんだよ。
繰り返し文には、for文やwhile文がありましたよね？
jQueryで要素を取得したときに、要素の数がわからない場合も多いんだ。そのためjQueryに用意されているeachメソッドを使うんだよ。さっそく書いてみよう！
jQueryの配列の書き方
jQueryでは「for文」の代わりに「each」メソッドを用います。
次の章で実際に書いてみることで、理解を深めていきましょう。
jQueryの配列を実際に書いてみよう
実際にjQueryで配列を扱うコードを書いてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
</head>
<body>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var num = [10, 20, 30, 40, 50];
var sum = 0;
$.each(num, function(i, value){
sum = sum + value;
})
$("#result").text(sum);
</script>
</body>
</html>
作成したhtmlファイルをブラウザで開くと、5つの値の合計が表示されます。
JavaScriptの例と比べると、for(i = 0; i < 5; i++){…だった部分が $.each(num, function(i, value){ … となっています。
書き方は違いますがやっていることは同じく、配列の要素を順に処理しています。
jQueryの配列をループする書き方
jQueryで配列をループするには、前述のようにeachを使います。
eachには、HTMLの要素を配列としてまとめて操作する構文( $(セレクタ).each )と、汎用的構文 ( $.each )があります。
$(セレクタ).eachの書き方
$(セレクタ).eachとは、セレクタに一致するHTMLの要素を、配列としてまとめて操作する書き方です。
$(セレクタ).each( function( index, element ){
// 要素を操作する処理
};
詳しくはこちらの記事もぜひ参考にしてみてください。
$.eachの書き方
$.eachは、HTMLに限らず、配列をまとめて操作する書き方です。
$.each( 対象オブジェクト, function( key, value ){
// 各データに関する処理
});
冒頭で、数値の配列をまとめて操作した例でもこの書き方をしています。
jQueryの配列の作成の書き方
jQueryでは、$(セレクタ)という書き方でHTMLの要素の配列を作成することができます。
セレクタの書き方にはいろいろありますが、よく使う例として、要素名、id名、class名を指定したセレクタを、以下に示します。
$("div") // ← 全ての<div>要素を配列として取得
$("#main") // ← <●●● id="main">に該当する要素を配列として取得
$(".bigtext") // ← <●●● class="bigtext">に該当する要素を配列として取得
いろいろなセレクタでHTMLの要素を取得し、まとめて文字の色を変えたりできるので便利です。
詳しくはこちらの記事もご覧ください。
jQueryの配列の要素追加と要素取得の書き方
jQueryの配列の要素追加
jQueryの配列に要素を追加するには、appendというメソッドを追加います。
$("ul").append("<li>追加</li>"); // ← <ul>要素に<li>要素を追加する
詳しくはこちらの記事もご覧ください。
jQueryの配列の要素取得
jQueryの配列のn番目の要素を取得するには eqというメソッドを使います。
$("p").eq(0) // ← 最初の<p>要素を取得する
jQueryの配列の要素を検索する書き方
子孫要素から取得するには findというメソッドを使います。
$("p").find("span") // ← <p>要素の子孫要素の中から<span>要素を取得する
詳しくはこちらの記事もご覧ください。
親要素から取得するには parentというメソッドを使います。
$("p").parent("h1") // ← <p>要素の親要素の中から<h1>要素を取得する
詳しくはこちらの記事もご覧ください。
以上、jQueryで配列を使用する方法について解説しました。
配列はプログラミングをする上で必須の知識になるので、ぜひ覚えておきましょう。
$.each()って見慣れない形ですね。左に配列を指定して、右に配列を処理する関数を定義するという形ですか？iやvalueには自動で値が割り当てられるみたいですね。
これはjQueryで用意された繰り返し文なんだけど、この場合jQueryのオブジェクトでもそうじゃなくても使えるんだよね。
eachメソッドのほうが効率が良いって例が見たいですね。
eachメソッドの解説記事で紹介するよ！
jQueryについて復習したいという方は、jQueryとは何なのか解説した記事を参考にしてみてください。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
