アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信！

膨大なデータの管理に便利！配列とオブジェクトを学ぼう！【JavaScript入門】

      2017/12/04

過去の記事でJavaScriptの基礎知識として色々と取り上げていきましたが、今回は配列とオブジェクトを取り上げようと思います。これらは知らなくてもプログラムは書けますが、知っているかどうかで作業効率大幅に変わります。

配列とは

配列とは複数の値を保持するための仕組みです。

イメージとしては変数が一つの箱であるのに対し、配列は一つの箱を仕切り板でいくつかに分割したようなものです。配列は以下のように定義します。

	var list1 = new Array();
	var list2 = []; //こちらが一般的

この例で空の配列を作成しています。　配列の定義の仕方はnew Array()を使ったパターンと配列リテラルの２通りありますが、後者のほうが一般的です（以降、配列リテラルを使ったパターンのみ紹介します）。続いて配列の定義の際に値を指定した場合です。

	var list = [3,5,2];

3つに仕切られた配列に3、5、2という数値が代入されました。また、下記のように個別に代入することが可能です。

var list = []; //ここを省略するとエラーがでる
list[0] = 3;
list[1] = 5;
list[2] = 2;

この例でまず気になる部分は左辺の[0]の部分ですよね。これはインデックス（添え字）といって、配列の各要素にアクセスするためのものです。下図は配列、要素、インデックスの関係を表したものです。

array

配列はループ構文との相性抜群！

ここまでの説明では「変数じゃ駄目なの？」と配列を使う必要性を見出せないかもしれません。しかし、配列には変数には無い優れた特徴を持っています。以下のプログラムをご覧ください。

var data = [10,15,8,6,1,99,5];
var length = data.length; //配列の長さ（要素の個数）を取得
var total = 0;

for(var i = 0; i < length; i++){

 total = total + data[i];

}

console.log(total); //配列の値の総和を出力

この例では実感が沸かないと思いますがデータが数千件ともなれば効果は絶大です。このように配列はループ構文と組み合わせると絶大な効果を発揮します。ループ構文についてはこちらの記事をご覧ください。

ここで気になるのがdata.lengthの部分ですよね。lengthは配列の要素数を取得するプロパティです。プロパティとは配列自身が持つ変数のことです。また、配列自身が持つ関数をメソッドといいます。メソッドの使い方は下記のとおりです。

var data = [10,15,8,6,1,99,5];
data.reverse(); //配列の値を逆順にする　
//結果 -> [5,99,1,6,8,15,10]

この例では配列の値を逆順に並び替えるreverseメソッドを使用しました。プロパティとの違いは末尾に()を付けている点です。引数の設定の仕方や戻り値の受け取り方は関数と同じです。

オブジェクトとは

オブジェクトとはJavaScriptの根幹となる仕組みです。配列や関数などはオブジェクトを継承して作られています。つまりオブジェクトの機能は配列や関数でも使用できるということです。オブジェクトは以下のようにして作成します。

var data1 = new Object();
var data2 = {}; //こちらが一般的

このあたりは配列と同じでnewを使う方法とリテラルを使う方法があります。使い方も配列とほぼ一緒ですが初期化の方法が異なります。

var data = { name : "田中" , age : 20 , sex : "male"};

配列では値のみをカンマで区切り設定していましたが、オブジェクトでは「プロパティ名 : 値」という形式になります。複数指定する場合は配列と同様カンマで区切ります。
またプロパティは個別に設定することも可能です。

var data = {};
data["name"] = "田中"; //配列のインデックスと同様の方法
data.age = 20; //ピリオドでつなぐ方法

プロパティの設定は2行目のように配列のインデックスと同様の方法で設定する方法と、先述した配列のlengthプロパティにアクセスするようにピリオドでつなぐ方法があります。

オブジェクトは配列のようなlengthプロパティを持たない為、要素数を知ることができません。全ての要素にアクセスするにはfor in文を利用します。

var data = { name : "田中" , age : 20 , sex : "male"};

for(var propertyName in data){
	console.log(data[propertyName]);
}

propertyName にはオブジェクトのプロパティ名が代入されます。これをインデックスとして利用することで値を取得しています。

なお、for in文は配列でも利用できますが走査の順序が保証されません。意図した順序で値を扱いたい場合は配列とfor文を使用しましょう。

まとめ

配列やオブジェクトは膨大なデータを処理するときに効果を発揮します。これらを活用することでコードが簡潔になりメンテナンス性が向上します。是非活用してみてください。

 - Web制作テクニック , , ,