お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

はこ！Yes!BOX!

プログラムの基本というか使わないと何もできないよ？ってのが
変数配列オブジェクトです。
今回はJSなのでオブジェクトも必須ですね。
第一の挫折ポイントと言われていますが、大丈夫です。なんとかなります

変数

では変数からやっていきましょう。
変数って、【へんすう】ってそのまま捉えるからややこしいんですよ。
【データを保存してくれるいいヤツ】です。
データってのはそのままの状態では使う事ができません。
その為、【変数】に【格納】して置いておく必要があります。

例えば
コーラくーださいって頼んで、コーラ浴びせられも困りますよね。店長呼んで来い
ゆっくり飲めるように、容器に入れる必要があります。
それと一緒ですよね。コーラ(データ)を容器(変数)に入れて持ち運ぶ。
変数は入れ物です。

変数宣言

変数を使用する時には、必ず変数宣言をしましょう
まぁ、変数宣言なくても動くのですが、ここは【変数宣言は必須】と覚えておくのが吉です。
変数宣言をするときは、【var】を先頭につけてあげます 

var 変数名; // 変数宣言
var 変数名 = 'おなかすいた'; // 宣言と同時にデータ格納

ちなみに変数宣言が複数ある場合、それ毎にvarをつけるのではなく varは最初だけ、続けて宣言する場合はカンマで区切る方法が早いと言われています。 

var 変数名, // 変数宣言
    変数名 = 'おなかすいた', // 宣言と同時にデータ格納
    変数名 = 'おなかすいた'; // 宣言と同時にデータ格納

命名規則

変数配列オブジェクト関数。これらには好きな名前を付けてあげることができますが
一定のルールがあります。それを守って良い名前をつけてあげましょう

  1. Unicode文字、アンダーバー(_)、$記号
  2. 先頭に数字をつけてはいけない
  3. 大文字と小文字は区別される
  4. 予約語は使用できない

ハイフンもダメなんですよね。演算子だから。
結構うっかり忘れたりしちゃいそうなので、僕は変数名はキャメル型にしてます。

ちなみに予約語ってのは、JSで元々定義されている関数名の事です。

変数に代入

変数に代入、変数にデータをブチ込む時、ですね。
【変数】 = 【入れたいデータ】
と書きます。
変数は絶対左です。右から左へデータをブチ込みます。

配列

続きまして配列、です。
基本は変数と同じく、データの格納場所です。
違う特性としては、複数のデータを入れられる事です。

複数のデータ、ほう、続けたまえ

変数の時、ジュース入れる容器って話しました。
配列は、ランチプレートが丁度良い例えになるかもしれないですね。
お前飲み食いの話ばっかだな

ビュッフェとか行った時、普通のお皿で取ると
ホウレンソウのおひたし取るンゴ。カルボナーラ取るンゴ。にくじゃが取るンゴ
ほげっ・・・汁物が混ざってグッチャグチャになったンゴ・・・

ってなります(断言)

で、ランチプレートみたいなの使うと、仕切りされているので混ざり合う悲劇は起こりません。

1つのお皿(配列)に複数の料理(データ)をお互い干渉せず入れれる

これが配列の考え方です。

配列の宣言

配列も変数と同じ命名規則や宣言方法になります。
ただ一つ違うのは、それは配列やで！って言うてあげるだけです。
ちなみに超重要ポイントの一言
【配列は変数の進化系である】 

var array; // この時点では変数なんだよなぁ
array = new Array(); // おめでとう、変数[array]は配列[array]に進化した

var array2 = new Array(); // 宣言と同時に配列宣言もできる

どんな風にデータが格納されているのか

配列に複数のデータを格納できますが、それらを取り出す時には必ず【キー】と呼ばれるものがあります。
「どのデータが欲しいんだよ」って指定する為のキーですね。
配列の場合はデータ数字での指定になり、データ投入順に連番が生成されます。

データの格納方法について

配列へのデータ格納方法は２つ

  1. 配列宣言と同時に入れてやる
  2. JS関数を使用して入れる

配列宣言と同時に入れる

