【JavaScript】初心者が初心者にお絵かきで伝えるJavaScriptの配列と連想配列【あくまでイメージです】

#はじめに
私はコーディングの勉強をはじめて２週間ちょっとのQAです。
勉強をはじめて最初につまる壁は**専門用語がわからない**だと思います。
専門用語のイメージをつかめる様になると、勉強もはかどります(｀・ω・´)!
今回はJavaScriptの配列と連想配列をコードからではなくイメージでおつたえします。

#配列とは
##Google先生に聞く
専門用語迷子になっている初心者って、とりあえず、Google先生に聞きますよね？
私自身Google先生に聞きまくりました。

![スクリーンショット 2019-04-18 23.20.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384139/d6d876fa-33d4-fc7c-e824-9fb21dcf0ad1.png)

そして、Wikipedia先生にたどりつきます。


>配列とは
>>複数の要素（値）の集合を格納・管理するのに用いられるデータ構造が配列である。数学のベクトルおよび行列に近い概念であり、実際にベクトルおよび行列をプログラム上で表現する場合に配列が使われることが多い。同様に複数要素の集合を管理するデータ構造（コレクションあるいはコンテナ）には連結リストやハッシュテーブルなどがあるが、通常はメモリアドレス上での連続性の違いなどから配列とは区別される。1次元の配列は特に線形配列 (linear array) とも呼ばれる。
>
>wikipediaより

**先生。。。。全く理解できません。。。。**

##配列を絵で書いてみる
とりあえず配列は**値の集合体**です。　
といわれてもイメージがなかなかつきにくいので、コードで書き方をおさらいしてから、絵でイメージをふくらませていきます！

```js:
const fruits = ['りんご', 'みかん', 'ばなな'];
```
イメージを言語化するとフルーツという名札がついていて仕切りがついている箱を用意します。`const fruits`
そこに、りんご、みかん、バナナを**順番に**並べて入れます。さらに、その１つ１つの仕切りには**部屋番号**がついています
絵で書いてみました（※一番右にあるのは**誰がみてもバナナ**です）

![スクリーンショット 2019-04-19 0.30.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384139/7e660a1a-d6b5-4a08-e84c-adbde7e8101d.png)
赤い箱がコードでいう`[ ]`の部分、部屋のしきりが　`,`　、`fruits`という箱の名前が変数名です！！
それと、各部屋に`0` `1` `2` と**部屋番号**が振ってあります。




あとはもう妄想をふくらませるだけです！
私達は直接この部屋に尋ねることができないので、JSを介して「fruitsの箱になにはいっているの？」,「fruitsの箱の０番目の部屋にはなにがはいっているの？」と聞いてあげることができます！

```js
console.log(fruits);  //fruitの箱の中身おしえて
//["りんご", "みかん", "ばなな"]

console.log(fruits[0]);   //fruitｓの箱の０番目の部屋にはいっているのは？
//りんご
```

イメージついたね！！やったね！！


#連想配列とは
私の中ではこっちが超大事だった
##Google先生に聞く
連想配列もわからないのでまずはGoogle先生に質問します！！![スクリーンショット 2019-04-19 1.12.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384139/05e858ef-7c12-1ad1-eece-c21c24009251.png)


>連想配列（れんそうはいれつ、英語: associative array）とは
>>コンピュータプログラミングにおいて、添え字にスカラー数値以外のデータ型(文字列型等)も使用できる配列である。抽象データ型のひとつ。連想リスト、連想コンテナ、辞書（あるいはカタカナでディクショナリ 英語: dictionary）、ハッシュ（英語: hash）、マップ（英語: map）とも呼ばれる。

>Wikipedia先生より

**先生…カタカナばっかりで辛いっす…**

##連想配列を絵で書いてみる
連想配列は、JS入門書だと**「オブジェクト」**という用語で出てきます。
連想配列もオブジェクトの一種みたいですが、オブジェクトと言うと広義だなーと思ってます。
連想配列も**モノ**を纏めているものなのですが、配列とは少しちがいます。
配列は、箱にモノを順番にならべて行ってあげましたが、連想配列には順番は関係ありません。
**１つの「モノ」**とその「モノ」の**特徴**を纏めてあげている様な感じです。（※あくまでイメージです）

といってもあまりイメージがつかないので、コードの書き方のおさらいから


```js:
const apple = {
  color:`赤`,
  taste:`甘い`,
  season:`秋`,
  producing:`青森`
}
```

