3.1 文字列を配列に分割する

これまで文字列を理解するために相当な時間をかけてきましたので、文字列を配列に変換するsplit()メソッドについても自然に理解できるでしょう。

> "ant bat cat".split(" ");     // 文字列を分割（split）して3つの要素を持つ配列にする
[ 'ant', 'bat', 'cat' ]

上をNode.jsのREPLで実行すると、split()メソッドが返したものは、元の文字列の中にあるものをスペース区切りで分割して単語を取り出したものであることがわかります。

文字列をスペースで区切るのは非常によく行われる操作ですが、以下のように、スペース以外にもさまざまな区切り文字を指定できます。このような区切り文字はよくデリミタ（delimiter）と呼ばれます。

> "ant,bat,cat".split(",");        // "," で区切る
[ 'ant', 'bat', 'cat' ]
> "ant, bat, cat".split(", ");     // ", " で区切る
[ 'ant', 'bat', 'cat' ]
> "antheybatheycat".split("hey");  // "hey" で区切る
[ 'ant', 'bat', 'cat' ]

空文字""を区切りに使うと、以下のように文字列を1文字ずつの配列に分割します。

> "badger".split("")
[ 'b', 'a', 'd', 'g', 'e', 'r' ]

この基本的なテクニックは、この後5.3で繰り返し活用します（同時に、このテクニックには重大な制約があることも学びます）。

split()では「正規表現（regular expression）」も使えます（正規表現について詳しくは4.3で解説します）。

> "🌕の夜に𩸽食べたい".split("")
[
  '\ud83c', '\udf15',
  'の',     '夜',
  'に',     '\ud867',
  '\ude3d', '食',
  'べ',     'た',
  'い'
]

3.2 配列の要素にアクセスする

split()メソッドを使って文字列を配列にできることを学んだので、文字列と配列の関係についてもう少し詳しく学んでみることにしましょう。手始めに、以下のように「badger」という文字列をsplit()メソッドで1文字ずつに分割した配列を変数に代入してみましょう。

> let a = "badger".split("");

変数aに入っている配列の個別の要素にアクセスするには、角かっこ（bracket: ブラケット）[]記法が使えます（リスト 3.1）。配列の角かっこ記法は、多くのプログラミング言語で採用されています。

> a[0];
'b'
> a[1];
'a'
> a[2];
'd'

リスト 3.1でやっていることが少し見えてきましたか？a[0];と書くと、変数aにある配列の「0番目」の要素を返し、同様にa[1];と書けば1番目、a[2];と書けば3番目の要素が返されます。リスト 2.16でString#charAt()メソッドを使って学んだように、配列の要素の順序も「ゼロ始まり（ゼロオフセット）」になっているのです。つまり文字列の先頭の文字が0番目であったように、配列の先頭の要素も0番目になるというわけです。ゼロオフセットは、JavaScriptなど多くのプログラミング言語の基礎となっています。

なお、今メソッド名を文中でString#charAt()と書きましたが、これはcharAt()メソッドが「インスタンスメソッド（instance method）」であることを示しています。つまり、charAt()は「文字列インスタンス」に対して使えるメソッドなのです。

JavaScriptでは、以下のように角かっこ記法を文字列に「直接」書くこともできます。角かっこ記法が使えるのは配列だけではありません。

> "badger"[0];
'b'
> "badger"[1];
'a'

繰り返しますが、リスト 3.1で見たように、文字列も配列もゼロオフセット（zero-offset）になっています。配列の「最初の要素」を指す添字（index）は0、「2番目の要素」を指す添字は1...と進みます。ゼロオフセットは慣れるまでは戸惑いがちです。また、プログラマーが配列の最初の要素を「0番目」と呼ぶことも広く行われていますが、これも慣れるまで戸惑いがちです。

また、一部のプログラミング言語ではゼロオフセットではなく1から始まる数え方を採用していることもあるので、ゼロオフセットで数える言語とそうでない言語の間でデータをやりとりするときにしばしば混乱の元になります。

これまで配列に入れたのは文字だけでしたが、JavaScriptでは以下のようにあらゆるものを配列の要素にできます。以下のREPLは前章の続きなので、REPLを終了してしまった方はlet soliloquy = "To be, or not to be, that is the question:";を先に実行してください（今後は、特に断らない限りREPLはその前のREPLの続きから実行する前提です）。

