JavaScript【JavaScript入門】配列の要素を検索する4つの方法!マサト2017/8/22019/4/28こんにちは、ライターのマサトです!今回は、配列の要素を検索する時に便利なメソッドをご紹介致します!JavaScriptにおける配列操作では、特定の要素だけを探し出して抽出するケースが少なくありません。普通にプログラムを組んでしまうと、無駄にコード量が多くなったり間違いも起きやすいので、見知らぬバグを作ってしまいがちです。そこで、この記事では配列を検索する基本メソッドという基本的な内容から、コールバック関数を使ってみるなど応用的な内容についても解説していきます。まとめ配列を検索する基本メソッドまずは、配列の要素を検索するうえで、最も基本となるメソッドから学習をしていきましょう!利用するメソッドはindexOfとlastIndexOfです。これは、文字列を検索する時にも利用できるもので、使い方もほとんど同じなので一石二鳥のメソッドとも言えるでしょう。使った検索方法!まず、最初にindexOfの使い方を学習しましょう!一般的な構文は次のとおりです。);配列データの中を検索する際に、検索対象となる要素の値を「indexOf」に指定すれば、その検索結果を返り値として取得することができます。返り値は、要素のインデックス番号となり、検索する際に開始位置を指定することも可能です。(開始位置を省略した場合は0と同じ扱い)それでは、実際の使用例を見てみましょう!次のサンプルコードを見てください。);出力結果は...2となります。このサンプルでは、「イチゴ」という要素が、配列itemsの中にあるかどうかを検索しています。「items」の中には、インデックス番号の2番目に「イチゴ」という値が存在しているため、結果として返り値「2」を取得しているわけです。);出力結果は...0となります。このサンプルでは、「イチゴ」という要素を検索しようとしていますが、配列「items」の中には2つ存在しているのが分かります。「indexOf」メソッドは0番目から順番に検索し、最初に合致した要素のインデックス番号しか返さないので、出力結果は「0」になっているわけです。このサンプルでは、最初に合致したインデックス番号に「+1」することで、その次のインデックス番号から検索を開始するようにしています。多くの配列を扱う場合には、while文などの繰り返し処理を使って、すべての重複要素を取得するのが良いでしょう。使った検索方法!今度は、「lastIndexOf」について学習していきましょう!これは、先ほど学習した「indexOf」とほとんど同じなので、すぐに理解出来るはずです。);「indexOf」と同じように、配列内の検索したい要素を指定することで、インデックス番号が「返り値」として取得することができます。);出力結果は...2となります。このサンプルでは、「イチゴ」という要素を検索していますが、配列内には2つ存在しているのが分かります。「indexOf」を使っていれば返り値は「0」になりますが、今回の「lastIndexOf」は末尾から順番に検索を始めるため、最初に合致する2番目の「イチゴ」を検出しているわけです。「lastIndexOf」も検索の開始位置を指定することが可能で、使い方も「indexOf」と同じになります。コールバック関数を使ってみる!ここからは、コールバック関数を使ったメソッドについて見ていきましょう!メソッド内で関数が扱えるため、より便利な検索処理を行えるのが特徴で、独自にループ処理を構築しなくても全要素にそれぞれアクセスできるので便利です。false」で取得できるのが特徴です。);コールバック関数内で、どんな検索をしたいかの処理を記述できるので、複雑な条件式による検索が可能になります。条件に合致する要素が1つでもあれば「true」を返すのが「some」の大きな特徴でしょう。);出力結果は...trueとなります。このサンプルでは、配列内に「イチゴ」が存在するかどうかを検索し、合致する要素が1つでもあれば「true」を返しているのが分かります。関数内に条件式を記述できるので、例えば数値データを格納した配列で検索すると便利でしょう。);出力結果は...trueとなります。200」と記述することで、200以上の数値があるかどうかをざっくりと検索できるのが分かります。400」と記述すれば、330以上400未満の数値があるかどうか?...という細かい条件で検索することも可能なわけです。使った検索方法!今度は、「every」メソッドを学習しましょう。これは「some」と使い方がほとんど同じですが、「every」は配列内の要素すべてに条件が合致しないと「true」を返してくれないという大きな特徴があります。false」を返り値として取得することができます。);出力結果は...trueとなります。このサンプルでは、コールバック関数内に「3よりも大きい数字」があるかを条件式として記述しています。配列「items」内には、すべて3よりも大きい数字の要素しかないので、結果として「true」を返り値として受け取っているわけです。ちなみに、今回は「検索」のみをテーマにしていますが、大抵の場合は検索した後に何らかの処理を実行するはずです。2019年5月23日まとめ今回は、配列の要素を効率よく「検索」できるメソッドについて学習しました!もう一度、ポイントをおさらいしておきましょう!indexOf検索対象の要素をインデックス番号で取得できる!lastIndexOf対象配列の末尾から検索してインデックス番号を取得する!someコールバック関数で指定した条件に1つでも合致する要素があるかを検索する!everyコールバック関数で指定した条件にすべて合致する要素があるかを検索する!これらの内容を踏まえて、ぜひ自分でも実際にコードを書いてどのような出力結果が表示されるかを確認してみましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。