50095


表題の件、CodePenに該当コードが公開されています。  
<https://codepen.io/gaearon/pen/NRZYGN?editors=0010>

React公式サイトの該当ページは下記になります。  
<https://reactjs.org/docs/lists-and-keys.html>

[code]

    function Blog(props) {
      const sidebar = (
        <ul>
          {props.posts.map((post) =>
            <li key={post.id}>
              {post.title}
            </li>
          )}
        </ul>
      );
      const content = props.posts.map((post) =>
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.content}</p>
        </div>
      );
      return (
        <div>
          {sidebar}
          <hr />
          {content}
        </div>
      );
    }
    
    const posts = [
      {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
      {id: 2, title: 'Installation', content: 'You can install React from npm.'}
    ];
    ReactDOM.render(
      <Blog posts={posts} />,
      document.getElementById('root')
    );
    
[/code]

`props.posts.map((post)...`となっていたり、`{post.title}`などとして`posts`の値を取得しているんですが、`posts`ではなく`post`なのはなぜなんでしょうか？あるいはこの`post`はどこから来ているんでしょうか？ちなみに`posts`と書き換えても同様に動いたのでますますわからず…。

以上ご教授いただけますと幸いです！どうぞよろしくお願いいたします…！


CC BY-SA 4.0
2018-11-08T09:57:15.003
50092
2019-12-14T21:12:41.527
2019-12-14T21:12:41.527
32986
18487
question
javascript reactjs
React公式サイト「MAIN CONCEPTS」内、「Lists and Keys」の例「Keys Must Only Be Unique Among Siblings」で「posts」ではなく「post」となっているのはなぜでしょうか。


# 簡単なお返事

`post` は引数で、 **新しく、名前付けした物** です。  
この引数には、 `map` 関数により `posts` の要素が１つずつ渡されます。

# 詳細なお返事

４行目の `props.posts.map` つまり `props.posts` に対する `map` 関数の呼び出しから来ています。  
`map` 関数は、そのリストの中身を、１つずつ処理して、別のリストに変えるための関数です。  
`map` 関数は引数として、別の関数を受け取ります。  
その別の関数には、要素を１つ分与えて処理をさせ、１つ分の要素を変えさせます。  
つまり変換を定義する関数になっています。

さてところで、JavaScriptでその場で関数を定義する方法が、大きく分けていくつかあります。  
１つは `function name(v1, v2, v3, ...){ ... }` という形式によるものです。これを関数式といいます。  
もう１つには `(v1, v2, v3, ...) => ...` という形式の物です。こちらの文法は **アロー関数** といいます

`v1`, `v2`, `v3` というのは、新しく作る関数の **引数** です。  
そのため **自由な名前をつけることができます**

元のコードをよく見てみると、 `props.posts.map( (post) => ... )` とあり  
`(post) => ...` の形式になっています。

つまりこの部分で新しく関数をつくっています。  
そしてその新しい関数は１つだけ引数 `post` を受け取り、処理を行う物です。

この関数には `map` 関数から１つずつ、 `posts` の要素が渡されるのですから、  
複数形ではなく単数形の `post` という名前でデータを受け取るように  
**この場で名前をつけた** というのが、結論となります。


CC BY-SA 4.0
2018-11-08T10:33:14.763
50095
2018-11-08T10:33:14.763
30827
50092
answer