Reactのprops.params.filter((a) =>という書き方について

Question

現在Reactを学習しているのですが、
自分で検索しても内容が理解できないコードがあります。

          props.params.filter((a) => { return (['keyword'].includes(a['type'])) }).map((hashValue, index) => {
            const value = hashValue['searchValue'];
            if (Array.isArray(value)) {
              return (
                value.map((subkey) => {
                  return (<Chip key={`chip-${index}-${subkey}`} label={`keyword: ${subkey}`} onDelete={props.onChipDelete('keyword', subkey)} color="primary" />)
                })
              )
            } else {
              return (<Chip key={`chip-${index}`} label={`keyword: ${value}`} onDelete={props.onChipDelete('keyword', value)} color="primary" />)
            }

質問させて頂く上で不足しているコードがあればお手数ですが、それもご指摘頂けると嬉しいです、、

こちらの、
props.params.filter((a) =>
以降のところなのですが、
filter((a) => でtrueとなる要素がある場合はその要素で新たな配列をつくる。
という機能があることは見つける事ができたのですが、

・props.params.filter((a) => { return (['keyword'].includes(a['type'])) })この（）の中がtrueになった場合という事なのか、、？
・a['type']という書き方はなにを表しているのか？

・props.paramsがどこから来ているのか、

・map((hashValue, index) => {以降でフィルターで絞ったリストに、indexで順番に番号をつけようとしているのかな、と思ったのですが、その認識があっている場合、それ以降ではなにをしようとしているのか。

このあたりについて教えて頂けるとなんとか自分で理解していけるレベルに近づく事ができるかな、と思いました。

よろしくお願い致します。

Answer 1

前提として、たぶん props.params はこんな配列で、

const params = [
  { type: 'keyword', searchValue: ['JavaScript', 'React.js'] },
  { type: 'keyword', searchValue: 'Teratail' },
  { type: 'unknown' },
];

こんな風に使われていると思います。

<MyComponent params={params} onChipDelete={(type, value) => (e) => { ... }}/>

(この MyComponent (名前は適当です) に渡された params と onChipDelete をそれぞれ props.params と props.onChipDelete として参照しています。)

まず、props.params.filter((a) => { return (['keyword'].includes(a['type'])) }) は、配列 props.params から条件 ['keyword'].includes(a['type']) に合うものを抜き出しています。
ここで、a は配列 props.params の各要素で、a['type'] はその type の値 (上記の例では 'keyword' や 'unknown') になります。これが配列 ['keyword'] に含まれているかを調べているので、結局 a['type'] === 'keyword' と同じ意味になります。
(調べたい値が複数ある場合、a['type'] === 'a' || a['type'] === 'b' || a['type'] === 'c' の代わりに ['a', 'b', 'c'].includes(a['type']) と書いたりしますが、値が一つの場合は分かりにくいだけのような…。)

つまり、filter の結果は以下の配列になります。

[
  { type: 'keyword', searchValue: ['JavaScript', 'React.js'] },
  { type: 'keyword', searchValue: 'Teratail' },
];

次に、map((hashValue, index) => { ... }) ですが、filter の結果の配列の各要素とその添え字に対して、(hashValue, index) => { ... } という無名関数を適用した結果を各要素とする配列を作ります。
filter の結果は 2 要素なので、この無名関数は 2 回呼ばれ、引数の値はそれぞれ以下のようになります。

• hashValue = { type: 'keyword', searchValue: ['JavaScript', 'React.js'] }, index = 0
• hashValue = { type: 'keyword', searchValue: 'Teratail' }, index = 1

(ちなみに、filter では (a) => ...、map では (hashValue, index) => ... としてますが、この a と hashValue には同じ値が入ります。また、index は省略可能で、filter では使わないので省略されてました。)

そして hashValue['searchValue'] は配列の各要素の searchValue の値 (つまり ['JavaScript', 'React.js'] や 'Teratail') で、これが配列かどうかで場合分けしていますので、最終的な値はこんな感じになります。

[
  [
    <Chip key='chip-0-JavaScript' label=`keyword: JavaScript' onDelete={props.onChipDelete('keyword', 'JavaScript')} color="primary" />,
    <Chip key='chip-0-React.js' label=`keyword: React.js' onDelete={props.onChipDelete('keyword', 'React.js')} color="primary" />
  ],
  <Chip key='chip-1' label=`keyword: Teratail' onDelete={props.onChipDelete('keyword', 'Teratail')} color="primary" />
]

---

配列 props.params から条件 ['keyword'].includes(a['type']) に合うものを抜き出しています。

・こちらについてなのですが、a['type’]が渡された配列における”[]”内で渡されたkeyの値を表す。という書き方は、filter関数のみの書き方ではなく、それ以外でも同じ書き方をするのでしょうか？

はい。a['type'] という書き方は、オブジェクトのプロパティにアクセスするためのもので、式を書ける場所ならどこにでも書くことができます。

const obj = { type: 'keyword', searchValue: ['JavaScript', 'React.js'] };
console.log(obj['type']); // keyword と表示される
console.log(obj['type'] === 'keyword'); // true と表示される
if (obj['type'] === 'keyword') {
  console.log('obj はキーワードです'); // 表示される
}

また、a['type'] は実は a.type とも書くことができます。(というか、その方が普通ですね。)
'type' の部分にスペースや - などの記号が含まれていたり、'type' の部分を変数にしたい場合は、a.param-type や a.変数 とは書けないので、a['param-type'] や a[変数] と書くことになります。
逆に、props.params の代わりに props['params'] と書くこともできます。

参考: 【JavaScript】プロパティへのアクセス - Qiita

また、

　props.params.filter((a) => { return (['keyword'].includes(a['type'])) })

は

　props.params.filter((a) => { return a['type'] === 'keyword'})

という風にも書き換える事ができ、
・returnを含む括弧内がtrueとなる要素の配列を新たに作る、という理解であっていますでしょうか、、？

はい。配列.filter(真偽値を返す関数) と書くと、配列の各要素に対して真偽値を返す関数が呼び出され、true を返した要素だけを集めた新しい配列が作られます。

この (a) => { return a['type'] === 'keyword'} はアロー関数というもので、もっと短く a => a.type === 'keyword' と書くこともできます。

参考: JavaScript アロー関数のサンプル | ITSakura

JavaScript の関数の書き方は 3 通りあって、基本的にどれも同じ結果になります。
(厳密には、アロー関数は this の扱いが異なりますが、ここでは結果に影響しないので…。)

1. function キーワードを使った名前付き関数

// 名前付き関数の定義は文なので、関数定義と、その使用は分けて書く必要がある。
function isKeyword(a) {
  return a.type === 'keyword';
}
props.params.filter(isKeyword)

1. function キーワードを使って無名関数

// 無名関数は式なので、関数定義と、その使用は分けて書くこともできるし、
const isKeyword = function (a) {
  return a.type === 'keyword';
};
props.params.filter(isKeyword)

// または、次のようにまとめて書くこともできる。
props.params.filter(function (a) {
  return a.type === 'keyword';
})

1. アロー関数

// アロー関数も式なので、関数定義と、その使用は分けて書くこともできるし、
const isKeyword = (a) => {
  return a.type === 'keyword';
};
props.params.filter(isKeyword)

// または、次のようにまとめて書くこともできる。
props.params.filter((a) => {
  return a.type === 'keyword';
})

// さらに、return を省略することも可能。
props.params.filter(a => a.type === 'keyword')

また、どの方法で作った関数も、filter や map などに渡すだけでなく、普通に呼び出すことができます。

const isKeyword = a => a.type === 'keyword';
const obj = { type: 'keyword', searchValue: ['JavaScript', 'React.js'] };
console.log(isKeyword(obj)); // true と表示される

Comments

[mika2002]

ありがとうございます！
すごく丁寧に教えて頂き、嬉しいです。

全くわからない所からかなり理解する事ができたのですが、
少し気になるところがあるので、追加で質問させて下さい、、

> 配列 props.params から条件 ['keyword'].includes(a['type']) に合うものを抜き出しています。

・こちらについてなのですが、`a['type’]`が渡された配列における”[]”内で渡されたkeyの値を表す。という書き方は、filter関数のみの書き方ではなく、それ以外でも同じ書き方をするのでしょうか？

また、
>　props.params.filter((a) => { return (['keyword'].includes(a['type'])) })

は

>　props.params.filter((a) => { return a['type'] === 'keyword'})

という風にも書き換える事ができ、
・returnを含む括弧内がtrueとなる要素の配列を新たに作る、という理解であっていますでしょうか、、？

申し訳ないのですが、お時間のあるときに教えて頂けると大変嬉しいです。。
よろしくお願い致します。

[mika2002]

もう、本当にありがとうございます、、
質問させて頂いた事が完璧に理解できました！！

これでまた先に進めます。

優しく、わかりやすいご説明感謝します。
頑張って、私もhoshiさんのように人に教える事ができるようになります！