2021/04/27

Salesforce JavaScript Array findの用途と使う意味を解説

 
  

Salesforce JavaScript Array findについての説明

Salesforce JavaScript Array findは、テスト関数の配列の中の1番目の要素の値を返します。JavaScript Array findのfind()メソッドは文字通り指定の文字列を検索する際によく使用されるメソッドになります。 Arrayは配列を表しfindは見つけるといった意味になるので、配列検索によく用いられるメソッドになります。

JavaScript Array findの使い方

JavaScript Array findは、配列検索を行うメソッドであることを説明します。主にArray findは、Array.prottype.find()で使用される事が多い為Array findのみで検索するとあまり情報が出てきません。 find内に引数を設定し使用するパターンが多いです。

JavaScript Array findの仕様

Array findのfindメソッドは、引数に関数オブジェクトをひとつ受け取ります。その関数が最初に trueを返した際の要素を返します。 このメソッドの使用用途は、配列内の特定の文字列を検索する為に使われます。 検索後に条件分岐で分岐させたり、substringで指定の場所から文字列を切り取ったりすることも出来、そのほかにも用途は様々になります。

JavaScript Array findの用途

実際にfind()で探索してきた文字列をsubstringで文字列分割してみます。find()後の想定です。

var str = 'find';
console.log(str.substring(1, 3));
上記を実行すると「in」とコンソールで確認が出来ます。またfind()は、jQueryでも存在します。詳細については下記に記載します。

jQueryでのfind()メソッドの使い方

深い階層にある子要素を効率よく取り出すjQueryのメソッドが存在します。これを用いることで、より可読性の高いコードを書くことができます。 可読性が高いコードを書ければ、今後の保守を行うときに作業効率が上がりセキュリティ面の強化も期待できます。 子要素を効率よく取り出すとは、どういうことなのか説明します。

JavaScript find()メソッドの例

下記は、実際にjQueryで使用した例になります。実際の使用感は別に記載します。

$('#w').find('li').each( function( index, ele) {
    console.log( ele.textContent );
})
上記を実行すると
  • タグの子要素を一回で全て取得する事ができます。もしjQueryを使用しなければ、forループで子要素を取得するループが必要になります。

    Salesforce でのfindメソッドを使う意味

    Salesforceでfindメソッドを使用する際には、どこから文字列を取得するのかどこまでを表示させていいのかを考えなくてはいけません。 なぜかというと企業のコーポレートサイトによく用いられるSalesforceは、企業での重要データを含む場合が多々あります。 企業の機密情報を含んでいる場合は、取り扱いに気をつけなければ信用問題になる場合があります。 企業の機密情報はもちろん、取引先やプロジェクトデータ・開発データ・個人情報・客先情報など様々な他者に閲覧されると困るものがあります。 その中でfind()メソッドを使用し、取得する際に別の文字列を取得したり、取得する箇所を誤ると別の文字列を取得してしまう可能性があるので、注意が必要です。

    JavaScript Array findによく似たメソッド

    find()メソッドには、よく似たfindIndexといったメソッドがあります。findIndexは配列の中から何かを見つけるといった事ができます。 配列内の必要な文字列を取得し、判定しまた何か処理を行うといった事が可能になります。下記にコードを記載します。 Array.prototype.findIndex()は、配列内の指定されたテスト関数を満たす最初の要素の位置を返します。テスト関数を満たす要素がない場合を含め、それ以外の場合は-1を返します。 例)
    
    const ay = [5, 12, 8, 130, 44];
    const L = (element) => element > 13;
    console.log(ay.findIndex(L));
    
    上記を実行すると3が表示されます。 構文や返り値は、下記になります。 構文
    arr.findIndex(callback( element[, index[, array]] )[, thisArg])
    返り値 配列をした配列の位置を-1で返します。 findIndex()メソッドについて解説されているサイトがありますので、その一部を紹介します。下記の出典を参照してください。 findIndex()メソッドは、配列の最初の要素から最後まで該当する文字列を検索する事を繰り返します。 要素が見つかると、 見つけた要素を返します。 lengthで返すと格納されていた順番の数値を返します。配列のn番目に格納されていたら特定の処理を行うといった事が出来ます。 出典:Array.prototype.findIndex() – JavaScript | MDN – Mozilla 参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

    indexOf() メソッドについて

    indexOf()メソッドもfind()メソッドとよく似たメソッドになります。主な使い方は文字列検索を行う際に使用します。 プログラムを書いていると、ある文字が特定の文字列に含まれているか検索したい場面が多々あります。 その際にindexOf()メソッドを使用すると文字列の中の格納位置を数値で返してくれます。lengthとの相違点は、lengthはfind()メソッドで探してきた格納順番を返すのに対しindexOf()は単独で解決出来ます。 indexOfを使用する際の構文は、下記になります。使用方法は難しいものではありません。文字列の後部に.indexOf()と記載し使用します。
    文字列.indexOf( 検索したい文字[, 検索開始位置])
    検索位置は、省略可能となります。indexOf()は、JavaScriptだけでなく他言語でも使用する事が可能ですが、書き方は異なります。 文字列検索の具体的な使用方法を書きます。 構文の記載ミスで、エラーが発生する可能性や別の位置を検索する可能性があるので、記入後は記載ミスが無いか確認の必要があります。
    
        var str = 'シャム, ペル';
        var index = str.indexOf('ペル');
        console.log(index);
    
    上記を実行すると5が出力されます。理由は、文字列の開始位置が前から数えて5番目になるからです。

    Salesforce内での文字列検索

    Salesforce内でJavaScriptを使用し、文字列検索を行う際は上記で紹介したfind()・findindex()・indexOf()を使用するとやりやすいです。 企業のコーポレートサイトで、よく用いられるSalesforceでの文字列検索も企業の機密情報などが含まれるので注意は必要です。 上記とも非破壊的なメソッドですので、破壊的なメソッドよりかは扱いやすいです。 文字列検索を行う事で、substringなどで検索した文字列の切り取りやsubstringで切り取った文字列をconcatで結合する事ができます。そうする事により別の文字列を自由に作れます。 substringを使用する際は、切り取り位置を気にする必要がありますがconcatは結合だけになるので位置を気にする必要はありません。

    用途に合わせてJavaScript Array findを使おう

    Salesforce JavaScript Array findとfind()・findindex()・indexOfメソッドとjQueryについて説明しました。 文字列検索を行うメソッドは、substringなど文字列の切り取りを行うメソッドやcocatの文字列の結合を行うメソッドと相性が良いので、用途に合わせて使用してみましょう。
  • ]]>

    ITエンジニアへのキャリアチェンジならキャリアチェンジアカデミー

    この記事の監修者・著者

    株式会社オープンアップITエンジニア
    株式会社オープンアップITエンジニア
    未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
    ・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
    ・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞

    おすすめの動画

    • 【未経験からIT業界へ転職するなら】相談窓口とスキルの獲得はここで解決!IT転職が一気に有利に!【キャリアチェンジアカデミー】

    • 【費用一切不要】未経験からIT業界へ転職するならまずはここへ相談!【キャリアチェンジアカデミー】

    • 【何のエンジニアになれるのか?】未経験からITエンジニアを目指すとこんな道がある【キャリアチェンジアカデミー】