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 新版

1,639円(税込)

独習JavaScript 新版

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

2,376円(税込)

ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

JavaScript 第7版

5,060円(税込)

JavaScript 第7版

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

2,178円(税込)

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

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

1,188円(税込)

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

JavaScript コードレシピ集

3,114円(税込)

JavaScript コードレシピ集

indexOfの関連ページ

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

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

ひたち海浜公園
1位

ひたち海浜公園

茨城県屈指の観光スポットひたちなか海浜公園を一眼レフ「PENTAX Q7」撮った写真とともに紹介します。

クリック率改善
2位

クリック率改善

Googleアドセンスのクリック率の一番高い広告はモバイル全画面広告でした。 他にも効果の高い掲載位置などを解説

ウルトラブースト
3位

ウルトラブースト

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

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

MusicBeeのレイアウト変更方法

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

アドセンスの収益構造
5位

アドセンスの収益構造

Googleアドセンス広告の収益化を逆算して考えて、KPIを洗い出し、何をすれば良いかを設計しました。

ランダム表示バナー
6位

ランダム表示バナー

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

バトルロワイアル
7位

バトルロワイアル

「今日は皆さんにちょっと殺し合いをしてもらいます」で有名なマンガ原作のあの映画を見ました。どんな映画が良くわかってなかったのですが、思ってた以上に殺し合いをしている映画でした。

CSSで作る横スライド
8位

CSSで作る横スライド

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

PHP覚え方
9位

PHP覚え方

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

魔法少女まどか☆マギカ
10位

魔法少女まどか☆マギカ

魔法少女まどか☆マギカという名前が誤解を生みそうな素晴らしい作品があります。魔法少女という強烈なメタファーのせいで誤解をしていました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

JavaScript[完全]入門

2,653
(税込)