【 JavaScript 】リストに保管されたオブジェクトを効率よく検索する方法

こんにちは!C.Cです!

ここ最近は過去にAppleから公開拒否を受けた調剤監査システム「ヤクアシ」を

react-boilerplate + React Native でレセコンと連携できるように改良版を作成してることもあって

ブログがおろそかになってました…(ゲームとかの記事はUPしてましたが…)

プログラミング特化のブログか怪しくなっておりますが、

今回はしっかりとしたJavaScriptに関する記事です!!!

レセコン連携のできる調剤監査システム「ヤクアシ」は複雑な患者データと膨大な医薬品データを

効率よくかつなるべく読み返しやすいようにコードを書いていきたいのですが、

もうforEach()やmap()メソッドだけではループ処理の連続で

どうしても読みづらくなってしまうので、

よく使っているメソッドをブログにまとめておくことにいたしました!

スポンサーリンク

サンプルデータ

以下のデータを使います。

const data = [
  {
    drug: "アムロジン錠5mg", // 薬品名
    barcode: "14987116156582", // バーコード情報
    total: 100, // 一箱あたりに入ってる錠数
    price: 15.2, // 一錠あたりの値段(円)
  },
  {
    drug: "アムロジン錠5mg",
    barcode: "14987116156605",
    total: 500,
    price: 15.2,
  },
  {
    drug: "ベザトールSR錠200mg",
    barcode: "14987051668560",
    total: 1000,
    price: 15.2,
  },
  {
    drug: "ロキソニン錠60mg",
    barcode: "14987081105400",
    total: 100,
    price: 10.1,
  },
  {
    drug: "ムコダイン錠500mg",
    barcode: "14987060004816",
    total: 500,
    price: 10.1,
  },
];
スポンサーリンク

リスト内のオブジェクトの要素から条件に当てはまるものを検索する

array.filter()

検索条件に当てはまった全てのオブジェクトをリターンする

const result_filter1 = data.filter((d) => {
  return d.barcode === "14987116156605";
});
console.log(JSON.stringify(result_filter1, undefined, 2));
// [
//   {
//     "drug": "アムロジン錠5mg",
//     "barcode": "14987116156605",
//     "total": 500,
//     "price": 15.2
//   }
// ]

const result_filter2 = data.filter((d) => {
  return d.price === 15.2;
});
console.log(JSON.stringify(result_filter2, undefined, 2));
// [
//     {
//       "drug": "アムロジン錠5mg",
//       "barcode": "14987116156582",
//       "total": 100,
//       "price": 15.2
//     },
//     {
//       "drug": "アムロジン錠5mg",
//       "barcode": "14987116156605",
//       "total": 500,
//       "price": 15.2
//     },
//     {
//       "drug": "ベザトールSR錠200mg",
//       "barcode": "14987051668560",
//       "total": 1000,
//       "price": 15.2
//     }
//   ]

array.find()

検索条件に当てはまった一番最初のオブジェクトをリターンする

const result_find1 = data.find((d) => {
  return d.barcode === "14987116156605";
});
console.log(JSON.stringify(result_find1, undefined, 2));
// {
//   "drug": "アムロジン錠5mg",
//   "barcode": "14987116156605",
//   "total": 500,
//   "price": 15.2
// }

const result_find2 = data.find((d) => {
  return d.price === 15.2;
});
console.log(JSON.stringify(result_find2, undefined, 2));
// {
//   "drug": "アムロジン錠5mg",
//   "barcode": "14987116156582",
//   "total": 100,
//   "price": 15.2
// }

// 後ろから検索したいならreverse()を使う
const result_find3 = data.reverse().find((d) => {
  return d.price === 15.2;
});
console.log(JSON.stringify(result_find3, undefined, 2));
// {
//   "drug": "ベザトールSR錠200mg",
//   "barcode": "14987051668560",
//   "total": 1000,
//   "price": 15.2
// }

array.findIndex()

検索条件に当てはまった一番最初のオブジェクトの位置をリターンする

const result_findIndex1 = data.findIndex((d) => {
  return d.barcode === "14987116156605";
});
console.log(result_findIndex1);
// 1

const result_findIndex2 = data.findIndex((d) => {
  return d.total === 500;
});
console.log(result_findIndex2);
// 1

const result_findIndex3 = data.reverse().findIndex((d) => {
  return d.total === 500;
});
console.log(result_findIndex3);
// 0

array.some()

検索条件に当てはまるものがあればtrueをリターンする

const result_some1 = data.some((d) => {
  return d.barcode === "14987116156605";
});
console.log(result_some1);
// true

const result_some2 = data.some((d) => {
  return d.total === 500;
});
console.log(result_some2);
// true

const result_some3 = data.some((d) => {
  return d.total === 10000;
});
console.log(result_some3);
// false

array.every()

リスト内の全てのオブジェクトが検索条件に当てはまればtrueをリターンする

