みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
今回はJavaScriptの配列について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 配列の作り方がわかる
- 配列のデータの取得ができる
- 配列とオブジェクトの違いがわかる
配列をマスターしよう!
配列とは
複数のデータを入れておく箱です

例えば、Fishesという箱の中に
ナマズ, サケ, タイ
の3匹が入っているようなイメージです。
配列は複数のデータを入れておく箱だよ!
配列の作り方
■構文
配列名 = [データ0, データ1, データ2]
このように、ブラケット[]の中に
カンマ区切りでデータを列挙することで配列を作成できます。
先ほどの魚の例をコーディングしてみましょう。
const fishes = ["ナマズ", "サケ", "タイ"]
console.log(fishes)
// 【出力結果】["ナマズ", "サケ", "タイ"]
ちなみに、定数で宣言しているけど配列の中身は操作できるよ!
配列のデータを取り出したい
配列のデータはindex、つまり番号で管理されています。

このように、
- fishesの0番目…”ナマズ”
- fishesの1番目…”サケ”
- fishesの2番目…”タイ”
というようにデータが管理されているので、
配列のN番目のデータを取り出す、という処理を行います
■構文
配列名[index番号]
先ほどの例ですと、
console.log(fishes[0])
// "ナマズ"
console.log(fishes[1])
// "サケ"
console.log(fishes[2])
// "タイ"
というようにデータが管理されています
一言でいうと、オブジェクトのkeyとvalueの関係性が
配列ではindexとvalueになっているだけです!
配列ではindexとvalueになっているだけです!
オブジェクトとの違い
結論から言うと、データの管理方法が異なります。


- 配列は、データを番号(index)で管理している
- オブジェクトは、データを文字列(key)で管理している
■ 配列の構文
// 数値
オブジェクト名[index];
■ オブジェクトの構文
// 文字列
オブジェクト名[key];
もっと言うと、持っている情報が基本的に違います
- 配列は、同じようなデータを複数持っている
- オブジェクトは、1つのデータの詳細情報を持っている
※例外あり
オブジェクトについてはこちらをご参照ください。

【JavaScript】オブジェクトを世界一わかりやすく解説!!自信あり【key, value】
JavaScriptのオブジェクトをこれ以上無いくらい分かりやすく解説しました
この記事を読むと・・・
オブジェクトの概念が理解できる
オブジェクトから期待の値を取得できる
配列とオブジェクトの1番の違いはデータの管理方法だよ!
例外はあるけど、持っている情報が違うよ!
例外はあるけど、持っている情報が違うよ!
おまけ:宿題
以下のデータを持つ配列fruitsを宣言し、
「私の好きなフルーツはXXXです」と出力してください。
まとめ

- 配列とは複数のデータを入れておく箱
- データをindex番号で管理する
- 宣言🦈 配列名 = [データ0, データ1, データ2]
- 出力🦈 配列名[index番号]
配列をマスターできてえらい!
そろそろプログラミングにも慣れてきた頃だね!
そろそろプログラミングにも慣れてきた頃だね!
おまけの答え
// 配列の宣言
const fruits = ["りんご", "バナナ", "いちご"];
// 配列の0番目を出力
console.log("私の好きなフルーツは" + fruits[0] + "です")
// 私の好きなフルーツはりんごです

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