0

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

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

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')
);

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

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

1 件の回答 1

2

簡単なお返事

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 という名前でデータを受け取るように
この場で名前をつけた というのが、結論となります。

1
  • なるほど…!!!非常にわかりやすく丁寧にご回答くださりありがとうございます!理解いたしました!たすかりましたー! Commented 2018年11月8日 10:45

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。