JavaScriptにおけるインデックス完全ガイド ― 配列・文字列・検索メソッドの基礎から応用まで

イティセルです。読者の皆さんにわかりやすくお伝えしていきますね！

appleを選びたいから、0番を指定しよう

cherryを選びたいから、2番を指定しよう

１番目にあるbananaからorangeに更新しよう

例えば、次の配列には “apple”, “banana”, “cherry” の3つの要素があります。  
要素数は3つなので、最後の要素を取り出すには 3 – 1 = 2、つまり2番を指定します。

インデックスは 0から始まる ので、最初の文字は 0 を指定します。

文字列の最後の文字を取り出すには、length – 1 を指定します。  
“JavaScript” は 10文字なので、10 – 1 = 9＝9番目を指定すると “t” が取り出せます。

最初に出てくる “blue” は 1番 にあったね

最後に出てくる “blue” は 3番 にあったね

25より大きい数字は何番かな？

25より大きい数字は30で、結果は2番だね

forを使ってループさせてみよう

実行結果は 0 → 1 → 2 と順番に並んでいますね。
for ループは インデックスを一度ずつ進めていくだけで、0に戻って繰り返すわけではありません。

forEachを使ってループさせてみよう

forEach は配列の要素を順番に処理するメソッドです。  
for のコードと比べると、シンプルで読みやすいのが特徴です。  
ただし、forEach では break や continue が使えない点には注意しましょう。

まず、キーは “name”, “age”, “city”とします。
Object.keys() を使えばキーを配列として取り出し、インデックス的に扱うことができます。

keys[0] は “name” です。つまり「最初のキー」を取り出していますね。

次、
console.log(user[keys[0]]); の中で書かれている user は「オブジェクトの名前」です。  
keys[0] は “name” なので、user[keys[0]] は user[“name”] と同じ意味になります。  
つまり「キー “name” に対応する値を取り出す」ということになり、実行結果は “Taro” です。

わかりやすくすると
•  keys[0] は “name”
•  user[“name”] → “Taro”  
となり、結果は”Taro”になるわけです。

map.keys() だけでは配列にはなりません。  
スプレッド構文 … を使って […map.keys()] と書くことで、イテレーターを配列に変換できます。  
その結果 [1] でアクセスでき、実行結果は “name” になります。

もし配列に変換しなければ、インデックスアクセスはできないためエラーになります。

要するに、調べたいときに使えるコードです。  
indexOf() メソッドを使ってみましょう。

このコードでは、target に “Smartphone” を設定し、配列 products の中から探しています。
 
products.indexOf(target) は配列の中から “Smartphone” を探し、最初に見つかった位置（インデックス番号）を返します。

indexOf() は見つからなければ -1 を返す仕様なので、index !== -1 で「見つかったかどうか」を判定しています。  

 この例では “Smartphone” が2番目にあるため、実行結果は “Smartphone は 2 番目にあります” と表示されます。  
見つからなければ -1 になります。

push は配列の末尾に要素を追加します。  
例： [1, 2, 3] に 4 を追加すると → [1, 2, 3, 4]

pop は配列の末尾の要素を削除します。  
例： [1, 2, 3, 4] から末尾を削除すると → [1, 2, 3]

shift は配列の先頭の要素を削除します。  
例： [1, 2, 3] から先頭を削除すると → [2, 3]

unshift は配列の先頭に要素を追加します。  
例： [2, 3] の先頭に 0 を追加すると → [0, 2, 3]

開始位置：どのインデックスから処理を始めるか
削除する数：そこからいくつ削除するか
追加する要素：削除した場所に挿入する要素

1 → index1（つまり「2」の位置）から始める
2 → そこから2つ削除（「2」と「3」が消える）
99 → その場所に 99 を挿入

arr.splice(1, 2, 99) の動きを説明します。
まず、let arr = [1, 2, 3, 4, 5]; という配列があります。

•  インデックス1 は要素「2」の位置を指します。したがって処理の対象は「2, 3, 4, 5」であり、先頭の「1」は対象外です。
•  2 は「そこから2つ削除する」という意味なので、「2」と「3」が削除されます。
•  99 は削除した場所に挿入する要素です。つまり「2」と「3」を削除した位置に「99」が入ります。

その結果、配列は次のように変わります。

1 → index1（要素「20」）から始める
3 → index3（要素「40」）の直前までで止める
つまり、index1 と index2の要素だけがコピーされる → [20, 30]

わかりやすく言うと、slice(1, 3) は 20から始めて、40の直前で止まります。  
そのため対象になるのは「20」と「30」で、「40」は含まれません。  
よって実行結果は [20, 30] になります。

要するに、concat は配列と配列を組み合わせて新しい配列を返すメソッドです。
a は [1, 2]、b は [3, 4]
a.concat(b) によって a と b が結合され、新しい配列 c が作られる。
console.log(c) を実行すると [1, 2, 3, 4] が表示される。

…a は「配列 a の中身を展開する」という意味です。

