【JavaScript】includes()の正しい使い方を理解する

はじめに

業務でincludes()の使い方について勘違いしていたため、正しい使い方を整理し、記事にまとめました。特にincludes()を使う際の対象データ型（配列など）に関する理解を深めることができたので、同じように悩んでいる方の参考になれば幸いです。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

includesとは

includes() は Array インスタンスのメソッドで、特定の要素が配列に含まれているかどうかを true または false で返します。

includes()は特定の要素が配列に含まれているかどうかを確認できる便利なメソッドです。

例えば、次のように使用します。

const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape"));  // false

ただし、includes()は配列に対してのみ利用可能で、オブジェクトには直接使えません。この点を誤解していたため、今回はその解決方法についても共有します。

配列以外でのincludes()の使い方

私がやりたかったのは、react-hook-formのwatchメソッドを使って取得したオブジェクト内に特定の文字列が含まれているかを確認する処理です。

しかし、includes()はオブジェクトには直接使用できません。そのため、オブジェクトの値を配列に変換する必要があります。ここで便利なのが、Object.values()です。

Object.values()とincludes()を組み合わせる

Object.values()は、オブジェクトのすべての値を配列として取得するメソッドです。この配列に対してincludes()を使用することで、オブジェクト内の特定の値を確認することができます。

以下は実装例です。

App.tsx

import React from "react";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, watch } = useForm();
  const onSubmit = (data) => console.log(data);

  // フォームの値をリアルタイムで取得
  const formValues = watch();

  // オブジェクトの値を配列に変換
  const Textdata = Object.values(formValues);

  // 配列に特定の文字列が含まれているかをチェック
  if (Textdata.includes("おはよう")) {
    console.log("おはよう");
  }

  return (
    <>
      <div className="text-center mt-5">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div>
            <input type="checkbox" value="おはよう" {...register("example1")} />
          </div>
          <div>
            <input type="checkbox" value="こんにちは" {...register("example2")} />
          </div>
          <div>
            <input type="checkbox" value="こんばんは" {...register("example3")} />
          </div>
        </form>
      </div>
    </>
  );
}

export default App;

実行結果
上記のコードを実行すると、以下のように挙動します。

1. チェックボックスをクリックすると、watchでフォーム値をリアルタイムに取得。
2. Object.values()で取得した値を配列に変換。
3. 指定した文字列が配列に含まれている場合、console.log()で出力。
   この方法を使うことで、オブジェクト内の特定の値を動的に判定できます。

終わりに

includes()の使い方を振り返りました。Object.values()との組み合わせにより、柔軟にincludes()を活用できるようになりました。

もし同じような場面に遭遇した場合、この記事が参考になれば幸いです！

参考