質問: [ {id: 1, title: 'Hello World', content: 'Welcome to learning React!'}, {id: 2, title: 'Installation', content: 'You can install React from npm.'} ]; ReactDOM.render( , document.getElementById('root') ); ``` `props.posts.map((post)...`となっていたり、`{post.title}`などとして`posts`の値を取得しているんですが、`posts`ではなく`post`なのはなぜなんでしょうか?あるいはこの`post`はどこから来ているんでしょうか?ちなみに`posts`と書き換えても同様に動いたのでますますわからず...。 以上ご教授いただけますと幸いです!どうぞよろしくお願いいたします...!
回答: 簡単なお返事 ====== `post` は引数で、 **新しく、名前付けした物** です。 この引数には、 `map` 関数により `posts` の要素が1つずつ渡されます。 詳細なお返事 ====== 4行目の `props.posts.map` つまり `props.posts` に対する `map` 関数の呼び出しから来ています。 `map` 関数は、そのリストの中身を、1つずつ処理して、別のリストに変えるための関数です。 `map` 関数は引数として、別の関数を受け取ります。 その別の関数には、要素を1つ分与えて処理をさせ、1つ分の要素を変えさせます。 つまり変換を定義する関数になっています。 さてところで、JavaScriptでその場で関数を定義する方法が、大きく分けていくつかあります。 1つは `function name(v1, v2, v3, ...){ ... }` という形式によるものです。これを関数式といいます。 もう1つには `(v1, v2, v3, ...) => ...` という形式の物です。こちらの文法は **アロー関数** といいます `v1`, `v2`, `v3` というのは、新しく作る関数の **引数** です。 そのため **自由な名前をつけることができます** 元のコードをよく見てみると、 `props.posts.map( (post) => ... )` とあり `(post) => ...` の形式になっています。 つまりこの部分で新しく関数をつくっています。 そしてその新しい関数は1つだけ引数 `post` を受け取り、処理を行う物です。 この関数には `map` 関数から1つずつ、 `posts` の要素が渡されるのですから、 複数形ではなく単数形の `post` という名前でデータを受け取るように **この場で名前をつけた** というのが、結論となります。