[…a, …b] と書くと、一見すると配列を組み合わせているように見えますが、実際には a の要素の後に b の要素を並べているだけ です。つまり「a の隣に b を置く」イメージです。

fruits の配列には [“apple”, “banana”, “orange”] が入っています。  
console.log(fruits.includes(“banana”)); は、この配列の中に “banana” が含まれているかどうかを調べます。  
結果として “banana” は配列に含まれているので、true が返されます。

このコードは、fruits の中に “grape” が含まれているかどうかを調べます。  
しかし、fruits には “grape” が含まれていないため、結果は false になります。

つまり、1つでも条件を満たせば true、1つも満たさなければ false になります。  
n > 4 は「4より大きい数字があるかどうか」を調べています。  
numbers の中では 5 が 4 より大きいため、結果は true になります。

つまり、すべての要素が条件を満たせば true、1つでも満たさなければ false になります。  
n > 0 は「0より大きい数字かどうか」を調べています。  
numbers の中のすべての要素が 0 より大きいため、結果は true になります。

要するに、次のコードを見ると「2で割り切れる数字（偶数）」だけが抽出されているのがわかります。つまり、条件を満たす要素だけを取り出すということです。

nums には 1 から 5 までの数字が入っています。

nums.filter(n => n % 2 === 0);
このコードは、nums の中から「2で割ったときに余りが出ない数字」を抽出します。実行すると、条件を満たす数値は [2, 4] だとわかります。

ここで出てくる n は、配列の要素を一つずつ受け取る仮の変数名です。慣習的に number の略として n がよく使われますが、決まりはなく、num や value など自由に名前を変えることができます。
要するに、ここでの n は配列の要素を順番に受け取るための仮の名前です。  
このように仮の変数を使うことで、配列の要素を一つずつ処理するコードをシンプルに短く書けるように設計されています。
もし n のような仮の変数を使わなければ、同じ処理をするのにもっと長いコードを書かなくてはなりません。

nums に [1, 2, 3, 4] があるとします。  
reduce を使うと、すべての要素を合計して結果は 10 になります。

acc は「これまでの計算結果」
cur は「現在の要素」
初期値 0 から始めて、順番に足し合わせていく

acc と cur という名前は決まりではありません。自由に名前をつけられますが、慣習的にこの書き方がよく使われます。

簡単にいうと、
[1, 2, 3, 4] の場合、「1 を計算し終えたから次は 2」「2 を足したから次は 3」というように、acc に途中結果が入り、cur が [1, 2, 3, 4]を順番に処理されていきます。

最終的に acc が 10 になり、それが reduce の戻り値になります。

sort() は 要素を文字列に変換して、文字コード（辞書順）で比べるんです。

•  “10” → 先頭が “1”
•  “2” → 先頭が “2”
•  “30” → 先頭が “3”

この「先頭の文字」を比べるので、  
“1” → “2” → “3” の順番になり、結果が [10, 2, 30] になるんです。

(a, b) => a – b を渡したときの sort は、「小さい数から順番に並べる（昇順）」 という動きをします。

裏側では「a – b が負なら a が先、正なら b が先」というルールで比較してるんですが、実際に使うときは「小さい順に並ぶ」と覚えておけば十分です。

reverse を使うと、配列の要素を逆の順番に並べ替えます。

次のような users 配列があります。

users.find(u => u.id === 2); は、id が 2 の要素を探す という意味です。

users の中から 2 の要素が見つかったので、実行結果は { id: 2, name: “Hanako” } になります。

配列の中にさらに配列を入れることができます。これを 多次元配列 と呼びます。

さらに、二重のインデックスでアクセスできます。

matrix[1] → [3, 4]  
その [0] → 3

matrix[1] はインデックス 1 の要素なので [3, 4] です。  
さらにその [0] を指定すると、[3, 4] の先頭要素である 3 が取り出せます。  
したがって実行結果は 3 になります。

いや、インデックスの説明を長々と書いてますけど、優秀な人ってそんなに細かいこと覚えないんですよ。結局 indexOf() で“最初に見つかった位置を返す”、見つからなければ -1 になる。これだけ知ってれば実務で困らないんですよね。  
で、初心者が混乱するのは“0から始まる”ってところだけ。そこを一度理解すれば、配列も文字列も同じルールで扱えるんで、わざわざ刑務所の例えとか出さなくてもいいんですよね。  
優秀な人は、複雑な例え話や冗長な説明を使わずに、“シンプルで再利用できるルール”を押さえるんですよ。だから indexOf() を一行で理解して、必要なら findIndex や lastIndexOf に広げる。それが効率的なんですよ。  
つまり、優秀な人は“全部覚える”んじゃなくて、“使える最小限”を押さえて応用するんです。

まぁそうなんですよね。最初は indexOf() だけ覚えておけば十分で、慣れてきたら findIndex() とか lastIndexOf() とかに広げていけばいい。結局、優秀な人って“全部一気に覚える”んじゃなくて、“必要なときに必要なものを追加していく”んですよ。だから、そのステップアップの仕方は正しいと思いますよ。

ぜひ実際に手を動かして試してくださいね、頑張ってくださいね！