配列のきほん
このレッスンで分かること
- 角カッコ
[]で複数の値をひとまとめにした配列を作れますworks[0]のように 0 から始まる番号で要素を取り出せますworks.lengthで要素数が分かり、works[works.length - 1]で末尾を取れます
配列のきほん とは
複数の値をひとつの変数にまとめて持つための入れ物が配列です。作成のしかたと、番号を使った要素の取り出しかたを覚えます。
値がひとつずつでは足りなくなる
これまで作ってきた山田 太郎さんのプロフィールサイトには、作品が 3 つあります。プロフィールサイト と 自己紹介カード と スキル一覧の表 です。これを変数だけで持とうとすると、こうなります。
const work1 = "プロフィールサイト";
const work2 = "自己紹介カード";
const work3 = "スキル一覧の表";作品が 3 つのうちは、まだ書けます。ですが作品が 10 個に増えたらどうでしょうか。work10 まで変数を並べることになり、しかも「全部の作品名を順番に表示する」という処理を書こうとした瞬間に手が止まります。work1 から work10 までを機械的に回す方法が無いからです。
そこで登場するのが配列です。配列は、複数の値に順番を付けてひとつの入れ物にまとめる仕組みです。
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];これで変数はたったひとつになりました。作品が 10 個でも 100 個でも、入れ物は works ひとつのままです。
配列は JavaScript でもっとも使われるデータ構造です。Web の画面に並ぶ一覧、記事のリスト、検索結果、通知の履歴、その裏側はほぼ必ず配列です。ここを押さえると「一覧が作れる」ようになるので、できることが一気に広がります。
配列の作りかた
配列は角カッコ [] の中に、値をカンマ , で区切って並べて作ります。
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
const views = [120, 80, 45];
const empty = [];works のように文字列を並べても、views のように数値を並べても構いません。empty のように中身が何も無い配列も作れます。これを空配列と呼び、これから値を足していくときの出発点としてよく使います。
配列に入れる値のことを要素と呼びます。works の要素は 3 つ、empty の要素は 0 個です。
JavaScript の配列は、ひとつの配列の中に文字列と数値が混ざっていてもエラーになりません。ただし混ぜると「この配列には何が入っているのか」が読み手に伝わらなくなるため、実務では 1 つの配列には同じ種類の値だけを入れるのが原則です。
番号で取り出す
配列から値を取り出すときは、変数名のうしろに角カッコを付けて番号を書きます。この番号をインデックスと呼びます。
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
console.log(works[0]); // プロフィールサイト
console.log(works[1]); // 自己紹介カード
console.log(works[2]); // スキル一覧の表ここでいちばん大事なのは、インデックスが 1 ではなく 0 から始まることです。1 番目の要素のインデックスは 0 です。頭では分かっていても指が works[1] と書いてしまうので、最初のうちは表で確認しながら書きましょう。
| インデックス | 値 | 呼びかた |
|---|---|---|
0 | "プロフィールサイト" | 1 番目の要素 |
1 | "自己紹介カード" | 2 番目の要素 |
2 | "スキル一覧の表" | 3 番目の要素 |
3 | undefined | 存在しない |
存在しない番号は undefined になる
表の最後の行に注目してください。works には要素が 3 つしか無いので、works[3] は存在しません。ここで JavaScript は エラーを出さずに undefined を返します。
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
console.log(works[3]); // undefined
console.log(works[100]); // undefinedエラーで止まってくれないので、間違いに気付くのが遅れます。undefined のまま文字列と連結すると "作品は undefined です" という表示になり、ここで初めて異変に気付く、というのがよくある流れです。「取り出した値が undefined だったら、まずインデックスを疑う」と覚えておいてください。
要素数は length で調べる
配列に何個の要素が入っているかは length で分かります。
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
console.log(works.length); // 3
console.log([].length); // 0length はメソッドではなくプロパティなので、works.length() のようにカッコは付けません。付けるとエラーになります。
そして length が分かると、末尾の要素を取り出せます。要素が 3 つなら最後のインデックスは 2 です。つまり length - 1 が常に最後のインデックスになります。
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
const last = works[works.length - 1];
console.log(last); // スキル一覧の表works[3] と直接書いてしまうと、作品が増えた瞬間に別の要素を指してしまいます。works[works.length - 1] と書いておけば、要素が何個であっても必ず末尾を指します。
空配列に対して
works[works.length - 1]を書くとworks[-1]になり、結果はundefinedです。エラーにはなりません。空のときにどうするかは、自分でif (works.length === 0)と書いて決める必要があります。今回の課題でもここが山場です。
中身を書き換える
インデックスを指定して代入すると、その位置の要素を書き換えられます。
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
works[1] = "自己紹介カード v2";
console.log(works[1]); // 自己紹介カード v2const で宣言したのに書き換えられるのか、と思うかもしれません。const が禁止しているのは「works という変数に別のものを入れ直すこと」であって、配列の中身をいじることは禁止していません。この仕組みは第7章の const と参照でくわしく扱います。
よくある間違い
配列を覚えたてのころにつまずくのは、ほぼ次の 3 つです。
- インデックスを 1 から数えてしまう — 1 番目の要素は
works[0]です。works[1]は 2 番目です。ひとつずつずれるこの間違いは off-by-one エラーと呼ばれ、経験を積んだ人でもやります
const works = ["プロフィールサイト", "自己紹介カード"];
console.log(works[1]); // 自己紹介カード (1 番目のつもりが 2 番目)
console.log(works[0]); // プロフィールサイト (これが 1 番目)- 末尾を取るときに
lengthをそのまま使う —works[works.length]は必ず存在しないインデックスになるのでundefinedです。- 1を忘れないでください
const works = ["プロフィールサイト", "自己紹介カード"];
console.log(works[works.length]); // undefined
console.log(works[works.length - 1]); // 自己紹介カードlengthにカッコを付ける —works.length()はTypeErrorになります。lengthは関数ではなく、配列が持っている値そのものです
const works = ["プロフィールサイト"];
// console.log(works.length()); // TypeError
console.log(works.length); // 1要件
- 関数名は
lastWorkTitle、引数は配列works1 つ、戻り値は文字列 - 末尾の要素は
works[works.length - 1]で取り出すこと (works[2]のように番号を直接書かない) works.lengthが0のときは文字列"作品はありません"を返すこと
入出力例
lastWorkTitle([]) → "作品はありません"
lastWorkTitle(["プロフィールサイト"]) → "プロフィールサイト"
lastWorkTitle(["自己紹介カード","スキル一覧の表"]) → "スキル一覧の表"
lastWorkTitle(["プロフィールサイト","自己紹介カード","スキル一覧の表"]) → "スキル一覧の表"