indexOfを使ってインデックス番号を取得する方法

indexOfを使ってインデックス番号を取得する方法

JavaScriptのIndexOfの使い方の復習

#188 indexOf

WEB制作

JavaScriptのindexOfをあんまりちゃんと理解しないまま使っていました。 つかえるパターンとNGのパターンがあり、なにが違うかを理解してなかったわけです。 原因はNodeListと配列の挙動の違いを理解していなかったためでした。

公開日:
最終更新日:

サイトマップサイトマップ

JavaScript indexOfの使い方

HTMLの要素の順番を取得する、と勝手に理解していたJavaScriptの「indexOf」。
実際は順番は返すんだけど、検索してその検索対象の要素の順番を返すメソッドだと知りました。

適当に覚えすぎていたので、使い方と構文を理解していきたいと思います。

indexOfはこんな時に使います

大体の使用目的はindexの番号を取得したいときに使います。

例えば、「ul」の中にある「li」の順番を取得したいときや、配列に入れた要素の順番を取得したいときなど。

その他、単純に文字検索をして、その検索対象の開始位置がどこにあるかなどにも使います。

使用例 クリックしたliのインデックス番号を返す

よく使うパターンとしてクリックした要素のindex番号を取得したい、というのがあります。
今回はそのサンプルを。

  1. 1番目の要素
  2. 2番目の要素
  3. 3番目の要素
  4. 4番目の要素

結果:リストをクリックすると番号を表示します

リストの番号は「1」から始まりますが、indexは「0」から始まります。

サンプルのHTMLとJavaScript

<ol id="sample_01">
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<li>4番目の要素</li>
</ol>
<p>結果:<span id="result_1">リストをクリックすると番号を表示します</span></p>

<script language="javascript">
//対象の要素を取得
let sample_01 = document.querySelectorAll("#sample_01 li");	

//対象の要素を配列化
let sample_array = [].slice.call(sample_01);

//for文で配列を回す
for (let i = 0; i < sample_01.length; i++){

	//クリック対象を取得
	sample_01[i].addEventListener('click', (e) => {
	
		//indexOfでインデックス番号を取得
		let get_index = sample_array.indexOf(sample_01[i]);
		
		//インデックス番号を返す要素を取得
		let set_text = document.getElementById("result_1");
		
		//インデックス番号を表示
		set_text.innerHTML = get_index;		
	});
}
</script>

liインデックス番号取得のコードの解説

クリックした「li」のインデックス番号を取得するコードの解説です。

対象の要素を取得 → 「li」を指定

//対象の要素を取得
let sample_ol = document.querySelectorAll("#sample_ol li");

インデックス番号を取得したい要素を取得します。

今回はリストのインデックスが欲しいので、「ol」の子要素の「li」を取得します。
liを指定しない場合、「ol」が1つしかないので、「0」しか返ってきません。

対象の要素を配列に変換する

//対象の要素を配列化
let sample_array = [].slice.call(sample_01);

リストとして取得するのであれば、配列化する必要はないのですが、indexOfで使用する場合、配列化する必要があります。

配列化したものと、してないものをコンソールログで確認してみます。

sample_01(配列化してない)のコンソールログの中身

NodeList(4) [li, li, li, li]
0: li
1: li
2: li
3: li
length: 4
[[Prototype]]: NodeList

sample_ol(配列化したもの)のコンソールログの中身

(4) [li, li, li, li]
0: li
1: li
2: li
3: li
length: 4
[[Prototype]]: Array(0)

パッ見はおんなじに見えるわけですが、Prototypeが「NodeList」と「Array(0)」とちゃんと別物になっているのがわかります。

配列とNodeListは別物
どっちもインデックス番号は持っている

lengthでfor文を回す

