質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

262閲覧

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

yoppy0066

総合スコア293

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/02/09 17:11

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

JavaScript

1return;

JavaScript

1return;

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

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

JavaScript

1return 21 + 2;

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

JavaScript

1return; 21 + 2;

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

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

JavaScript

1return ( 21 + 2 3);

となっている場合、

JavaScript

1return (; 21 + 2 3);

とも

JavaScript

1return; ( 21 + 2 3);

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

JavaScript

1return ( 1 + 2 );

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

JavaScript

1return 1 + 2;

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

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

JavaScript

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

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

JavaScript

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

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

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

投稿2018/02/09 22:14

編集2018/02/09 22:17
raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoppy0066

2018/02/10 04:17

ありがとうございます!
guest

0

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

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

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

js

1const hoge = () => { 2 return ( 3 'hoge' 4 ); 5}; 6hoge(); 7// => hoge 8 9const foo = () => ( 'foo' ); 10foo(); 11// => foo

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

js

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

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

投稿2018/02/09 18:05

orange-lion

総合スコア426

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoppy0066

2018/02/10 04:17

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問