上記では、new Array();を代入する事で変数が配列になる手法でした。
実は必ずしもこのやり方で宣言しなくちゃいけないわけではないです。簡略化した方法があります。 

var array = []; // 空の配列とする。 new Array();と同義

var array2 = ['にく','SUSHI']; // データも一緒に入れ込んでやる

JS関数を使用して入れる

配列宣言後であれば、データ投入用の関数が用意されています。
pushと呼ばれているものです。
これは【その配列の最後にデータを入れる】事になります。 

var array = ['にく','SUSHI'];
array.push('ラーメン');

// pushの中には、にく、SUSHI、ラーメンの３データがある事になる

配列のキーについて

連番で入るんだよ。とお話しました。
そうなんですが、問題は
【0から始まる】事を伝え忘れてた所。です。
JSに限らず、プログラムは0スタートが一般的です。

配列のデータ取り出し方法

配列名[キー番号]と指定してあげます。
配列名[キー番号] = データ;とする事で、その配列のキー内が上書きされます。 

var array = ['にく','SUSHI'];
array[] = 'ラーメン';

alert(array[0]);// にくが表示
alert(array[1]);// SUSHIが表示
alert(array[2]);// ラーメンが表示


array[1] = 'おすし！！！';

alert(array[0]);// にくが表示
alert(array[1]);// おすし！！！が表示
alert(array[2]);// ラーメンが表示

オブジェクト

ほぼ配列と同じです。
何が違うかって、連番の数字から好きなキー名をつけれるようになった
それだけです。
他のプログラム言語では、それらを【連想配列】と呼んだりします。(キー名で内容のデータが何となく連想できるから)
なので、ごっちゃにして配列配列って言ったりします。
しかし、JSには残念ながら連想配列なんてものはありません。
【オブジェクト】と呼ばれるものを使用して、連想配列のように見せかけています。

オブジェクトの宣言

配列と違って、new Array();っていうものはありません。

var array  = {}; // 空のオブジェクトを代入
var array2 = {'名前':'太郎','年齢','43歳'}; // 宣言しつつ代入

alert(array2['名前']); // 太郎 が表示
alert(array2['年齢']); // 43歳 が表示

多次元配列

配列には配列の配列、なんてできちゃったりします。
それが多次元配列と呼ばれるものです。 

var array = new Array();
array[0] = {'test':{}};
array[0]['test']['name'] = 'ほんとうに';
array[0]['test']['detail'] = '寿司食いたい';
array[0]['test']['detail2'] = {'group':{}};
array[0]['test']['detail2']['group']['groupName'] = 'グループ１';
array[0]['test']['detail2']['group']['groupName2'] = 'にゃしし';
array[0]['test']['detail2']['group']['groupName3'] = 'にゃしぃ';
array[1] = {'test':{}};
array[1]['test']['name'] = '次の';
array[1]['test']['detail'] = 'ニュースはありません';
array[1]['test']['detail2'] = {'group':{}};
array[1]['test']['detail2']['group']['groupName'] = 'グループ２';
array[1]['test']['detail2']['group']['groupName2'] = 'ぽい？';
array[1]['test']['detail2']['group']['groupName3'] = 'ぽいぽいぽーい！';

ツリー風に直してみます。

array
┃
┣ 0
┃ ┗ test
┃    ┃
┃    ┣ name
┃    ┃ ┗ 【データ】
┃    ┣ detail
┃    ┃ ┗ 【データ】
┃    ┗ detail2
┃        ┗ group
┃           ┃
┃           ┣ groupName
┃           ┃ ┗ 【データ】
┃           ┣ groupName2
┃           ┃ ┗ 【データ】
┃           ┗ groupName3
┃              ┗ 【データ】
┃
┗ 1
   ┗ test
      ┃
      ┣ name
      ┃ ┗ 【データ】
      ┣ detail
      ┃ ┗ 【データ】
      ┗ detail2
          ┗ group
             ┃
             ┣ groupName
             ┃ ┗ 【データ】
             ┣ groupName2
             ┃ ┗ 【データ】
             ┗ groupName3
                ┗ 【データ】

次元・・・？

配列内配列の個数によって、○次元配列って呼んだりします。
普段そこまで使わないのですが、覚えておくとよいです。
上記の例では5次元配列とかいうんですかね！

