配列を理解するコツを分かりやすく解説【JavaScript基礎講座】

2020年3月23日2022年12月8日プログラム基礎JavaScript

プログラミングの勉強を始めると出会う基本知識の配列について解説します。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

Contents

1. 配列の基礎知識
2. 2次元配列と連想配列について
- 2.1. 2次元配列とは
- 2.2. 連想配列とは
3. まとめ：配列を理解するコツを分かりやすく解説
- 3.1. 配列を理解するための練習方法について

配列の基礎知識

プログラミングの配列について

なんか複雑でよくわからない
データ構造が理解できない

と悩むと思います。

変数はわかったけど、配列はデータが多くてよくわからん。。。

確かに配列はたくさんデータが入っていて複雑なデータ構造なので、理解するのが難しいです💦

ですが、配列を使えるようになるとプログラミング技術が飛躍的にアップします！

配列を使いこなせると「繰り返し処理を書くこと」が出来ます。なので格段に実務レベルに近いプログラムになります。

プログラミングの基礎知識である配列について簡単に解説します。

配列とは

配列とは、変数などの複数データを1つにまとめたデータ構造またはデータ型です。

これだと難しすぎて意味が分からん。。。

はい、自分もイミフです💦

簡単にいうと配列は「変数を複数入れておくことができる」ものになります。

つまり配列にはたくさんの変数が入ることになります。

なので、配列は「プログラムで使う変数を整理して格納できる」のでめちゃくちゃ便利なのです。

例えばCSV出力するプログラムなどで配列はすごく利用します。

変数は「値を出し入れすることができる箱」と前回の記事で紹介しました。
記事：変数とは？プログラミング初心者が悩む変数について解説

配列を理解するコツ

配列を理解するコツについて紹介します。

配列は「タンス」をイメージすると理解しやすくなります。

配列はタンスですか？

はい、タンスです。

イメージとしては次の画像のような感じです。

配列は「“値が入った変数(箱)"をたくさん収納するタンス」です。

配列は変数をたくさん収納できるので、めちゃめちゃ便利です。

配列とは

配列は「変数(箱)をたくさん収納できるタンス」といったイメージです。

配列を使ったプログラミング例

では、実際に配列を使ったプログラミング例をJavaScriptで解説します。

プログラミングは「習うより慣れろ」が重要で、実際にプログラミングすることが近道だったりします。

サンプル：配列へ変数を格納

プログラムで配列へ変数を格納する基本的なサンプルコードを解説します。

var hensu = 1;
var hairetu = [];
    hairetu[0] = hensu;
    hairetu[1] = hensu;

サンプルの解説

1行目
- hensuという変数を宣言して、数字の「1」を代入
2行目
- hairetuという配列を宣言
3行目
- hairetuの要素0番目にhensuを代入
4行目
- hairetuの要素1番目にhensuを代入

サンプルのイメージ

サンプルのポイント

配列の要素を0番目と指定して変数を代入している

あまり難しく考えないで「箱をタンスの0段目に入れている」ってイメージすると分かりやすいと思います。

配列の要素とは

配列には要素というものがあります。

この配列の要素とは、配列をタンスとすると「タンスの引き出しの段数」がイメージしやすいです。

たとえば

「配列の要素0番目＝タンスの引き出し0番目」

というイメージです。

また配列の要素は基本的に0番目から開始されます。

配列の要素については、実際に配列を使うと理解できるので「タンスの何段目か」程度の理解で問題ないです。

配列の要素

配列の要素の0番目などのことを添字またはキーなどといいます。

2次元配列と連想配列について

配列にはいくつか種類があります。その中でもよく使うことがある「2次元配列」と「連想配列」について解説します。

2次元配列とは

では、2次元配列について解説します。

2次元配列とは、配列の中に配列が入っている配列です。

配列の中にさらに配列が入っているんですか？

はい、配列には配列を入れることができます。

イメージとしては次の画像のような感じです。

2次元配列は「タンスの引き出しに収納BOXを入れる」イメージです。

JavaScriptのサンプルコードだと次のようになります。

var hako1 = 1;
var hako2 = 2;
var hako3 = 3;
var box = [];
    box[0] = hako1;
    box[1] = hako2;
    box[2] = hako3;
var tansu = [];
    tansu[0] = box;

2次元配列はデータが複雑なのでイメージしにくいですが、慣れるとすごく便利です。

2次元配列とは

2次元配列は「タンスの引き出しに収納BOXを入れる」イメージです。

連想配列とは

配列のもう1つの種類である連想配列について解説します。

連想配列とは、配列の要素を指す添字に数字ではなく名前を付けた配列です。

たとえばJavaScriptだと次のようなサンプルコードになります。

var members = [];
    members[0] = [];
    members[0]['first_name'] = '太郎';
    members[0]['last_name']  = '山田';
    members[1] = [];
    members[1]['first_name'] = '花子';
    members[1]['last_name']  = '鈴木';

連想配列とは

連想配列とは「要素を指す添字に数字ではなく名前を付けた配列」です。