JavaScript初心者の方へ向けて、配列の基本について
・配列とは？
・配列の使い方
をまとめました。
配列の理解でお困りの場合には、参考にしてみてください。
目次
配列とは？
配列とは「リストのようなオブジェクトである」というのが一般的な説明方法ですが、初学者にはあまりピンとこないと思います。
次からは「配列」がなにかをイメージしていただくために「配列がないとどうなるか？」について見ていきましょう。
配列がないと？
例えば、フルーツの名前を変数に入れてしまいたいとします。
5種類のフルーツ名全てを別々の変数名に代入していく必要がありますね。
|
1 2 3 4 5 6 7 8 9 |
let fruit1 = "りんご" let fruit2 = "オレンジ" let fruit3 = "メロン" let fruit4 = "いちご" let fruit5 = "洋梨" |
5つなのでなんとかなりますが、この種類数が何十、何百となると、それだけ変数の数も増えます。
代入も大変ですし、管理も大変ですよね。
配列を使った場合
そこで「配列」というものを使い、１つの変数で複数の値を扱えるようにするのです。
|
1 |
let fruits = ["りんご","オレンジ","メロン","いちご","洋梨"] |
たったこれだけで5種類のフルーツ名を「配列」に代入できました。
「配列」を使うと、１つの変数の中に複数の値を入れることができるんですね。
配列の使い方
ここからは配列の基本的な使い方をご紹介いたします。
配列を作る
先ほどの例で見ていただいたかと思いますが、角括弧（ [ ] ）の中にカンマ（「,」）で区切って入れていきます。
|
1 |
let fruits = ["りんご","オレンジ","メロン","いちご","洋梨"] |
配列の値を取得する
次は配列の中から特定の値を取り出したい場合です。
この場合は配列を入れた変数名に角括弧（ [ ] ）で番号を入れて指定できます。
|
1 2 3 4 5 6 |
let fruits = ["りんご","オレンジ","メロン","いちご","洋梨"] console.log(fruits[0]); //「りんご」と出力されます。 console.log(fruits[1]); //「オレンジ」と出力されます。 console.log(fruits[2]); //「メロン」と出力されます。 console.log(fruits[3]); //「いちご」と出力されます。 console.log(fruits[4]); //「洋梨」と出力されます。 |
上記の例でお気づきかもしれませんが、番号は「0」からのスタートです。
ですので、１番目を指定するときは[0]。２番目を指定するときは[1]で指定をします。
この点は慣れるまで違和感があるかもしれませんが非常に大事ですので必ず覚えてください。
配列の値を変更（上書き）する
|
1 2 3 |
let fruits = ["りんご","オレンジ","メロン","いちご","洋梨"] fruit[1] = "みかん" //2番目の値を「みかん」に変更します。 console.log(fruits[1]); //「みかん」と出力されます。 |
取得するときと同じ方法で配列の中の「場所」を指定して、値を代入できます。
配列の長さを取得する
配列の長さがいくつなのかを、「lengthプロパティ」を使って取得することができます。
|
1 2 |
let fruits = ["りんご","オレンジ","メロン","いちご","洋梨"] console.log(fruits.length); //「5」と出力されます。 |
この配列の長さを取得することはよくありますので覚えておきましょう！
多次元配列
配列の中に配列を入れることができます。それを「多次元配列」と呼びます。
少し難しいかもしれませんが、覚えておきましょう。
|
1 2 3 4 |
let fruits = [["紅玉","王林"],"オレンジ","メロン","いちご","洋梨"] console.log(fruits[0]); //「▶︎(2) ["紅玉", "王林"]」と出力されます。 console.log(fruits[0][0]); //「紅玉」と出力されます。 console.log(fruits[0][1]); //「王林」と出力されます。 |
一見ややこしいですが、仕組みはシンプルですので是非覚えておいてください。
配列に要素を追加・削除・結合する
配列に要素を追加・削除・結合する方法はこちらをご覧ください。
JavaScriptで配列に要素を追加・削除・結合する方法まとめ【初心者向け】
まとめ
以上、JavaScriptの配列の操作について、
・配列とは？
・配列の使い方
をご紹介しました。最初の段階で配列の理解に苦労されている方は、ぜひ参考にしてみてください。