多次元配列を作る時の注意点

配列のデータを取り出す場合、多くは【ループ処理】を駆使してデータを呼び出します。
(固定の場合はそのまま直接指定しても良いんですがね)
そんな時、配列の中の構造が違っていると、もうホント大変です。
バグの温床なのでやめましょう。
配列はきちんと同じ構造で作るよう心がけます。
例えば下記のようにする事も重要です。 

array
┃
┣ 0
┃ ┗ test
┃    ┃
┃    ┣ hogeKey
┃    ┃ ┗ hogeArrKey1
┃    ┃    ┣  hogeArrKey1-1
┃　　┃  　┃  ┗ 【データ】
┃    ┃    ┗  hogeArrKey1-2
┃　　┃  　    ┗ 【データ】
┃    ┃
┃    ┣ name
┃    ┃ ┗ 【データ】
┃    ┣ detail
┃    ┃ ┗ 【データ】
┃    ┗ detail2
┃        ┗ group
┃           ┃
┃           ┣ groupName
┃           ┃ ┗ 【データ】
┃           ┣ groupName2
┃           ┃ ┗ 【データ】
┃           ┗ groupName3
┃              ┗ 【データ】
┃
┗ 1
   ┗ test
      ┃
      ┣ name
      ┃ ┗ 【データ】
      ┣ detail
      ┃ ┗ 【データ】
      ┗ detail2
          ┗ group
             ┃
             ┣ groupName
             ┃ ┗ 【データ】
             ┣ groupName2
             ┃ ┗ 【データ】
             ┗ groupName3
                ┗ 【データ】

上記赤文字の部分、ここだけに欲しい場合、構造を崩してしまうと以下の処理が増えます。

１：arrayをループ処理で回している場合、array[1]のループ時にundefinedエラーが発生する
２：１を防止する際に、array[x][hogekey]が存在しているかの分岐が必要
３：２の条件に一致した場合のみ、array[x][hogekey]内をループ処理し、データを取得する

正直得策ではないですね・・・
無駄な条件付けるくらいなら、条件なしで行けた方がきっと楽です。

array
┃
┣ 0
┃ ┗ test
┃    ┃
┃    ┃
┃    ┣ hogeKey
┃    ┃ ┗ hogeArrKey1
┃    ┃    ┣  hogeArrKey1-1
┃　　┃  　┃  ┗ 【データ】
┃    ┃    ┗  hogeArrKey1-2
┃　　┃  　    ┗ 【データ】
┃    ┃
┃    ┣ name
┃    ┃ ┗ 【データ】
┃    ┣ detail
┃    ┃ ┗ 【データ】
┃    ┗ detail2
┃        ┗ group
┃           ┃
┃           ┣ groupName
┃           ┃ ┗ 【データ】
┃           ┣ groupName2
┃           ┃ ┗ 【データ】
┃           ┗ groupName3
┃              ┗ 【データ】
┃
┗ 1
   ┗ test
      ┃
      ┣ hogeKey
      ┃ ┗ hogeArrKey1
      ┃    ┣  hogeArrKey1-1
　  　┃  　┃  ┗ 【データ】
      ┃    ┗  hogeArrKey1-2
  　　┃  　    ┗ 【データ】
      ┃
      ┣ name
      ┃ ┗ 【データ】
      ┣ detail
      ┃ ┗ 【データ】
      ┗ detail2
          ┗ group
             ┃
             ┣ groupName
             ┃ ┗ 【データ】
             ┣ groupName2
             ┃ ┗ 【データ】
             ┗ groupName3
                ┗ 【データ】


構造だけ合わせてやると
ループ処理は同じように回せます。
データ部分に関してはその都度に合わせて、【0】や【空】等を入れておくと良いでしょう。
データを使うか使わないかの条件分岐は発生しますので
条件分岐の数こそ同じですが、ループ途中なのか、末端なのかで
ソースコードの見やすさは段違いのレベルです。

なるべく処理は簡潔に、見やすく、無駄なく
を心がけて行けるとよいですよね。
(そもそもこの例はそもそもの構造が、って話は無しで)