回答編集履歴
3
追記
answer
CHANGED
|
@@ -56,6 +56,15 @@
|
|
|
56
56
|
|
|
57
57
|
はい。`a['type']` という書き方は、オブジェクトのプロパティにアクセスするためのもので、式を書ける場所ならどこにでも書くことができます。
|
|
58
58
|
|
|
59
|
+
```js
|
|
60
|
+
const obj = { type: 'keyword', searchValue: ['JavaScript', 'React.js'] };
|
|
61
|
+
console.log(obj['type']); // keyword と表示される
|
|
62
|
+
console.log(obj['type'] === 'keyword'); // true と表示される
|
|
63
|
+
if (obj['type'] === 'keyword') {
|
|
64
|
+
console.log('obj はキーワードです'); // 表示される
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
59
68
|
また、`a['type']` は実は `a.type` とも書くことができます。(というか、その方が普通ですね。)
|
|
60
69
|
'type' の部分にスペースや - などの記号が含まれていたり、'type' の部分を変数にしたい場合は、`a.param-type` や `a.変数` とは書けないので、`a['param-type']` や `a[変数]` と書くことになります。
|
|
61
70
|
逆に、`props.params` の代わりに `props['params']` と書くこともできます。
|
2
追記
answer
CHANGED
|
@@ -76,6 +76,8 @@
|
|
|
76
76
|
|
|
77
77
|
この `(a) => { return a['type'] === 'keyword'}` はアロー関数というもので、もっと短く `a => a.type === 'keyword'` と書くこともできます。
|
|
78
78
|
|
|
79
|
+
参考: [JavaScript アロー関数のサンプル | ITSakura](https://itsakura.com/js-arrow)
|
|
80
|
+
|
|
79
81
|
JavaScript の関数の書き方は 3 通りあって、基本的にどれも同じ結果になります。
|
|
80
82
|
(厳密には、アロー関数は this の扱いが異なりますが、ここでは結果に影響しないので…。)
|
|
81
83
|
|
1
追記
answer
CHANGED
|
@@ -46,4 +46,86 @@
|
|
|
46
46
|
],
|
|
47
47
|
<Chip key='chip-1' label=`keyword: Teratail' onDelete={props.onChipDelete('keyword', 'Teratail')} color="primary" />
|
|
48
48
|
]
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
> > 配列 props.params から条件 ['keyword'].includes(a['type']) に合うものを抜き出しています。
|
|
54
|
+
>
|
|
55
|
+
> ・こちらについてなのですが、`a['type’]`が渡された配列における”[]”内で渡されたkeyの値を表す。という書き方は、filter関数のみの書き方ではなく、それ以外でも同じ書き方をするのでしょうか？
|
|
56
|
+
|
|
57
|
+
はい。`a['type']` という書き方は、オブジェクトのプロパティにアクセスするためのもので、式を書ける場所ならどこにでも書くことができます。
|
|
58
|
+
|
|
59
|
+
また、`a['type']` は実は `a.type` とも書くことができます。(というか、その方が普通ですね。)
|
|
60
|
+
'type' の部分にスペースや - などの記号が含まれていたり、'type' の部分を変数にしたい場合は、`a.param-type` や `a.変数` とは書けないので、`a['param-type']` や `a[変数]` と書くことになります。
|
|
61
|
+
逆に、`props.params` の代わりに `props['params']` と書くこともできます。
|
|
62
|
+
|
|
63
|
+
参考: [【JavaScript】プロパティへのアクセス - Qiita](https://qiita.com/tomcky/items/0757348473873765432e)
|
|
64
|
+
|
|
65
|
+
> また、
|
|
66
|
+
> > props.params.filter((a) => { return (['keyword'].includes(a['type'])) })
|
|
67
|
+
>
|
|
68
|
+
> は
|
|
69
|
+
>
|
|
70
|
+
> > props.params.filter((a) => { return a['type'] === 'keyword'})
|
|
71
|
+
>
|
|
72
|
+
> という風にも書き換える事ができ、
|
|
73
|
+
> ・returnを含む括弧内がtrueとなる要素の配列を新たに作る、という理解であっていますでしょうか、、？
|
|
74
|
+
|
|
75
|
+
はい。`配列.filter(真偽値を返す関数)` と書くと、配列の各要素に対して真偽値を返す関数が呼び出され、true を返した要素だけを集めた新しい配列が作られます。
|
|
76
|
+
|
|
77
|
+
この `(a) => { return a['type'] === 'keyword'}` はアロー関数というもので、もっと短く `a => a.type === 'keyword'` と書くこともできます。
|
|
78
|
+
|
|
79
|
+
JavaScript の関数の書き方は 3 通りあって、基本的にどれも同じ結果になります。
|
|
80
|
+
(厳密には、アロー関数は this の扱いが異なりますが、ここでは結果に影響しないので…。)
|
|
81
|
+
|
|
82
|
+
1) function キーワードを使った名前付き関数
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
// 名前付き関数の定義は文なので、関数定義と、その使用は分けて書く必要がある。
|
|
86
|
+
function isKeyword(a) {
|
|
87
|
+
return a.type === 'keyword';
|
|
88
|
+
}
|
|
89
|
+
props.params.filter(isKeyword)
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
2) function キーワードを使って無名関数
|
|
93
|
+
|
|
94
|
+
```js
|
|
95
|
+
// 無名関数は式なので、関数定義と、その使用は分けて書くこともできるし、
|
|
96
|
+
const isKeyword = function (a) {
|
|
97
|
+
return a.type === 'keyword';
|
|
98
|
+
};
|
|
99
|
+
props.params.filter(isKeyword)
|
|
100
|
+
|
|
101
|
+
// または、次のようにまとめて書くこともできる。
|
|
102
|
+
props.params.filter(function (a) {
|
|
103
|
+
return a.type === 'keyword';
|
|
104
|
+
})
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
3) アロー関数
|
|
108
|
+
|
|
109
|
+
```js
|
|
110
|
+
// アロー関数も式なので、関数定義と、その使用は分けて書くこともできるし、
|
|
111
|
+
const isKeyword = (a) => {
|
|
112
|
+
return a.type === 'keyword';
|
|
113
|
+
};
|
|
114
|
+
props.params.filter(isKeyword)
|
|
115
|
+
|
|
116
|
+
// または、次のようにまとめて書くこともできる。
|
|
117
|
+
props.params.filter((a) => {
|
|
118
|
+
return a.type === 'keyword';
|
|
119
|
+
})
|
|
120
|
+
|
|
121
|
+
// さらに、return を省略することも可能。
|
|
122
|
+
props.params.filter(a => a.type === 'keyword')
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
また、どの方法で作った関数も、filter や map などに渡すだけでなく、普通に呼び出すことができます。
|
|
126
|
+
|
|
127
|
+
```js
|
|
128
|
+
const isKeyword = a => a.type === 'keyword';
|
|
129
|
+
const obj = { type: 'keyword', searchValue: ['JavaScript', 'React.js'] };
|
|
130
|
+
console.log(isKeyword(obj)); // true と表示される
|
|
49
131
|
```
|