イメージを言語化すると…
りんごという変数を定義して、`{}`の中に「特徴の種類」と「特徴」を入れていってあげてます！ただ、ずっとこの名称をつかっているとエンジニアぽくないので、`{}`「特徴の種類」「特徴」を専門用語に置き換えてあげますー！！

![スクリーンショット 2019-04-19 19.10.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384139/85444482-cb6c-793c-9263-4e7f2d4d5a0a.png)

特徴名と言っているのが`プロパティ名`、特徴と言ってた部分が`値`、それをまとめたのが`プロパティ`そして`{}`全体で`オブジェクト`です。


**専門用語にした瞬間に訳わからなくなる現象に名前をつけたいねー(´・ω・｀)**



さて早速連想配列のイメージをお絵かきして捉えていきます！！
![スクリーンショット 2019-04-19 19.17.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384139/3bc150f7-6da6-afb3-97f8-5403da53e745.png)
配列とちがって、連想配列には**順序という概念がありません。**袋にまとめてあげる様な感覚です。
袋についてるタグが**変数名**、名札がついたカプセル自体が**プロパティ名**、赤という値が書いてある紙が**値**、そして、カプセルの中+紙で**プロパティ**になります。

絵にするとわかりやすくて(・∀・)ｲｲﾈ!!


後はまた妄想をふくらませます(´∀｀*)
紙にかいてあるモノは私達は直接みる事ができないので、JSを通して、「appleの袋の中身みせて!!」や「appleの袋に入っているcolorのカプセルには何がはいっているのー？」ときいてあげる事ができます!! 

```js:
console.log(apple);  //appleの中身おしえて
//{color: "赤", taste: "甘い", season: "秋", producing: "青森"}

console.log(apple.color);  //appleの中身のcolorの中に入っている値おしえて
//赤
```
イメージできてきた！！やったね！！


###補足
補足で、オブジェクトはこんな事ができるよーという紹介です!!

更に更に、このプロパティはいろいろな事ができます！！
- **プロパティはオブジェクトを作成した後でも自由に追加可能**　（カプセルを袋にいれて纏めた後でもカプセルを追加できる）
- **値が空でもオブジェクトに追加できる**　(なにも書いていない紙をカプセルにいれて袋にいれてOK)
- **プロパティは削除可能**　（カプセルは袋から取り出すことができる）
- **値は書き換えることが可能**　（紙の中身をいつでも修正できる！！）
- **プロパティの中に配列やオブジェクトを入れることがが可能**　（カプセルの中に配列や袋そのものをいれてられる）
- **配列にオブジェクトを入れることが可能**　(配列の部屋1つに袋を1つ入れられる)
- **値には関数(Function等)を入れる事が可能**　　（紙には関数を書く事ができる）

私の中では、**値には関数を入れる事ができる**超大事でした。
そしてほかにもいろいろできると思いますが、そこまで勉強できていません。すみません(´・ω・｀)


#最後に
**「え!?最後!?配列の操作とかオブジェクトの操作は？　ただ絵書きたかっただけでしょ!?」**


正直そのとおｒ(ry
でも、自分の中で連想配列の概念が、すごく役立つ事になりました。


---

話がとびますが２週間ちょい勉強をしていて、専門用語だらけで、本を読んだ時こうなってました。

**「オブジェクト？　あーJSで操作できるモノでしょ・・・で??( ﾟдﾟ)」**
**「プロパティ？　あーオブジェクトの属性ね・・・・で??( ﾟдﾟ)」**
**「メソッド？　あー命令文ねー！　メソッドの後には必ず()くるんだよね・・・で??( ﾟдﾟ)」**

この３つ!!「オブジェクト」「プロパティ」「メソッド」の概念が自分の中で形になった時に、頭の中の霧がはれていきました。そして、今までただただ書き写していた本の内容が**スルスル頭に入ってくる**様になりました。(**注意：あくまで入門書レベルです**)


#次回は
私の中で革命的だった「オブジェクト」「プロパティ」「メソッド」について記事にしたいと思います!!
これがやりたくて、配列と連想配列の記事を書いたりしました。

それが[こちら](https://qiita.com/erika_vaporeon/items/4968d74bdce388133ce9)
JS勉強したての人で、**で??( ﾟдﾟ)で??( ﾟдﾟ)で??( ﾟдﾟ)**となっている方に是非みていただきたいです

---
最後に宣伝
ここに書いた絵は全てFigmaでマウスオンリーで書きました！
Figmaスキル向上もして一石二鳥でした、そのうちFigmaの記事を書きたいとおもいます！
Figma楽しいよFigma