const result_every1 = data.every((d) => {
  return d.barcode === "14987116156605";
});
console.log(result_every1);
// false

const result_every2 = data.every((d) => {
  return typeof d.total === 100;
});
console.log(result_every2);
// false

const result_every3 = data.every((d) => {
  return typeof d.drug === "string";
});
console.log(result_every3);
// true
スポンサーリンク

指定したオブジェクトがリスト内にあるか検索する

いつ使うのかよくわからんかったので紹介

誰か教えて…

array.Includes()

指定したオブジェクトそのものが含まれていればtrueをリターンする

引数の参照元が違うと同じ内容のオブジェクトで検索をかけても結果が変わる…

const result_Includes1 = data.includes({
  drug: "アムロジン錠5mg",
  barcode: "14987116156605",
  total: 500,
  price: 15.2,
});
console.log(result_Includes1);
// false

const copy_data2 = { ...data[1] };
const result_Includes2 = data.includes(copy_data2);
console.log(result_Includes2);
// false

const result_Includes3 = data.includes(data[1]);
console.log(result_Includes3);
// true

const copy_data = [...data];
const result_Includes4 = data.includes(copy_data[1]);
console.log(result_Includes4);
// true

テスト用コード

試してみたい方は下記のindex.htmlとtest.jsを同じディレクトリに置いてindex.htmlを開き、

ディベロッパーツールで確認してみてください

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body>
    <h1>【JavaScript】リストに保管されたオブジェクトを効率よく検索する方法</h1>
    <script src="test.js"></script>
  </body>
</html>
const data = [
  {
    drug: "アムロジン錠5mg", // 薬品名
    barcode: "14987116156582", // バーコード情報
    total: 100, // 一箱あたりに入ってる錠数
    price: 15.2, // 一錠あたりの値段(円)
  },
  {
    drug: "アムロジン錠5mg",
    barcode: "14987116156605",
    total: 500,
    price: 15.2,
  },
  {
    drug: "ベザトールSR錠200mg",
    barcode: "14987051668560",
    total: 1000,
    price: 15.2,
  },
  {
    drug: "ロキソニン錠60mg",
    barcode: "14987081105400",
    total: 100,
    price: 10.1,
  },
  {
    drug: "ムコダイン錠500mg",
    barcode: "14987060004816",
    total: 500,
    price: 10.1,
  },
];

// array.filter()
const result_filter1 = data.filter((d) => {
  return d.barcode === "14987116156605";
});
console.log(JSON.stringify(result_filter1, undefined, 2));

const result_filter2 = data.filter((d) => {
  return d.price === 15.2;
});
console.log(JSON.stringify(result_filter2, undefined, 2));



// array.find()
const result_find1 = data.find((d) => {
  return d.barcode === "14987116156605";
});
console.log(JSON.stringify(result_find1, undefined, 2));

const result_find2 = data.find((d) => {
  return d.price === 15.2;
});
console.log(JSON.stringify(result_find2, undefined, 2));

const result_find3 = data.reverse().find((d) => {
  return d.price === 15.2;
});
console.log(JSON.stringify(result_find3, undefined, 2));



// array.findIndex()
const result_findIndex1 = data.findIndex((d) => {
  return d.barcode === "14987116156605";
});
console.log(result_findIndex1);

const result_findIndex2 = data.findIndex((d) => {
  return d.total === 500;
});
console.log(result_findIndex2);

const result_findIndex3 = data.reverse().findIndex((d) => {
  return d.total === 500;
});
console.log(result_findIndex3);



// array.some()
const result_some1 = data.some((d) => {
  return d.barcode === "14987116156605";
});
console.log(result_some1);

const result_some2 = data.some((d) => {
  return d.total === 500;
});
console.log(result_some2);

const result_some3 = data.some((d) => {
  return d.total === 10000;
});
console.log(result_some3);



// array.every()
const result_every1 = data.every((d) => {
  return d.barcode === "14987116156605";
});
console.log(result_every1);

const result_every2 = data.every((d) => {
  return typeof d.total === 100;
});
console.log(result_every2);

const result_every3 = data.every((d) => {
  return typeof d.drug === "string";
});
console.log(result_every3);



// array.Includes()
const result_Includes1 = data.includes({
  drug: "アムロジン錠5mg",
  barcode: "14987116156605",
  total: 500,
  price: 15.2,
});
console.log(result_Includes1);

const copy_data2 = { ...data[1] };
const result_Includes2 = data.includes(copy_data2);
console.log(result_Includes2);

const result_Includes3 = data.includes(data[1]);
console.log(result_Includes3);

const copy_data = [...data];
const result_Includes4 = data.includes(copy_data[1]);
console.log(result_Includes4);

参考サイト

Zenn JavaScriptでオブジェクトの配列から何かを探す時に使うメソッドをまとめてみた

Twitterでフォローしよう

おすすめの記事