文法の基礎!jQueryで配列を使用する方法【初心者向け】

プログラミング初心者向けに、jQueryで書く配列の使い方を解説しています。配列の知識はプログラミングをする上で非常に重要です。初心者の方でも理解できるように実際にコーディングする部分を説明しているので、ぜひご覧ください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryで配列を使用する方法について紹介します。

配列は、jQueryだけでなくプログラミングの基礎になる知識なので、ぜひ使えるようにしておきましょう。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

目次

 

配列とは

配列というのはまとまったデータの考え方を言います。

例えば、5つのデータを足すとします。

普段であれば、以下の計算を行うとして、5つの変数を用意するとします。

var a = 0;
var b = 1;
var c = 2;
var d = 3;
var e = 4;

var f = a + b + c + d + e;

ですが、これだけの変数を用意して、宣言するのは大変です。5つならまだいいですが、100個だととても面倒です。

そこで、配列というものを使います。配列は「for文」を用いて、回すことができます。

var num = [0, 1, 2, 3, 4];
var sum = 0;
  for(i = 0;i < 5;i++){
    sum = sum + num[i];
  }

とすることで、0から4まで足すことが可能です。

上記のような考え方は、C言語やJavaなどのプログラミングに用いられています。

ではjQueryではどのように書くのか、見ていきましょう。

 

大石ゆかり

田島メンター!配列もjQuery用のものがあったりするんですか?

田島悠介

配列はJavaScriptの書き方で問題ないんだけど、展開するときにeachメソッドを使うんだよ。

大石ゆかり

繰り返し文には、for文やwhile文がありましたよね?

田島悠介

jQueryで要素を取得したときに、要素の数がわからない場合も多いんだ。そのためjQueryに用意されているeachメソッドを使うんだよ。さっそく書いてみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

配列の書き方

jQueryでは配列は以下のようにして宣言します。

jQuery

var 配列名 = [要素1,要素2,要素3,…];

上記のように宣言することで、配列として処理できます。

jQueryでは「for文」の代わりに「each」メソッドを用いて処理します。

次の章で実際に書いてみることで、理解を深めていきましょう。

 

実際に書いてみよう

実際にコードを書いてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
    <title>jQuery</title>
  </head>
  <body>
    <script>
      var num = [0, 1, 2, 3, 4];
      var sum = 0;
        $.each(num, function(i, value){
          console.log(i + ":" + value);
          sum = sum + value;
        })
        console.log("answer:" + sum);
    </script>
  </body>
</html>

Webブラウザにはコンソールという機能があり、実行結果を確認することができます。

ブラウザ上で右クリックをし、「検証」を選択しましょう。

スクリーンショット 2016-09-05 15.07.32

以下のように書いたプログラムの内容を確認することができ、「Console」で実行結果を確認することができます。

スクリーンショット 2016-09-05 15.06.31

ソースコードについてですが、最初の「var num = []」の記述は配列の登録です。ここに登録した配列が今回の計算対象ですね。

値のところに「function」となっているのは、その配列の中身をコンソールに表示する関数が組んであるからです。この関数は「void」つまり、値は返していません。

コンソールを確認して、最後に、すべてを足した値が返ってきていれば成功です。

 

以上、jQueryで配列を使用する方法について解説しました。

配列はプログラミングをする上で必須の知識になるので、ぜひ覚えておきましょう。

 

大石ゆかり

$.each()って見慣れない形ですね。左に配列を指定して、右に配列を処理する関数を定義するという形ですか?iやvalueには自動で値が割り当てられるみたいですね。

田島悠介

これはjQueryで用意された繰り返し文なんだけど、この場合jQueryのオブジェクトでもそうじゃなくても使えるんだよね。

大石ゆかり

eachメソッドのほうが効率が良いって例がみたいですね。

田島悠介

eachメソッドの解説記事のところでするよ!

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。