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 フロントエンド開発の初級から中級へ進むために

2,376円(税込)

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

JavaScript 第7版

5,060円(税込)

JavaScript 第7版

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

2,178円(税込)

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

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

2,138円(税込)

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

JavaScript コードレシピ集

3,114円(税込)

JavaScript コードレシピ集

indexOfの関連ページ

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

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

車用スマホホルダー
1位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

SVG背景
2位

SVG背景

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

ノートPCスタンド
3位

ノートPCスタンド

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

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

MusicBeeのレイアウト変更方法

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

MusiceBee
5位

MusiceBee

PCで音楽の再生と管理をするならiTunseよりもMusicBeeがオススメです。軽くて早くて便利で使いやすい。

GA4カスタムイベント
6位

GA4カスタムイベント

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

アンカーリンクナビ
7位

アンカーリンクナビ

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

音楽再生
8位

音楽再生

パソコンに取り込んだ音楽をせっかくならCDコンポから再生したいと思ったことありませんか?AUXを使った外部接続の方法の紹介です。

PHPで作るカレンダー
9位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

CSSで作る横スライド
10位

CSSで作る横スライド

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

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

JavaScript[完全]入門

2,653
(税込)