文法の基礎！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){ … となっています。
書き方は違いますがやっていることは同じく、配列の要素を順に処理しています。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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サービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
