【英語でプログラミング学習 】変数を１つの値だけではなく、いくつもの”リスト”として作る時には「配列(Array)」を使う

これまで「変数」の説明では、数字や文字列など特定のタイプのデータを１つだけ入れておくのが普通でした（これがプリミティブ型）です。ところが、ObjectではPerson（人）という変数の中に名前や年齢、住所、電話番号などいくつもの属性（Property）を指定することができました。つまり一つの変数に何種類もデータを保存することができたわけです。ところが、単純にリストのようなものを作りたい時にはもっと便利な「配列」（Array）という特殊なObjectがあります。今回はその配列の解説です。ではいつもの通りリンクのビデオから聞き始め、今回は「Function(関数）」のところまでです。

ここまで。

「リスト」の作り方はとても簡単

まずは冒頭、

You might be dealing with a list of objects.
オブジェクトのリストを使う時があります。

このmight  ～という表現は理解して、さらに使えるようになってください。例えば日本語で、「ラーメンが食べたい時だってあるでしょう？」という場合にこのmightが使えます。

Sometimes you might want to eat Ramen!
ラーメン食べたい時だってありますよ。

ここら辺のニュアンスは使いなれないとなかなか理解できないかもしれませんが会話では頻繁に使う言葉です。

さてリストをどのように使うか、その例として、

✅ ショッピングカートの中の商品
✅ ユーザーが選択した色

そこで選択された色の変数としてこう宣言しています。

let selectedColor;

これが一色ならこうなります。

let selectedColor = 'red';

では複数あったらこんな感じでどうでしょう？

let selectedColor = 'red', 'blue';

これに近い形で宣言できるのが配列です。括弧を入れるだけです。

let selectedColor = ['red', 'blue'];

そこでredとblueだけを入れて、Consoleでの中身を見てみました。

0: 'red'
1: 'blue'

配列の中身には一つ一つ番号があります。これをindex（インデックス）、そして入っている中身をelement（要素）と呼びます。配列の番号は１ではなく０からスタートすることに気を付けてください。

そしてこのインデックスを使って要素にアクセスするには次のようにして行います。

Here is how.
それはこうやってります。

selectedColor[0] が 'red'
selectedColor[1] が'blue'

JavaScriptの配列はメチャクチャDynamic!

他のプログラミング言語では、配列を作る前に、中に入れる要素の数を決めておかないといけないのと、さらに要素のデータ型が一定であるものがほとんどです。ところがJavaScriptはそこがとても自由です。

● 配列の長さは自由に変えられる
● 配列の要素のデータタイプは何でもOK

まず長さ。

let selectedColor = ['red', 'blue'];
selectedColor[2] = 'green';

最初の宣言の段階では入れ物の数は２つ。そして当然、３つ目のgreenを加えることができます（もちろん３つ目の入れ物のインデックスは３ではなく２です。０からスタートしているんですから）。何も知らないとこうして新しい要素を加えるのは当然できると思ってしまいますが、これがご法度な言語が他に結構あるのです。

では中身。

let selectedColor = ['red', 'blue'];
selectedColor[2] = 1;

今度は３つ目の要素にNumberの１を入れています。ですので中身は文字列、文字列、数字のように混在する形になります。混在させる意味があるかどうかは別として、とにかくJavaScriptのDynamicなスペックではこれが許されている点を理解してください。

ArrayはObjectなのでPropertyがある

Visual Studio Codeで配列の後にドットをタイプするとずらっといろいろな項目が表示されます。これはすべて配列の属性です。

配列のデータに対してどのような操作が可能かはまた後で取り上げますが、まずは配列そのものがObjectであり、そこには数々のPropertyが設定されているということを知っておいてください。

ここではよくつかわれる「配列の長さ」を調べるPropertyについて説明しています。

selectedColor.length;

これは文字通り配列に何個の要素が入っているかを返します。配列の長さはよくチェックするものなので、このlength属性は知っておくと便利です。

All I want you to take away is that an array is a data structure that we use to represent a list of items. 
ここで理解してもらいたいことは一つ。配列は項目のリストを表すのに使うデータ構造だということです。

このtake awayというのは,、人の話を聞いて理解して”持ち帰る”ことです。よくプレゼンをして最後に「まとめ」というスライドでポイントをまとめたものを用意することがありますが、その時にタイトルとしてKey Take Awayとします。ちなみにtake awayは「お持ち帰り」のtake outと同じ意味で使うこともあります。