【JavaScript入門】JavaScriptの配列を学ぼう



はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptの配列について学びます。

配列とは、複数のデータを扱うことのできる「型」です。

配列を使うと様々なデータをまとめて管理することができます。

本題に入る前に、JavaScriptの配列を理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「007 配列」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

配列ってなに

まずは、配列について見ていきましょう。

配列とは、複数のデータを扱うことのできる「型」 になります。

複数のデータとは、数値や文字などのデータです。

今までは、一つの変数に一つの値を入れていましたね。

const number = 1

しかし、1から10までの値をまとめて変数で扱いたい場合はどうすればいいのでしょうか。

次のように変数を10個書くこともできます。

const number1 = 1
const number2 = 2
const number3 = 3
const number4 = 4
const number5 = 5
const number6 = 6
const number7 = 7
const number8 = 8
const number9 = 9
const number10 = 10

10個ならいいですが、これが100個、1000個となると扱うのが大変になってしまいますね。

この問題を解決するために、配列を使うことができます。

配列は、一つの変数で複数の値を持つことができます。

一つの変数で扱うことによって、分かりやすく効率的にプログラムを書くことができるのです。

プログラミングの世界では、配列のことを「Array（アレイ）」と呼ぶことが多いです。

一緒に覚えておきましょう。

配列は何のためにあるの

配列は、一つの変数で複数の値を持つことができます。

複数の値を扱うことができるので、まとまったデータを処理するのに適しています。

例えば、学校のクラスの生徒の一覧データや、ニュース記事の一覧など多岐に渡って配列を使うことができます。

配列の書き方

では、JavaScriptの配列の書き方を見てみましょう。

配列のフォーマットは次のようになります。

変数 = [値,値,値]

配列を作る際には、「[]」の中に値を入れます。

その値の一つ一つを、要素 と呼びます。

値は、カンマ区切りで並べます。

実際にコードで書いてみましょう。

const fruits = ["りんご", "オレンジ", "バナナ"]

「fruits」という変数に配列を代入しています。

配列の要素は、「りんご」、「オレンジ」、「バナナ」の3つです。

配列の値の取り出し方

では、配列の中から「りんご」を取り出してコンソールに表示してみましょう。

配列の要素の取り出し方は、次のフォーマットです。

変数[インデックス]

コードで書くと次のようになります。

const fruits = ["りんご", "オレンジ", "バナナ"]
// コンソールに表示する
console.log(fruits[0])

変数名の後に「[]」をつけて、その中に数字を書いています。

fruits[0]

しかし、この数字は一体なんでしょうか。

インデックスってなに

この数字は、インデックス と言います。日本語では、添え字とも言います。

インデックスとは、配列の要素の一つ一つに割り振られた番号 です。

配列は複数のデータを扱うので、その一つ一つのデータに番号を振って管理します。

そして、私たちはその番号を指定して配列からデータを取り出すのです。

インデックスの番号の振られ方は、ルールがあります。

番号は0から始まって、順番に割り振られていきます。

例えば、先ほどの例ですと次のように番号が振られれています。

const fruits = ["りんご", "オレンジ", "バナナ"]

なので、1番目にある「りんご」を取り出したい場合は次のように「0」を指定します。

fruits[0] // りんご

オレンジを取り出したい場合は、「1」を指定します。

fruits[1] // オレンジ

配列を作る時の変数の名前の付け方

配列を作る時は変数の名前に注意しましょう。

以前も話したように、変数の名前にはなるべく 意味を持たせる のが推奨されています。

【JavaScript入門】JavaScriptの変数と定数を学ぼう

配列は複数のデータの集まりです。

なので、変数の名前は 複数形 にするのが推奨されています。

例えば、学校の生徒のデータを扱う配列があるとすれば次のように書きます。

const students = ["山田", "佐藤", "鈴木", "荒木"]

このように書くことで、「この変数は配列のデータなんだな」と推測することができるからです。

