ホーム

転職ドラフト(次回1/19)

エンジニア向け
オススメ転職サイト1選


2021年
買ってよかったもの
ベスト3

Vue(Javascript)でfilterを使って配列から条件にあったデータだけ抽出する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

Vue(Javascript)で filter を使って配列から条件にあったデータだけ抽出する方法についてまとめました。

⇨ Vue 記事の目次はこちら

目次

  1. これからやること
  2. 結論(filter を使ってイケメンだけを抽出する)
  3. 解説

これからやること

人の名前とカテゴリーがある連想配列から、「イケメン」カテゴリーの人だけを取り出す関数を書きたいと思います。

Vue の Computed 算出プロパティを使う方法

結論(filter を使ってイケメンだけを抽出する)

コードから。

<template>
  <!-- 結果の表示をする -->
  <div>{{ afterFilter }}</div>
</template>
<script>
  export default {
    data() {
      return {
        //人の名前とカテゴリーの配列
        people: [
          {
            category: "ikemen",
            name: "佐藤健",
          },
          {
            category: "ikemen",
            name: "横浜流星",
          },
          {
            category: "ikemen",
            name: "小栗旬",
          },
          {
            category: "busu",
            name: "ore",
          },
          {
            category: "busu",
            name: "omae",
          },
        ],
      };
    },
    computed: {
      afterFilter() {
        //filterをする
        return this.people.filter((person) => person.category === "ikemen");
      },
    },
  };
</script>

このコードだと、表示はこうなります。

[ { "category": "ikemen", "name": "佐藤健" }, { "category": "ikemen", "name": "横浜流星" }, { "category": "ikemen", "name": "小栗旬" } ]

見事 ikemen だけが抽出されました。

解説

filter は配列にしか使えません

配列以外に使うと

Error in render: "TypeError: Cannot read properties of undefined (reading 'filter')"

このようにエラーが出て、画面何も映らなくなります。がビーン。

配列のデータを1個ずつにして、その中で if 文して return している

   afterFilter() {
     //1個ずつになったperson、personのcategoryがikemenかどうかを検証している
        const filterData = this.people.filter((person) =>
       person.category === "ikemen");
      },

これはつまり、

      afterFilter() {
        const filterData = this.people.filter((person) => {
          if (person.category === "ikemen") {
            return person;
          }
        });
        return filterData;
      },

とやっていることは同じです。

if で同じカテゴリーかどうかを検証して return していて、

if 文に該当して、return された person 全部が const filterData に入ります。

person の部分はなんでも良い

this.people.filter(x => x.category === 'ikemen')
this.people.filter(a => a.category === 'ikemen')

a でも x なんでも良いです。

プログラミング全般的によく書かれる返り値というやつです。

どうすれば理解が深まるか?

とりあえず filter の関数の中で console.log をしてみましょう。

      afterFilter() {
        const filterData = this.people.filter((person) => {
          console.log(person)//personが一個一個出力される
        });
        return filterData;
      },

person が一個一個が出力されましたか?

このように{}の中で自由にコードを書くことができます。

const filterData = this.people.filter((person) => {
  console.log(person); //personが一個一個出力される
  person.category = "ikemen"; //personのcategoryを全員ikemenに書き換える
  return person.category === "ikemen";
  //上の書き方は
  // if(person.category === 'ikemen'){
  //   return person
  // }
  //と同じ結果になる
});

出力結果

[ { "category": "ikemen", "name": "佐藤健" }, { "category": "ikemen", "name": "横浜流星" }, { "category": "ikemen", "name": "小栗旬" }, { "category": "ikemen", "name": "ore" }, { "category": "ikemen", "name": "omae" } ]

無事、全員 ikemen になりました!

感動の締めである!!

⇨Javascript(Vue.js)で文字列の最初の1文字目が特定の文字かどうかを判別する方法

まとめ

filter について書いてみました。

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは!