JavaScript return(・・・)ってどういう意味でしょうか？

Question

class Hoge extends Component {
  render() {
    return (
      // JSX
    );
  }
}

Reactについてる記事を見ていると上記のようにreturn(・・・)という書き方をみなさんしているのですが、これはどのような構文なのでしょうか？returnというメソッドがあって、引数がjsxになるのでしょうか？

Answer 1

JavaScriptには自動セミコロン挿入(ECMAScriptの仕様書では11.9Automatic Semicolon Insertionに記載)というやっかいなルールがあります。

セミコロンを省略しない場合、return文は次の何れかです。

return;

return 式;

※ 式の部分には何かの式が入ります。例えば、aなど変数一つだったり、1 + 2といったものや、a.toString()など関数やメソッドなどの呼び出しだったり等です。
※ セミコロンの前やreturnと式の間には他の空白やコメントがあっても構いません。

最初のパターン、つまり、returnの後に空白やコメント以外に何もない場合は、関数を終了し、undefinedを返します。次のパターン、returnの後には一つだけ式を書くことができ、その場合は、その式を評価後、関数を終了し、式の評価値(結果)を返します。では、セミコロンを省略した場合はどうなるのでしょうか？

return
1 + 2;

これは自動セミコロン挿入によって次のように解釈されます。

return;
1 + 2;

もしかしたら、1 + 2の結果である3を返すという意味で書いたのかも知れませんが、JavaScriptではそのような解釈はしてくれません。自動セミコロン挿入によってセミコロンが付いてしまいます。これを防ぐにはreturnがその行で終わっていないこと、続きがあると言うことを明示しなければなりません。そこででてくるのが()で囲むと言うことです。

JavaScriptでは任意の式を()で囲むことでまとまった一つの式にできます。そうすることで、自動挿入セミコロン挿入を抑止できます。なぜなら、自動挿入セミコロンのルールでは、returnの直後(空白やコメントが間にあっても良い)、かつ、改行の直前にしか挿入されないからです。

return (
1 + 2
);

となっている場合、

return (;
1 + 2
);

とも

return; (
1 + 2
);

ともなりません。セミコロン挿入はされないままとなります。自動挿入セミコロンの動作を除けば、改行は空白と同じ扱いですので、

return ( 1 + 2 );

と同じと言うことです。()に式がある場合、その式の評価値がそのまま()の評価値になります。つまりは、

return 1 + 2;

と書いたのと同じになります。

さて、1 + 2は短いので初めから1行で書けば良いですが、もっと式が長い場合は大変です。ましてや、JSX表記(JSX表記のタグも一つの式です)では大きく複数行にわかれることが多々あります。。もし、()を使わない場合は次のように書く必要があるでしょう。

return <div>
  実際はいろいろなコンテンツがここに書かれ、複数行にわたる。
</div>;

<div>と</div>が対になるのですが、かなり歪で、読みにくいです。そこで()を使って、

return (
  <div>
    実際はいろいろなコンテンツがここに書かれ、複数行にわたる。
  </div>
);

と書くと、JSX部分にまとまりができて、読みやすくなります。読みやすいと言うことはプログラミングの作法において最も重要な要素の一つであり、だから、そのように()を付けて書く人が多いと言うことです。

なお、上記の通り()は式の一種であり、return文の一部ではありません。return()のような文法が独立して存在するわけではありません。

Comments

[yoppy0066]

ありがとうございます！

Answer 2

return文というのは元々式が受け取れるのです（関数と勘違いしやすいですが関数ではなく、文です）

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/return
https://ja.wikipedia.org/wiki/Return%E6%96%87

なので、returnは元々()で受け取れるのです

const hoge = () => {
  return (
    'hoge'
  );
};
hoge();
// => hoge

const foo = () => ( 'foo' );
foo();
// => foo

JavaScriptはsemicolonを必要とする言語です

(() => {
  console.log(1);
  return
  console.log(2);
})();

とした場合に実行されるのはreturnの行までです
これは構文エラーにならないです
なので、 return() としてどこまでのスコープなのかを明示的にしているのです

Comments

[yoppy0066]

ありがとうございます！