生徒一人だけの場合は、単数系 で書くのがいいでしょう。

const student = "山田"

配列を書いてみよう

では、実際に配列を書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「配列を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// 配列を書いてみよう
const fruits = ["りんご", "オレンジ", "バナナ"]

console.log(fruits)
console.log(fruits[0])
console.log(fruits[1])
console.log(fruits[2])

const students = ["山田", "佐藤", "鈴木", "荒木"]

console.log(students)
console.log(students[0])
console.log(students[1])
console.log(students[2])
console.log(students[3])

const scores = [80, 90, 98, 100]

console.log(scores)
console.log(scores[0])
console.log(scores[1])
console.log(scores[2])
console.log(scores[3])

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

配列を操作

配列の値の取り出し方を見ていきました。

次は、配列の操作を見ていきましょう。

配列は値の数を数えたり、値を追加したり、削除することができます。

順番に見てみましょう。

配列の要素の数を数える

配列の要素の数を数えるには、length を使います。

次のように書くと要素の数を調べることができます。

const fruits = ["りんご", "オレンジ", "バナナ"]

const len = fruits.length

// 「3」と表示される
console.log(len)

配列に要素を追加する

配列に要素を追加するには、push を使います。

次のように書くと要素を追加することができます。

const fruits = ["りんご", "オレンジ", "バナナ"]

fruits.push("もも")

結果は次のようなります。

["りんご", "オレンジ", "バナナ", "もも"]

push 以外にも要素を追加することができます。

インデックスを直接指定して、値を代入すると追加することができます。

const fruits = ["りんご", "オレンジ", "バナナ"]

fruits[3] = "もも"

4番目の要素として、インデックス番号の「3」を指定して代入しています。

配列の要素を削除する

配列の要素を削除する方法をいくつか見てみましょう。

先頭の要素を削除する

配列の先頭の要素を削除するには、shift を使います。

次のように書くと先頭の「りんご」を削除することができます。

const fruits = ["りんご", "オレンジ", "バナナ"]

fruits.shift()

結果は次のようなります。

["オレンジ", "バナナ"]

最後の要素を削除する

配列の最後の要素を削除するには、pop を使います。

次のように書くと最後の「バナナ」を削除することができます。

const fruits = ["りんご", "オレンジ", "バナナ"]

fruits.pop()

結果は次のようなります。

["りんご", "オレンジ"]

指定した要素を削除する

指定した要素を削除するには、splice を使います。

splice のフォーマットは次のようなります。

fruits.splice(開始位置, 要素数)

「開始位置」で配列の削除したい要素のインデックス番号を指定します。

「要素数」でいくつの要素を削除するか指定します。

実際に見てみましょう。

次のように書くと「オレンジ」を削除することができます。

const fruits = ["りんご", "オレンジ", "バナナ"]

fruits.splice(1, 1)

「オレンジ」のインデックス番号は「1」なので開始位置は「1」を指定します。

削除したい個数は、1つなので要素数に「1」を指定します。

結果は次のようなります。

["りんご", "バナナ"]

配列の操作をしてみよう

では、実際に配列の操作を書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「配列の操作をしてみよう」と記述がされています。

その真下に、次のように書いてください。

// 配列の操作をしてみよう

// 要素数を調べる
const myFavoriteFoods = ["ラーメン", "寿司", "焼肉"]

const length = myFavoriteFoods.length

console.log(length)

// 要素を追加する
myFavoriteFoods.push("パスタ")

console.log(myFavoriteFoods)

// 先頭の要素を削除する
myFavoriteFoods.shift()

console.log(myFavoriteFoods)

// 最後の要素を削除する
myFavoriteFoods.pop()

console.log(myFavoriteFoods)

// 指定した要素を削除する
myFavoriteFoods.splice(0, 1)

console.log(myFavoriteFoods)

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

まとめ

本章では、JavaScriptの配列について学びました。

最後にもう一度、重要なことを確認しましょう。