質問: messages => ( messages.length > 0 && messages.map(message => ( )) ) ``` *上記はReactのコンポーネント内での関数定義です。 上記のコードでの関数定義において、**{}と()が使い分けられている理由**を教えて頂きたいです。 参考書を確認したところ、 > > アロー関数がオブジェクトリテラルを帰す場合、リテラル全体を括弧で括る必要がある > > > との記載を発見したのですが、これはオブジェクトが返されているため丸括弧にする必要があるのでしょうか? それとも、React特有の定義方法なのでしょうか。 また、上記に関しての参考ページ等ありましたら合わせてご教示頂けますと幸いです。 よろしくお願いいたします。
回答: まず、Arrow Functionの書き方には、大きく分けて2つがあります(MDN)。 * `(引数) => { 文 }`...`文`を実行する関数。返り値は`文`で`return`を使わなければ、デフォルトの`undefined`。 * `(引数) => 式`...`式`を返り値にする関数。 前者の`addListener`の方は、イベントハンドラでうっかり`false`を返してイベントがキャンセルになる、といったトラブルを防ぐために、値を返さない中括弧の形としています。 後者は、`(引数) => 式`の`式`自体が別なArrow FunctionだったりJSXだったりで長くなるため、丸かっこを入れて式を複数行に書いている、という構造です。