> a = ["badger", 42, soliloquy.includes("To be")];
[ 'badger', 42, true ]
> a[2];
true
> a[3];
undefined

上の配列には文字列や数値やメソッドの実行結果が要素として同居していますが、角かっこ記法を用いれば通常の配列と同じように配列の要素にアクセスできます。ここまでは当然の結果ですね。

次に、a[3]のような配列に「ない」要素を指す添字を使うと、undefinedが返ります。このメッセージは以前console.log()のときにも出ましたね（図 2.3）。他のプログラミング言語の経験者ならこの動作に驚くかもしれません。多くの言語では、添字が配列の範囲から外れるとエラーが発生するようになっているからです。しかしJavaScriptは添字が範囲から外れることについて寛容なので、単にundefinedを返すだけで済ませています。undefinedはエラーではなく、「未定義です」と知らせているに過ぎません。

3.3 配列をスライスする

JavaScriptでは、3.2で学んだ角かっこ記法の他に、「配列のスライス（array slicing）」という手法もサポートしています。これを使うと、配列に入っている複数の要素に一度にアクセスできます。

3.4で「ソート（sort: 並べ替え）」を学ぶ準備として、以下の配列aにある数値の要素を再定義してみましょう。

> a = [42, 8, 17, 99];
[ 42, 8, 17, 99 ]

配列のスライスの最もシンプルな書き方は、slice()メソッドの引数に要素の添字を1個だけ書く方法です。たとえば、配列に4つの要素がある場合、slice(1)は以下のように配列の2番目以降の要素を配列の形で返します（ゼロオフセットをお忘れなく: インデックス0が最初の要素なので、添字1は配列の2番目の要素です）。

> a.slice(1);
[ 8, 17, 99 ]

なお、a.slice(1)を実行しても変数aの中身は変わらない点にご注意ください。単にaの中を覗いて、結果を配列で返しているだけです。スライス（薄切りにする）という言葉を使っているので変数aが変わりそうに思えるかもしれませんが、実際には変数aは改変されません。

以下のように、引数に添字をカンマ区切りで2つ書くと、要素の添字を範囲で指定してスライスすることもできます。a.slice(1, 3)は、配列の2番目〜4番目の要素を返すよう指定しているわけです。

> a.slice(1, 3);
[ 8, 17 ]

配列のスライスを活用すると、配列の「末尾の要素」だけを取り出すという、よくある操作がより簡単になります。

まずはスライスを使わない方法から紹介します。配列にも文字列と同じようにlengthプロパティがあります（配列の場合、lengthプロパティは要素の個数を表します）。これを使って以下のように書くと、配列の末尾にある要素を取り出せます。取り出した結果が角かっこ[]に囲まれていないことにご注意ください。つまりこの方法で末尾要素を取り出すと配列ではなく要素をそのまま返します。

> a.length;
4
> a[a.length-1];
99

しかし、たくさんの変数を使う大規模なプロジェクトでは変数名が長くなりがちです。変数名が長くなると、以下のように読みづらくなります。

> let aMuchLongerArrayName = a;
> aMuchLongerArrayName[aMuchLongerArrayName.length - 1];
99

そこで、次に紹介する「slice()の引数を負の数値にする」方法を使えば、以下のようにすっきり書けます。この-1は「末尾から1番目」を指します。

> aMuchLongerArrayName.slice(-1);
[ 99 ]

スライスを使わなかったときは末尾の要素がそのまま返されましたが、今度は配列に入れて返されている点にご注意ください。

結果が配列になっているので、これにさらに角かっこ記法[0]を追加すれば、以下のように要素だけを取り出せます（逆に言えば、スライスで取り出した末尾要素そのものが欲しい場合は、このように[0]を付ける必要があります）。

> aMuchLongerArrayName.slice(-1)[0];
99

このような配列の末尾要素を取り出す操作はよく行われますが、配列の末尾要素を「削除する」操作もよく使われます。これについては3.4.2で解説する予定です。

3.4 その他の配列操作メソッド

配列には、3.3で学んだslice()メソッド以外にもさまざまな便利メソッドがあります。こうしたメソッドについて詳しく知りたいときは、MDNドキュメントを最初に調べるのが定番です。