//for文で配列を回す
for (let i = 0; i < sample_01.length; i++){

sample_01.lengthと指定すると、要素の数だけ繰り返します。
ちなみに、「sample_array.length」でも同様に繰り返します。

ここのfor文は「li」タグの全てを対象にし、「li」の数だけ同じ処理をさせるため。

クリックイベントを仕込む

//クリック対象を取得
sample_01[i].addEventListener('click', (e) => {

sample_01は「li」が代入されています。
その「li」の[i](0~3)を指定し、クリックされた対象に対しての処理を書きます。

indexOfで番号を取得

//indexOfでインデックス番号を取得
let get_index = sample_array.indexOf(sample_01[i]);

ここでようやく「indexOf」の登場です。

indexOfは「配列」が対象の場合、検索対象が何番目にいるか、を返してくれます。

そのため、配列化した「sample_array」から、検索対象である「sample_01[i]」のインデックス番号が返ってきます。

ちなみに配列化してない、「sample_01」でindexOfを実行すると以下のエラーが返ってきます。

▼エラーメッセージ
Uncaught TypeError: sample_01.indexOf is not a function

NGパターン
配列にしないと取得できない

取得した番号を表示

//インデックス番号を返す要素を取得
let set_text = document.getElementById("result_1");

//インデックス番号を表示
set_text.innerHTML = get_index;

最後に、取得した番号を返す処理を記述して完了です。

解説の途中で気づいたこと。。 indexOfいらなくない?

自分で解説してて気づいたんですが、クリックしたliのインデックス番号が欲しいだけなら、indexOfいらなくないか?と。

「i」でクリックした順番取得してるはずなので、それを使えば問題ないのでは?
と思い検証したらやっぱりそれで問題ありませんでした。

まぁ、indexOfの解説記事なので、、使い方はあってるので良しと。。

indexOf使わない版

indexOfを使わないと、配列化も必要なくなりコードがかなりスッキリしました。

<script language="javascript">
let sample_01 = document.querySelectorAll("#sample_01 li");	
for (let i = 0; i < sample_01.length; i++){
	sample_01[i].addEventListener('click', (e) => {
		let set_text = document.getElementById("result_1");
		set_text.innerHTML = i;		
	});
}
</script>

そもそもインデックス番号の取得はindexOfを使う必要があるという、先入観が私の中にあったので、それを払拭できて良かったです。

JavaScript indexOfのまとめ

なんとなくで使っていたindexOfですが、今回の記事を作ることで仕様がよく理解できました。
なんで「ul」や「ol」で取得できなかったのかが理解できました!

勘違いの原因はNodeListと配列の違いを理解してなかったため。
理解してないというか違いを意識したことすらありませんでした。

NodeListで「length」は扱えるという仕様がわかりづらくしている感がありますね。
便利だから助かるんだけど。

これからは「NodeList」と「配列」を意識してコードを書けます。
自分の無知をさらけ出した記事でしたが、賢くなれたので非常に良い記事になりました。

WEBデザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

JavaScript[完全]入門

2,653円(税込)

JavaScript[完全]入門

独習JavaScript 新版

2,950円(税込)

独習JavaScript 新版

JavaScript 第7版

5,060円(税込)

JavaScript 第7版

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 「いちばんやさしい教本」シリーズ

1,210円(税込)

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 「いちばんやさしい教本」シリーズ

図解! JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編

1,188円(税込)

図解! JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編

JavaScript コードレシピ集

3,114円(税込)

JavaScript コードレシピ集

indexOfの関連ページ

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

MusicBeeのレイアウト変更方法
1位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

ウルトラブースト
3位

ウルトラブースト

一度はいたら手放せない! アディダスの「ウルトラブースト」搭載のハイテクシューズのレビューとオトクに購入する方法です

アンズテック
4位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

コンプライ
5位

コンプライ

評判と値段の高いコンプライのイヤーピースの購入後1週間レビュー!柔らかいウレタン素材のイヤーピースは装着前に指でつぶして耳穴に装着します。

NORDACE
6位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

WI-1000Xレビュー
7位

WI-1000Xレビュー

ソニーの2017年秋の新作ワイヤレスイヤホンWI-1000Xを購入して初めてノイズキャンセルを体験レビュー

ロジクール マウス
8位

ロジクール マウス

PCを操作するのに必要なマウス。高級品でも安いマウスでも操作をするという点においては大差はありません。違いがあるのは操作に対する満足感。

将棋を覚えなおす
9位

将棋を覚えなおす

将棋って面白いんですよ。弱ければいろいろと覚えることがあって、戦法を覚えることで強くなっていくことを実感できますし。

静岡家族旅行
10位

静岡家族旅行

静岡県には1年前に訪れたのですが、その時に行けなかった景勝地、観光名所があったので今回はそこを巡る旅にしました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

JavaScript[完全]入門

2,653
(税込)