最新！JavaScript入門講座ー配列の基本わかりやすく解説

プログラミングでは変数を宣言、初期化することによってコードを書いていくのが普通です。変数はとても可読性、再現性が高いです。その他にも、変数と同じ性質をもつものがあります。それが配列です。

配列は変数と同じく宣言初期化して使う値を代入する箱のようなもので、変数とよく似ています。しかし、配列は変数とは違った性質も持ち合わせています。配列は様々な場面で使われる機能でありますので、初心者の方は必ず習得しておきたい項目です。

本記事では、初心者の方向けに配列についてわかりやすく解説していきます。

配列の解説

配列の概要

まずは配列の概要について解説していきます。
配列というのは、変数がいくつも連なっているようなものです。下のようなイメージです。

このイメージのように、値を格納する箱がいくつもつらなっています。この箱の中に値を入れていくイメージです。この連続する箱の塊を配列といいます。

変数は基本的に数字や文字列、boolといった変数を一つのみしか格納することができません。しかし、配列を使えば一つの変数で複数の値を格納することができます。配列を使うことで連続する値や、文字、を一つの変数で格納できます。さらに繰り返し処理といった処理と組み合わせることでさまざまな処理を実現できます。

配列の箱は一つ一つ番号が振られています。これをインデックスと言います。配列を操作する場合や決まった値を取り出すときなどに使います。

配列はこのようなメリットがあります。これをしっかりと習得していきましょう。

配列を宣言・初期化する

ではまずは配列の宣言・初期化からみてみましょう。

let gafam = ["Google","Amazon","FaceBook","Apple","MicroSoft"];
let stockprice = [2000,3000,300,120,340];

console.log(gafam);
console.log(stockprice);

まずは変数と同様に宣言・初期化を同時に行う方法です。
上が文字列の配列で、したが数値の配列となります。値と値の間は,(カンマ)で区切ります。このカンマがないとエラーになります。
初心者によくあるエラーの一つなので、覚えておきましょう。

$ node array.js

[ 'Google', 'Amazon', 'FaceBook', 'Apple', 'MicroSoft' ]
[ 2000, 3000, 300, 120, 340 ]

実行すると上のようになります。

let mix = ["ETF",10000,"上場投資信託","nVidia","グラフィックボード",542.49];
let ea = ["Electronic Arts",140,"USA","California",true];

JavaScriptでは変数の型指定がありません。なので、配列も型の指定はないです。よって、上のサンプルのように様々な型の値を一つの配列に混ぜて初期化することも可能です。

空の配列

次は値を代入しない配列を解説していきます。

let empty = [];

変数も宣言と初期化を別々にできました。配列も同じで、配列を宣言するだけで初期化はしないということもできます。実装する内容によっては使い分けていきましょう。

let emptydata = ["個別株","米国株式",,10,true,10];

console.log(emptydata);

配列を宣言、初期化する場合、一部値を入れないということも可能です。
サンプルを見ると、3番目には値を入れていません。このように、存在しない値を含む配列も作成することが可能です。

これを実行すると、下のようになります。

$ node array.js

[ '個別株', '米国株式', <1 empty item>, 10, true, 10 ]

3番目はempty itemと表示されています。しっかりと、値がないことが認識されていますね。

変数を配列に変数を使う

let ticker = "AMZN";
let am = "Amazon.com";
let price = 3000;
let head = "Washington"

let array = [ticker,am,price,head];

let amzn = ["ticker : " + ticker,am,price+319.13,head+" : City of Bellevue"];

console.log(array);
console.log(amzn);

配列には変数ももちろん使うことが可能です。また、変数のみではなく、式も同様に配列の要素とすることが可能です。

$ node array.js

[ 'AMZN', 'Amazon.com', 3000, 'Washington' ]
[
  'ticker : AMZN',
  'Amazon.com',
  3319.13,
  'Washington : City of Bellevue'
]

式を使った配列を出力すると、このように変わった表示になります。

まとめ

では、今回のまとめに入ります。
本記事では次のようなことを学びました。

では、今回はここまでとなります。お疲れ様でした。

参考文献

文法とデータ型 - JavaScript | MDN

この節では JavaScript の基本文法、変数宣言、データ型、リテラルについて説明します。

developer.mozilla.org

配列 · JavaScript Primer #jsprimer

配列は値を順番に格納できるオブジェクトです。この配列の作成、更新、削除などの基本的な操作や実際に使い方についてを紹介します。また配列における破壊的なメソッドと非破壊的メソッドの違いについても紹介します。

jsprimer.net

https://www.freecodecamp.org/

www.freecodecamp.org