Yanonoblog!

こつこつと

React (JavaScript) - someメソッドの概要と具体的な活用例

背景

フロントのリファクタリングを行った際に軽く調べた内容を書き留めておきたいと思いました。

本記事では、配列操作に関する説明を簡単に解説していきます。

コードに関してはフェイクをいれてますので、ご了承ください。

Array.prototype.some()

概要

配列内の要素のうち、少なくとも1つの要素が指定された条件を満たすかどうかを判定するメソッドです。

構文
array.some(callback)
  • array: 条件を判定する配列
  • callback: 各要素に対して実行されるコールバック関数。要素ごとに呼び出され、条件を満たすかどうかを判定する。

戻り値

  • true: 条件を満たす要素が少なくとも1つ存在する場合
  • false: 条件を満たす要素が存在しない場合
簡単な例

２で割り切れる偶数が一つでも存在するならばtrueを返す例です。

const numbers = [1, 2, 3, 4, 5];

const hasEvenNumber = numbers.some((number) => number % 2 === 0);

console.log(hasEvenNumber); // true

some()メソッドのコールバック関数では、各要素を偶数判定しており、配列内に偶数の要素が存在するため、戻り値はtrueとなります。

実用例 - some

要件

紹介する例では「プランのコンテンツ内の項目が一つでも存在する場合にのみ、コンポーネントを表示する」

という要件を実現するためのコードです。

hasPlanContentsを定義 - /hooks/hoge/userPlan.ts

IDの配列を渡すと現在のユーザーが持つプランがダッシュボード用のプランコンテンツを持っているかどうかを判定する関数です。

const hasPlanContents = useMemo(
    () => (planContentIds: number[]) => {
      if (!currentUserPlan) return false;
      return currentUserPlan.planContents.some((planContent) =>
        planContentIds.includes(planContent.planContentId)
      );
    },
    [currentUserPlan]
  );
someの解説

currentUserPlan.planContentsは現在のユーザーが持つplanContentオブジェクトを指します。

someメソッドのコールバックではincludesを使用して関数の引数のID配列とユーザーが持つplanContentオブジェクト内のplanContentIdを含んでいるかを要素一つずつに対して真偽値を返されます。

someはincludesでtrueが返されればtrueを返します。

一致する要素が見つからなければ、全ての要素をチェックした後にfalseを返します。

つまり、sumeとincludesを併用することで配列と配列のマッチ判定ができます。

このように、someメソッドを使用することで配列の要素の中に特定の条件を満たす要素が存在するかどうかを効率的に判定することができます。

hasDashboardPlanContentsを定義 - /pages/home/Dashboard.tsx

ダッシュボード内でプランのコンテンツ内の項目が一つでも存在する場合にのみ、見出しのコンポーネントを表示します。

planContentIds変数には、特定のプランコンテンツのIDが配列として定義されています。constantsから固定項目のIDを呼び出しています。

該当のプランコンテンツIDをhasPlanContents関数に渡して呼び出して一つでも表示するプランがある場合はtrueが返るため、見出しコンポーネントが表示されるようになっています。

export const Dashboard = () => {
  const { hasPlanContents } = hogeHooks()

  const planContentIds: number[] = [
    planContent.A_PLAN_ID,
    planContent.B_PLAN_ID,
    planContent.C_PLAN_ID,
  ]

  const hasDashboardPlanContents = hasPlanContents(planContentIds)

  return (
    <Container title="">
      <Inner>
        <MainContents />
        {hasDashboardPlanContents && <HogeComponent />}
      </Inner>
    </Container>
  )
}

最後に、ContainerとInnerというコンポーネントを使って表示を構築しています。

hasDashboardPlanContentsがtrueの場合にのみ、HogeComponentが表示されます。

続く…

コメント

本記事の内容は以上になります！

書籍の続きのアウトプットも随時更新したいと思います。


プログラミングスクールのご紹介 (卒業生より)

お世話になったプログラミングスクールであるRUNTEQです♪

https://runteq.jp/r/ohtFwbjW

こちらのリンクを経由すると１万円引きになります。

RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。

もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。

https://twitter.com/outputky