愛って知ってますか？
……どうも、フロントエンドエンジニアのザワです。
最近では、胸キュン対象がネコかアルパカになっている私、人を愛する心はあるのかい？ と自分に問いかける毎日です。
さて、Arrayを知るシリーズ3回目ですが、今回のゲストはこちら。
Array.prototype.includes()メソッドです。
includeは「〜を含める」という意味です。英語の意味を把握すると、何をするメソッドなのか予想がつきますよね。きっとあなたが予想しているとおりです。
そう。配列の中に探し求めているものがあるの？ 教えて！ っていうメソッドです。
それでは例文を見ながら、そこに愛はあるのか、一緒に紐解いていきましょう。
※ ここからの説明は個人的に調べて解釈したざっくりとした内容になります。詳しく知りたい方はこちらへどうぞ
Array.prototype.includes()メソッドとは
冒頭でも触れたように、配列の中に探している対象が存在するかどうか、知りたいときに使うメソッドです。booleanで返ってくるのでtrue or falseでハッキリ物申してくれます。
第一引数に検索したい要素を指定します。第二引数は必須ではなく、オプションで検索対象の配列のどの位置から検索をはじめるか、インデックスを渡すことができます。
実装例
さっそく例を見てみましょう。
See the Pen Array.prototype.includes() sample1 by Zawa (@sowork) on CodePen.
上の例では、私が好きな筋肉の部位を配列に格納しました。
その中から特に好きな三角筋を検索してみます。
20代のころは大胸筋や上腕二頭筋、上腕三頭筋を大きくするのが好きでしたが、最近は三角筋が発達していると見入っちゃいますね。
結果はもちろん、trueが返ってきます。一方、大臀筋を検索するとfalseが返ってきます。
私が好きな筋肉リストに大臀筋はありませんから、当然です。大事な筋肉ですけどね、鍛えるの辛いんです。
文字列だけじゃなくて数値でも検索してみます。
See the Pen Array.prototype.includes() sample2 by Zawa (@sowork) on CodePen.
配列関連のメソッドなので、一見インデックスを渡しているように錯覚してしまいますが違います。
これは検索する要素を渡しており、今回の場合は数値の3、数値の4が配列の中に含まれているかを検索しています。
3を検索した結果は、true。4は配列の中に含まれていないので、falseが返ってきました。
変数名を当選番号としましたが、年末の宝くじに当たればいいですね。私の記事を見かけなくなったら南の楽園に行ったんだなと思ってください。
第二引数を使ってみる
オプションである第二引数も使ってみましょう。
JR武蔵野線の駅名を配列に格納しています。
See the Pen Array.prototype.includes() sample3 by Zawa (@sowork) on CodePen.
includesメソッドの第二引数は、配列のどこから検索するかを指定します。
一つ目の例では、0を第二引数に渡してますね。実は第二引数を指定していないとき、初期値は0が指定されています。配列の最初から検索しますよってことですね。minami-nagareyama（南流山）はインデックスが0の配列にあり、一致するのでtrueが返ってきます。
二つ目の例は、1を渡しています。配列のインデックスが1ということは、misato（三郷）から検索をはじめるということですね。minami-nagareyama（南流山）はインデックスが0の位置にあるのでfalseが返ってきます。
三つ目の例は、マイナスの値を渡しています。マイナスの値は、配列の長さから指定した値を引いたインデックスから検索を始めます。例でいうと、-2を渡してますから、配列の長さである3から2を引いた、1を第二引数に渡していることになります。ということは、misato（三郷）から検索すると、minami-nagareyama（南流山）は0の位置にあるので結果はfalseが返ってきます。
終わりに
いかがでしたか？ 含むのか含まないのか、今回はそんなお話でした。
私はといえば、自分の中に愛を含んでいるのか、結果はfalseでしたね。結局筋肉やら宝くじやら、残念ながら脳内は欲にまみれてそうです……。しかし！ これからもArrayを学びながら、真実の愛を探し求めていきたいと思っています。それでは良い制作ライフを！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
