JavaScriptで大文字小文字を区別せずにindexOfメソッドを使う方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで大文字小文字を区別せずにindexOfメソッドを使う方法について解説しています。toLowerCaseメソッドで対象を小文字に変換することで、大文字小文字に関わらずindexOfメソッドによる検索を行うことができます。サンプルで動作を確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで大文字小文字を区別せずにindexOfメソッドを使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

大文字小文字を区別せずにindexOfメソッドを使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

indexOfメソッドとは

indexOfメソッドとは、文字列の中の指定した位置から検索し、指定した文字の最初の一文字の位置を返すメソッドです。

指定した文字が見つからなかった場合は、-1を返します。

 

indexOfメソッドの使い方

indexOfメソッドの構文は以下のようになります。

str.indexOf(searchValue[, fromIndex])
  • str : 検索対象の文字列
  • searchValue : 検索する値の文字列
  • fromIndex : searchValue でstrを検索する開始位置を設定

初期値は0です。指定した値が0未満の場合は0を、strの長さを超える場合はstr.lengthから開始します。

indexOfメソッドは大文字と小文字の検索は区別して行います。以下の2種類の文字列を検索した際に、片方は検索に失敗します。

var str1 = "hello world";

var str2 = "Hello World";



str1.indexOf('world');

// 6を返します。

str2.indexOf('world');

// -1 を返します。

 

Worldという文字を検索したい時に、もう一度indexOfを実行してもよいのですが、冗長気味ですし大文字小文字を区別せずに一度のindexOfで検索をしてしまいたいところです。

そんなときはtoLowerCaseメソッドを使用する方法があります。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

toLowerCaseとは

toLowerCaseメソッドは対象の文字列をすべて小文字にして返却するメソッドになります。

 

toLowerCaseの使い方

toLowerCaseの構文は以下のようになります。

str.toLowerCase()

 

strを小文字に変換したものを返却しますが、strに格納されている文字列そのものは影響を受けません。

 

実際に書いてみよう

var str = new String("Hello World");

var lowerstr = str.toLowerCase();

console.log(lowerstr.indexOf("World"))

// 6

 

まとめ

indexOfを使用する場面としては、ユーザーが入力した文字に対して、検索をかけることが比較的多いです。

検索する文字列はできるだけ調べやすい規格に直して検索することで可読性、コード短縮に繋がります。

toLowerCase() ,toUpperCase() などを使用して、効率の良い開発を心がけることが大切です。

 

監修してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。