【JavaScript】配列の作り方【array】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

今回はJavaScriptの配列について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

配列とは

複数のデータを入れておく箱です

例えば、Fishesという箱の中に
ナマズ, サケ, タイ
の3匹が入っているようなイメージです。

配列の作り方

■構文

配列名 = [データ0, データ1, データ2]

このように、ブラケット[]の中に
カンマ区切りでデータを列挙することで配列を作成できます。

先ほどの魚の例をコーディングしてみましょう。

const fishes = ["ナマズ", "サケ", "タイ"]

console.log(fishes)
// 【出力結果】["ナマズ", "サケ", "タイ"]

配列のデータを取り出したい

配列のデータはindex、つまり番号で管理されています。

このように、

というようにデータが管理されているので、
配列のN番目のデータを取り出す、という処理を行います

■構文

配列名[index番号]

先ほどの例ですと、

console.log(fishes[0])
// "ナマズ"
console.log(fishes[1])
// "サケ"
console.log(fishes[2])
// "タイ"

というようにデータが管理されています

オブジェクトとの違い

結論から言うと、データの管理方法が異なります。

■ 配列の構文

//         数値
オブジェクト名[index]; 

■ オブジェクトの構文

//        文字列
オブジェクト名[key]; 

もっと言うと、持っている情報が基本的に違います

※例外あり

オブジェクトについてはこちらをご参照ください。

【JavaScript】オブジェクトを世界一わかりやすく解説！！自信あり【key, value】

JavaScriptのオブジェクトをこれ以上無いくらい分かりやすく解説しました この記事を読むと・・・ オブジェクトの概念が理解できる オブジェクトから期待の値を取得できる

samehack.com

おまけ：宿題

以下のデータを持つ配列fruitsを宣言し、
「私の好きなフルーツはXXXです」と出力してください。

まとめ

おまけの答え

// 配列の宣言
const fruits = ["りんご", "バナナ", "いちご"];

// 配列の0番目を出力
console.log("私の好きなフルーツは" +　fruits[0] + "です")
//　私の好きなフルーツはりんごです

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

twitter
instagram