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の関連ページ

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

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

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

カレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

カレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

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

POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

PHP覚え方

PHPを手っ取り早く覚えるには作りたいものを作ること

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

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

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

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

PHPを使って作るCMS
1位

PHPを使って作るCMS

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

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

MusicBeeのレイアウト変更方法

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

Bluetoothイヤホンの使い方
3位

Bluetoothイヤホンの使い方

Bluetoothイヤホンのペアリング方法やリモコンの操作方法、リダイヤルの防止策を画像入りで解説します。

カー用品
4位

カー用品

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

USBマグネットホルダー
5位

USBマグネットホルダー

USBケーブルが机の周りでぴろぴろとしているとそれだけでなんだか散らかっているような気になりませんか?

POST送信
6位

POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

MusiceBee
7位

MusiceBee

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

洗顔せっけんどろあわわ
8位

洗顔せっけんどろあわわ

長らくずっと使い続けている洗顔せっけんどろあわわを紹介します。 クリームみたいな泡で洗える美容成分の詰まった洗顔せっけん

CSSで作る横スライド
9位

CSSで作る横スライド

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

α7Ⅲ 夜桜撮影
10位

α7Ⅲ 夜桜撮影

α7Ⅲを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7Ⅲのレビューです。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

JavaScript[完全]入門

2,653
(税込)