【JavaScript】配列の使い方を解説していく

こんにちは、kazuです。
本日はjavascriptでの配列について
書いていきます。

配列の使いかた

配列とはデータが集まったものことです。
言葉だけではわかりませんよね?
配列の書き方は

let name = ["tanaka", "itou", "yamada", "takahasi"];

と言う感じになります。
今回は名前のデータが集まったということになります。
他にも書き方はありますが基本はこの書き方が多いです。
ではなぜ配列が使われるのでしょうか?
結論から言うと便利だからです。
どう便利かと言いますとコード量が圧倒的に違いますし変数も増やす必要はありません。
そして配列の中身が増えていくごとにより便利さを発揮します
例えば学校1クラスの全員の名前を変数に入れる作業を想像してみてください。

var name1 = "tanaka";
var name2 = "itou";
var name3 = "yamada";
var name4 = "takahasi";
.
.
.

どうでしょうか?
コード量が全然違いますよね?
これが100人以上書くとなるとどうなると思いますか?
そうです!とてつもなく面倒さいです。コピー、ペースト、コピー、ペースト、コピー、ペースト……
想像するだけめんどくさいし見辛くなるし変数も無駄に増えるだけだしと考えると配列の方が楽だと思いませんか?
と言う理由から配列が使われる理由となります。
ちなみに1個1個変数に入れるということを実務でやると注意されます。笑

配列の実行

では次は先ほど作った配列の実行を見てみましょう。
これで同じような実行結果にならなければ配列の意味がないというか使えないじゃないかとあなたは思うはずです。
なので確認してみましょう!!
コード

どうですか?
コメントで「配列全体です」と書いてあるのが
配列全体の実行結果です。
そしてその下「配列での実行結果です」と書かれているのが
各部分の配列の実行結果です。
しっかりと名前のみ実行されていますね!
そしてさらにその下が変数で実行されたコードです。
うん!同じです!
もう一度コードを確認してみてください
あなたならどっちのコードを使って実行させますか?

配列の実行方法

先ほど配列の実行と変数の実行結果をみていただいたと思います。
同じものを実行されていますが、
実行させる書き方は違います。
まずは変数からみてみましょう。

console.log("変数name1",name1);
console.log("変数name2",name2);
console.log("変数name3",name3);
console.log("変数name4",name4);

変数を入れるだけです
簡単ですよね。
次に配列をみてましょう!

console.log("配列全体です",name);
console.log("配列での実行結果です",name[0]);
console.log("配列での実行結果です",name[1]);
console.log("配列での実行結果です",name[2]);
console.log("配列での実行結果です",name[3]);

違いがわかりますか?
変数とは2つの違いがあります
1つ目は配列の使用する変数は全て同じ
2つ目は変数名の隣に[番号]が書かれている
1つ目は当たり前かもしれませんがnameを変数にしているため
呼び出すときはnameで呼びだします。
2つ目は[]の中に数字が入っています!
この中の数字をindexと呼びますがindexは1スタートではなく
0スタートになります。
わかりづらいかもしれませんのでコードで書いていみます
let name = [“tanaka”, “itou”, “yamada”, “takahasi”];
これは先程の配列コードです。
これの名前が入っている部分をindexに変換すると
let name = [“0”, “1”, “2”, “3”];
になります。
そうです配列を個別に呼び出すにはこのindexを呼び出せばいいのです
今回はtanakaを呼び出すなら0、 itou を呼び出すなら1、 yamadaを呼び出すなら2、 takahasi を呼び出すなら3
となります。
呼び出しもあまり難しくないですよね?
ただ実務で配列を使う場合もう少し複雑な配列になるので
基本は確実に押さえておきましょう!

最後に

いかがでしたでしょうか?
配列の基本的な使い方は分かりましたでしょうか?
配列は色々な使い方があります。
例えばlengthを使ってif分岐させるなど
結構使われます。
それはまた別の機会にしましょう
ただ今回の配列は基本であるため覚えておくと良いでしょう!
最後までご覧いただきありがとうございました。