配列のきほん
このレッスンで分かること
- 角カッコ
[]で、複数の値をひとまとめにした配列を作れます- 番号は
0から始まり、要素数はworks.lengthで分かります
変数を 3 つ用意するのはつらい
山田 太郎さんのプロフィールサイトには、作品が 3 つあります。変数だけで持とうとすると、こうなります。
JavaScript
const work1 = "プロフィールサイト";
const work2 = "自己紹介カード";
const work3 = "スキル一覧の表";3 つならまだ書けます。ですが作品が 10 個に増えたら work10 まで並べることになり、しかも「全部の作品名を順番に出して」と言われた瞬間に手が止まります。work1 から work10 までを機械的にたどる方法が無いからです。
配列は、複数の値に順番を付けて 1 つの入れ物にまとめる仕組みです。角カッコの中に、値をカンマで区切って並べて作ります。
JavaScript
const works = ["プロフィールサイト", "自己紹介カード", "スキル一覧の表"];
const views = [120, 80, 45];
const empty = [];変数はたった 1 つになりました。作品が 100 個でも、入れ物は works のままです。empty のように中身が何も無い配列も作れます。これを空配列と呼び、これから値を足していくときの出発点になります。配列に入っている値のことは要素と呼びます。
番号は 1 ではなく 0 から始まる
配列から値を取り出すときは、変数名のうしろに角カッコを付けて番号を書きます。この番号をインデックスと呼びます。
JavaScript
console.log(works[0]); // => プロフィールサイト
console.log(works[2]); // => スキル一覧の表
console.log(works[3]); // => undefinedいちばん大事なのは、インデックスが 1 ではなく 0 から始まることです。1 番目の要素は works[0] です。頭では分かっていても指が works[1] と書いてしまうので、慣れるまでは表で確かめながら書いてください。
| インデックス | 値 | 呼びかた |
|---|---|---|
0 | "プロフィールサイト" | 1 番目の要素 |
1 | "自己紹介カード" | 2 番目の要素 |
2 | "スキル一覧の表" | 3 番目の要素 |
3 | undefined | 存在しない |
無い番号を触ってもエラーにならない
表の最後の行に注目してください。要素は 3 つしか無いので works[3] は存在しません。それでも JavaScript はエラーを出さず、undefined を返します。止まってくれないぶん、間違いに気付くのが遅れます。文字列とつないで「作品は undefined です」と表示されて、そこで初めて異変に気付く、というのがよくある流れです。取り出した値が undefined だったら、まずインデックスを疑ってください。
要素が何個あるかは length で分かります。要素が 3 つなら最後のインデックスは 2 なので、length - 1 が常に末尾を指します。
JavaScript
console.log(works.length); // => 3
console.log(works[works.length - 1]); // => スキル一覧の表works[2] と番号を直接書くと、作品が増えた瞬間に別の要素を指してしまいます。works.length - 1 と書いておけば、要素が何個でも必ず末尾です。
空配列に
works[works.length - 1]を書くとworks[-1]になり、undefinedが返ります。ここでもエラーにはなりません。空のときにどうするかは、自分でworks.length === 0を確かめて決める必要があります。
よくある間違い
- 末尾を取るのに
lengthをそのまま使う —works[works.length]は必ず存在しない番号なのでundefinedです。- 1を忘れないでください lengthにカッコを付ける —works.length()はTypeErrorになります。lengthは関数ではなく、配列が持っている値そのものです
要件
- 関数名は
lastWorkTitle、引数は配列works1 つ、戻り値は文字列 - 末尾の要素は
works[works.length - 1]で取り出すこと (works[2]のように番号を直接書かない) works.lengthが0のときは文字列"作品はありません"を返すこと
入出力例
lastWorkTitle([]) → "作品はありません"
lastWorkTitle(["プロフィールサイト"]) → "プロフィールサイト"
lastWorkTitle(["自己紹介カード","スキル一覧の表"]) → "スキル一覧の表"
lastWorkTitle(["プロフィールサイト","自己紹介カード","スキル一覧の表"]) → "スキル一覧の表"ヒント