配列にも、文字列のときと同じようなincludes()メソッドがあります。これを使えば、ある要素が配列の中に含まれているかどうかを以下のように調べられます。

> a;
[ 42, 8, 17, 99 ]
> a.includes(42);       // 42という要素が含まれているかを調べる
true
> a.includes("foo");
false

> a.sort();
[ 17, 42, 8, 99 ]
> a;                    // `sort()`によって`a`の中身が書き換わる
[ 17, 42, 8, 99 ]

> a.reverse();
[ 99, 8, 42, 17 ]
> a;                // `reverse()`も`sort()`と同様に配列を改変する
[ 99, 8, 42, 17 ]

> a.push(6);        // 引数を配列の右端にpushし、新しいlengthを返す
5
> a;
[ 99, 8, 42, 17, 6 ]
> a.push("foo");
6
> a;
[ 99, 8, 42, 17, 6, 'foo' ]
> a.pop();          // `pop`は右端の値を返して削除する
'foo'
> a.pop();
6
> a;
[ 99, 8, 42, 17 ]

> let lastElement = a.pop();
> lastElement;
17
> a;
[ 99, 8, 42 ]
> let theAnswerToLifeTheUniverseAndEverything = a.pop();

> a = ["ant", "bat", "cat", 42];
[ 'ant', 'bat', 'cat', 42 ]
> a.join();                       // デフォルトのjoin（カンマ）
'ant,bat,cat,42'
> a.join(", ");                   // カンマとスペースによるjoin
'ant, bat, cat, 42'
> a.join(" -- ");                 // ダブルダッシュによるjoin
'ant -- bat -- cat -- 42'
> a.join("");                     // 空文字によるjoin
'antbatcat42'

3.5 配列のイテレーション

配列のイテレーション、つまり配列にある個別の要素に対して端から端まで1個ずつ処理を行う反復処理は、非常によく使われます。文字列のイテレーションについては既に2.6で学んでいるので、見当がつく方もいらっしゃるでしょう。実際に、配列のイテレーションは文字列の場合と事実上同じです。つまり、以前リスト 2.18で使ったforループを配列に対して使えばよいのです。

この後すぐにやってみますが、ここではまず、3.2で学んだ角かっこ記法をforループ内の本体の文字列で使って、後で配列に置き換えたときにわかりやすくしておきます。リスト 2.15のときのハムレットの独言がsoliloquy変数に保存されている前提で、イテレーションを行った結果をリスト 3.3に示します。

> for (let i = 0; i < soliloquy.length; i++) {
  console.log(soliloquy[i]);
}
T
o

b
e
.
.
.
t
i
o
n
:

上のリスト 3.3の結果は、リスト 2.18のときと完全に一致しています。

これを配列にも応用すれば、文字列と配列の関係が明確になるはずです。ここで必要なのは、soliloquy変数をaに置き換えることだけです（リスト 3.4）。それ以外に変更の必要な部分はありません（aには["ant", "bat", "cat", 42]が入っている前提です）。

> for (let i = 0; i < a.length; i++) {
    console.log(a[i]);
  }
ant
bat
cat
42

ここで気づいていただきたいのは、今実行した2つのforループのどちらにも添字変数iが共通で使われていることです。たしか2.2.2では「letで同じ変数を2回定義するとエラーになる」と学びましたね。letで添字変数iを2回も定義したのに、ここでエラーにならなかったのはどうしでしょう？

答えは「それぞれの変数のスコープが違っている」おかげです。変数にスコープがあることで、forループ内で定義した変数は、forループの中でしか使えないようになっているのです。forループ内で定義した変数は、ループが終了すると変数名も値も消えてしまいます。

イテレーションは便利ですが、既に申し上げたように、配列の場合もforループでイテレートするのは最善ではありません。Mike Vanier（図 3.1）も満足しないでしょう。forループよりも明確で優れているイテレーション方法については後に5.4で解説します。さらに、イテレーションそのものを回避する方法については第6章で学びます。

図 3.1: Mike Vanierは今もforループにご不満な様子です

> let a = ["ant", "bat", "cat", 42];
> let total = "";
> for (let i = 0; i < a.length; i++) {
    // totalに「totalの後ろに現在の要素を結合したもの」を代入する
  }