複数の値をまとめて管理するのに便利な配列は、いずれのプログラミング言語においてもよく活用されているデータ型となります。
配列は仕様上、膨大な数のデータが含まれていることが多々あります。
その中から必要な情報だけを抜き出したい場合に、目的に応じたメソッドを使用するのは必須の知識であると言えるでしょう。
今回は、JavaScriptの配列に対して使用可能な数あるメソッドの中から、特定の条件を満たす要素を検索したい場合に活用できる 「find」 メソッドについて解説をしていきたいと思います。
基本的な使い方や実際の使用例だけでなく、類似する機能を持つメソッドなども合わせて紹介していきますので、ぜひ参考にしてみてください。
JavaScriptのfindメソッドとは？
findメソッドは、Arrayオブジェクトのインスタンスメソッドのうちの１つです。
特定の条件を満たす要素が配列内に含まれる場合に、このメソッドを使用することで対象の値を取得することができます。
findメソッドの使い方
まずは、findメソッドの基本的な使い方から見ていきましょう。
基本構文
findメソッドを使用する際の基本構文は、以下のとおりです。
【基本構文】
対象配列.find(コールバック関数)引数に指定したコールバック関数内で、配列の各要素に対する処理を行います。
コールバック関数は真偽値を戻り値として返す必要があり、trueを返した場合には、該当のループで処理対象となった要素がメソッドの戻り値となります。
そのため、値を比較するための条件式を return 文で記述し、比較結果を戻り値とするのが一般的です。
【サンプルコード】
const result = sampleArray.find(function(num) {
return num > 3;
});アロー関数式を使用すると、より簡潔にコードを記述することができます。
【サンプルコード】
const result = sampleArray.find(num => num > 3);以下の簡単なサンプルコードを元に、実際の動きを見てみましょう。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.find(num => num > 2);
console.log(result);【実行結果】
3使用時の注意点として、上記の結果を見ると分かるように、findメソッドで取得できるのは一番最初に条件を満たした要素のみとなります。
指定条件に一致する全ての要素を取得できるわけではないので、使用の際は注意が必要です。
findメソッドのコールバック関数の引数の意味
findメソッドのコールバック関数には、以下の3つの引数を指定することができます。
- 第1引数 … 処理中の要素
- 第2引数 … インデックス
- 第3引数 … 処理中の配列
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.find((num, index, array) => {
console.log(`要素の値:${num}, インデックス:${index}, 配列:[${array}]`)
return num > 2;
});【実行結果】
要素の値:1, インデックス:0, 配列:[1,2,3,4,5]
要素の値:2, インデックス:1, 配列:[1,2,3,4,5]
要素の値:3, インデックス:2, 配列:[1,2,3,4,5]このように、処理対象とする要素のインデックスや操作元の配列も、必要に応じて取得可能です。
findメソッドのユースケース
findメソッドが実際に使われるのはどのようなケースなのでしょうか？
いくつかの例を紹介したいと思います。
オブジェクトの配列から特定のプロパティで検索する
findメソッドは、配列内のオブジェクトを検索する際に使われるケースが多いメソッドです。
オブジェクトに対してメソッドを使用する場合は、特定のプロパティを基準として条件の比較を行います。
以下の例で、実際の動きを見てみましょう。
【サンプルコード】
const sampleObj = [
{id: 1, name: '山田太郎'},
{id: 2, name: '伊藤舞子'},
{id: 3, name: '田中次郎'},
{id: 4, name: '鈴木明美'},
{id: 5, name: '佐藤悠太'},
];
const result = sampleObj.find(item => item.id === 3);
console.log(result);【実行結果】
{ id: 3, name: '田中次郎' }findメソッドを使用することにより、条件に一致するオブジェクトを戻り値として取得することができるため、必要なプロパティの情報を取り出しやすくなります。
JSONデータなどを扱う際に、以下の例のようにオブジェクトを要素に持つ配列が含まれるケースも多々あるため、検索方法の1つとして覚えておくと便利です。
【サンプルコード】
const sampleJson = {
schoolName: '都立南高等学校',
student: [
{id: 1, name: '山田太郎'},
{id: 2, name: '伊藤舞子'},
{id: 3, name: '田中次郎'},
{id: 4, name: '鈴木明美'},
{id: 5, name: '佐藤悠太'}
],
place: '東京都足立区美咲1-1-1'
};
const studentArray = sampleJson.student
const result = studentArray.find(item => item.id === 5);
console.log(result);【実行結果】
{ id: 5, name: '佐藤悠太' }入力値から特定の要素を検索する
ユーザーの入力した情報を元に、紐付いたデータを取り出したい場合も中にはあるかと思います。
findメソッドは、上記のようなケースにも対応可能です。
【サンプルコード・HTML】
<label>電話番号：<input type="text" id="telText"></label>
<input type="button" value="Check" id="checkBtn">【サンプルコード・JavaScript】
const sampleObj = [
{id: 1, name: '山田太郎', tel: '09077875423'},
{id: 2, name: '伊藤舞子', tel: '08056750034'},
{id: 3, name: '田中次郎', tel: '09062369975'},
{id: 4, name: '鈴木明美', tel: '09010879696'},
{id: 5, name: '佐藤悠太', tel: '08023975362'}
];
const text = document.getElementById('telText');
const checkBtn = document.getElementById('checkBtn');
checkBtn.addEventListener('click', () => {
const result = sampleObj.find(item => item.tel === text.value);
console.log(result);
});findに類似の機能を持つメソッド
JavaScriptの配列型には、findメソッドに似た動きをする既存メソッドが他にもいくつか存在します。
合わせて確認していきましょう。
filterメソッド
対象の配列から、特定の条件に一致する要素をまとめて取り出したい場合に活用できるのが、filterメソッドです。
使用する際の基本構文は、以下のように記述します。
【基本構文】
対象配列.filter(コールバック関数)メソッドの引数には、findメソッドと同様にコールバック関数を指定します。
findメソッドで取得できる要素が1つだけであったのに対し、filterメソッドの場合は、条件を満たす要素を全て含む新たな配列をメソッドの戻り値として取得することができます。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.filter(num => num > 2);
console.log(result);【実行結果】
[ 3, 4, 5 ]このように、条件に一致する全ての要素を取得できるのがfilterメソッドの特徴です。
メソッドを使い分ける際は、要素を全て取得する必要があるか否かで判断すると良いでしょう。
findIndexメソッド
条件を満たした要素の値ではなく、インデックスを取得したい場合に活用できるのが、findIndexです。
【基本構文】
対象配列.findIndex(コールバック関数)基本的な構文や動作は findメソッドとほとんど同じですが、findIndexメソッドの場合は、最初に条件に一致した要素のインデックスを戻り値として返します。
【サンプルコード】
const sampleArray = [10, 20, 30, 40, 50];
const result = sampleArray.findIndex(num => num > 30);
console.log(result);【実行結果】
3要素のインデックスを取得すること自体は findメソッドでも実現可能ですが、変数に代入するなどしたい場合に別途処理が必要となってしまいます。
取得したい内容に応じて、 findIndexメソッドと使い分けるようにすると良いでしょう。
someメソッド
someメソッドは、指定の条件に一致する要素が配列に含まれているかを確認する際に使用するメソッドです。
基本構文は以下のように記述します。
【基本構文】
対象配列.some(コールバック関数)引数にコールバック関数を指定する点や、関数内で条件を指定する点は findメソッドと同じですが、someメソッドの場合は戻り値が真偽値で返されます。
【サンプルコード】
const sampleArray = [1, 2, 3, 4, 5];
const result = sampleArray.some(num => num > 2);
console.log(result);【実行結果】
true条件を満たす要素が含まれているか否かだけを確認したい (値を取得する必要が無い) 場合に、someメソッドを使用することで処理の意図をより明確に示すことができます。
また、条件分岐の際に値の比較をする必要が無いため、状況に応じて findメソッドと使い分けるといいでしょう。
includesメソッド
includesメソッドは、特定の値が配列の要素に含まれているかどうかを確認する際に使用するメソッドです。
基本的な構文は、以下のように記述します。
【基本構文】
対象配列.includes(検索値, 検索開始位置)メソッドの第１引数には検索したい要素の値を、第２引数には任意で検索の開始位置 (インデックス) を指定します。
開始位置の指定が無い場合は０番目からの検索となり、マイナス値を指定した場合は末尾から遡って数えます。
指定した値が配列内に含まれている場合は true、無い場合は falseが戻り値として返されます。
【サンプルコード】
const sampleStr = "sampleCode";
// 部分一致でもOK
console.log(sampleStr.includes("sample"));
// 開始位置の指定で結果が変わる
console.log(sampleStr.includes("sample", 10));
// 大文字と小文字は区別される
console.log(sampleStr.includes("SAMPLE"));【実行結果】
true
false
false指定できる条件が限られる代わりに、findメソッドや someメソッドなどよりもコードをシンプルに記述することができるのが特徴です。
まとめ
今回は、JavaScriptの findメソッドを使う方法について解説しました。
JavaScriptの配列には様々なメソッドが用意されており、目的に応じたメソッドを使い分けることが、より効率の良いコードを記述するための重要なポイントとなります。
この記事で解説した内容を含め、今後の開発に活かせるよう、メソッドごとの特徴をしっかりと把握しておきましょう。
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
