TypeScriptでわたしがよくつまずく配列定義の仕方

# はじめに

実装しているときに、頭の中では「こういう形で変数つくりたいな〜〜」というイメージができているのに実際にコーディングに落とし込めない時が多々あります。

（console.log()で変数確認したら、「違う、、、わたしが求めている変数の形じゃない、、、！:cry:」）
その度に毎回毎回検索しているので、備忘録として記録します。

## 配列の色々
### 基本の配列

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/955dba9b-122d-3879-6c20-6d0a9a8eaf96.png)

``` typescript
const fruitsArray: string[] = ['マンゴー', '桃', '梨', 'ぶどう']
```

`const 変数名: 型名 = 初期値`　なので、
上記は`string型の配列`で変数を定義し、複数の文字列が入った配列で初期化。

もう少しだけ詳しく中身を見てみると、こんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/0c09b97a-d917-bc1f-e01f-6e5ad8deeef7.png)

つまり、下記のような書き方をしたら配列の中身にアクセスできる。

``` typescript
console.log(`配列の中の要素数は${fruitsArray.length}個だよ！`)
console.log(`配列の3番目の果物は${fruitsArray[2]}だよ！`)
```
実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/fa75dcd6-84c8-4e6f-db53-dcc166552c3e.png)
※配列の1番目は0なので`fruitsArray[2]`は配列の3番目になる。
配列の中身1個ずつconsole.logで出力したい、といった時は

``` typescript
for (let i = 0; i < fruitsArray.length; i++) {
    console.log(fruitsArray[i])
  }
```

もちろんstring型だけではなく、値の配列の場合は`const numArray: number[]`（型をnumber)とすればOK

#### 基本のまとめ
- 何も入っていない空っぽの配列

``` typescript
const array1: string[] = []
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/53a57cfb-ada9-72ca-3561-51013abf5c15.png)

- 配列の要素数を指定し、中身は空っぽ

``` typescript
const array2: string[] = new Array(5)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/859725ad-b44d-5c4d-0329-2587d4b5ff9b.png)
メモ
`array2[0]`は`undefined`となる。

- 配列の要素数を指定し、中身は全て空文字
 
``` typescript
const array2: string[] = Array(5).fill('')
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/c32dba55-8aac-0f82-be08-3e66f3c21a3b.png)
メモ
number型の配列を`Array(5).fill(0)`というように初期化できる。(0が5個入っている配列)


### 配列の中に配列

いわゆる多次元配列。
こんな感じで宣言したら、

``` typescript
const foodArray: stirng[][] = [
    ['りんご', 'オレンジ', 'ぶどう'],
    ['レタス', 'キャベツ'],
    ['フランスパン', 'クリームパン', ',カレーパン', '塩パン'],
  ]
```
こういう形ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/5a93453e-426a-2d78-7992-80f90ea3a23f.png)

アクセス方法も基本の配列と同じ。
`foodArray`という配列の0個目には`['りんご', 'オレンジ', 'ぶどう']`という配列が入っており、さらに`['りんご', 'オレンジ', 'ぶどう']`という配列の2番目には`ぶどう`が入っている。
なので、`ぶどう`を取り出したい時は、

``` typescript
foodArray[0][2]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/4d192943-6b1a-5cc8-e4cb-ebf840ad6ad6.png)

### オブジェクトの配列
``` typescript
const personInfo = [
    { name: 'かっきー', age: 28 },
    { name: 'ちゃんみお', age: 15 },
    { name: 'しまむー', age: 17 },
    { name: 'りんちゃん', age: 15 },
  ]
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/3e69435a-7b9a-1209-9bb5-635affe920f8.png)

配列に入っているのはオブジェクトなので、1個前の`foodArray[0][2]`のようにアクセスできません。

まず、オブジェクトに対してはどのようにアクセスできるか整理してみます。
オブジェクトの場合はこのように宣言できます。

``` typescript
const person = {
    name: 'かっきー',
    age: 28,
  }
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/06541eac-93b1-93cd-c645-b03ba9d14191.png)

今までの配列と違うところは、`0:`、`1:`、`2:`といった何番目というインデックスがないところです。

`変数名(上でいうperson).取り出したい情報名(上でいうageまたはname)`のように、
`.`をつけることでアクセスできます。

``` typescript
console.log(`わたしの名前は${person.name}で、${person.age}歳です！`)
```

実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/5b392e80-0bfd-c787-6182-9b06df96e2e5.png)

ここで元の話に戻ります。
配列に入っているオブジェクトはどうやってアクセスするのか？です。
`りんちゃん`の情報を取り出してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/3e69435a-7b9a-1209-9bb5-635affe920f8.png)

まず`りんちゃん`が入っているオブジェクトは配列の3番目。

``` typescript
const personInfo = [
    { name: 'かっきー', age: 28 },
    { name: 'ちゃんみお', age: 15 },
    { name: 'しまむー', age: 17 },
    { name: 'りんちゃん', age: 15 },
  ]

  console.log(personInfo[3])
```

実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/0a109e21-44aa-0276-a53e-82c7bfd7cc21.png)
りんちゃんの情報が取れました！
ここでさらに、`name`と`age`だけ取り出してみます。

`personInfo`配列の3番目を指定したうえで、`.`をつけてアクセス、です。

``` typescript
console.log(`${personInfo[3].name}は${personInfo[3].age}歳！`)
```

実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1833388/ca77f3bd-e60a-2d3f-db42-3513dc8f8c81.png)

# さいごに

実際に自分でコードを書いて動かして`console.log()`で確認するともっと理解が深まると思います！
わたしも、(このへんは余裕でしょ！)と思いながらコーディングをしていたのですが、自信がない部分や、途中で調べた中でこういう宣言の仕方もあったなあと思い出すこともあったので、まとめてみてよかったなと思いました。

また、他にも**オブジェクトの中にオブジェクト**や、**渡されたオブジェクトを配列に変換（逆も然り）**などなどつまずく概念がありまして（なんならそれが苦手:cry:)、今度はオブジェクトにフォーカスした記事を上げていきます！！:muscle:

# 参考
- [JavaScriptでの配列を初期化する方法](https://uxmilk.jp/28491)

- [JavaScriptの配列初期化](https://qiita.com/yuta-ike/items/f60b940540a89332df2a)

- [JavaScript オブジェクトの基本](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics)

- [TypeScript 型の種類](https://ichinari.work/TypeScript_20211113)