Webコーダー・プログラマーの貝原(@touhicomu)です。今日はJavaScriptでよく使用されるreturn文について学習します。return文を使うと関数内で処理をした結果を「戻り値」として返すことができ、その値を使ってさらに別の処理を続けることが出来ます。この記事では「return」とその使い方から、「イベント処理の中断」や「returnの戻り値」などの応用的な使い方に関しても学習していきます。まとめ「return」とは?それでは、まず最初に「return」について基本的な知識を学んでいきましょう!「return」を使うと、関数内で処理をした結果を「戻り値」として返すことができます。これはどういうことかと言うと関数は「return」を使わずに処理を行ったらそのまま終了となります。「return」を使うことで処理を行った結果の値を返せるので、その値を使ってさらに別の処理を続けることが出来るわけです。IF文の条件式に再利用したり、別に用意された関数の引数へ当てはめるような活用方法も考えられます。false」にする手法などを学んでいきます。return文の書き方まずは「return」の基本的な書き方から見ていきましょう。】のようにreturnのあとに続けてさまざまな値や式などを記述します。次のサンプル例を見てください。値や式などを記述}「return」は関数内に記述するので、上記のように何らかの処理を行った結果を返すのが一般的です。returnが実行されるとそれ以降の処理は実行されずに中断するので注意が必要です!returnを使って値を返す方法それでは、実際に「return」を使ったサンプルを作ってみましょう。簡単な例として、指定した名前を組み合わせた文字列を返すようにしてみます。次のサンプル例を見てください。);実行結果こんにちは、太郎さんこの例では、指定した「名前」を組み合わせて文字列を作成し、その文字列をreturnで返しています。実行結果を見ると、組み合わされた文字列がしっかりと出力されているのが分かりますね。);実行結果undefinedこれは、先ほどのサンプル例から「return」の記述を排除したものです。当然ですが、returnが無ければ関数は処理を行うだけで終了するので戻り値は必ず「undefined」になるわけです。「undefined」についてはこちらの記事で詳しく解説しているのでぜひ確認してください。false」にするということです。先ほどの文字列を返すサンプルで「名前」が指定されていないと「undefined」になる仕組みを利用してみましょう。次のサンプル例を見てください。);実行結果falseこの例では、hello()を実行する際に名前が指定されていないのが分かります。この場合だとhello関数内の「name」はundefinedになるので、IF文の条件式に当てはめるとfalseの処理が実行されるわけです。false」と記述することで戻り値が「false」になるというわけです。false」になると、その後の処理で条件分岐が行いやすくなるので覚えておきましょう。イベント処理の中断についてここからは、「return」を使った処理の中断について学んでいきましょう。false」を実行することで中断できる手法について学んでいきます。ここで言う「イベント処理」というのは、ブラウザが標準で提供している処理のことでフォームやリンクなどが分かりやすいでしょう。これは自分でプログラミングしなくても、あらかじめブラウザ側で更新される処理が実行されるからなのです。これも同じように、ブラウザ側で画面遷移するように処理されるからです。false」とは、このようなブラウザ側で行う処理を中断するという意味で考えると分かりやすいでしょう。「aタグ」を利用したリンク先の画面遷移を中断させるには「onclick属性」を使います。次のサンプル例を見てください。これにより、リンクをクリックしても画面遷移の処理は中断されることになります。(クリックだけができる状態)続いて、フォーム送信時の「画面更新」ですが、この処理を中断させるには「onsubmit属性」を利用します。次のサンプル例を見てください。false」を実行しているのが分かります。これにより、送信ボタンをクリックしても画面は更新されることはありません。false」とよく似た機能を持っている別の手法として「void()」についても触れておきます。「void()」は、いかなる式においても必ず「undefined」を返すことができる演算子です。Date)」でも「void("Hello")」であっても、結果は必ずundefinedになるわけです。この仕組みを理解したところで、次のサンプル例を見てください。target="_blank">テストリンク</a>この例では、a要素を使ってリンクを作成しているのですが、href属性で「void()」を記述しているのが分かりますね。「javascript:」の部分は疑似プロトコルと言って、ブラウザのアドレスバーからJavaScriptを実行するためのものです。a要素のhref属性は一般的にURLを記述するわけですが、「javascript:void(0)」を記述することでundefinedを取得するわけです。a要素は「undefined」を取得するとイベント処理を中断する仕様なので、結果的にリンクをクリックしても何も起きないというわけです。returnの戻り値についてここからは、returnを使った「戻り値」についてさらに詳しく見ていきましょう。戻り値として返せる値には配列・オブジェクト・関数などがあるので、ぞれぞれ詳しく学んでいきます。】のように引数へ配列を指定すれば戻り値を配列にできるようになっています。そこで、簡単なサンプル例を見てみましょう。);実行結果[2,4,6,8,10,12,14,16,18,20]この例では、指定した数値の倍数を10個まで配列に格納する関数を作成しています。作成した配列を「return」で戻り値として返しているのが分かりますね。配列データを直接「return」で返しても良いですし、今回のように何らかの処理を行った配列を返すこともできるわけです。次に、複数の値を「return」で返す方法について見ていきましょう!この場合は返す値を「オブジェクト」形式にするのが最も簡単で効率が良いでしょう。次のサンプル例を見てください。obj;}この例では、関数の中で任意のオブジェクトを作成しているのが分かりますね。オブジェクトの中身は、関数を実行する際に指定した名前を受け取るのと、その名前を使ったテキストを出力するメソッドがあります。これらのオブジェクトをまとめて「return」することで、複数の値などが格納されたオブジェクト構造をそのまま返すことができるのです。すると、以下のように実行することが出来るわけです。);//オブジェクトのメソッドを実行するgetObj('花子').text();「getObj('太郎')」と記述すると、「太郎」という名前を受け取ったオブジェクトデータが返されることになります。「getObj('花子').text()」と記述すると、返されたオブジェクトデータの中にあるメソッド「text」を実行することができます。今度は、戻り値として「関数」を指定する方法を見ていきましょう!一般的に「return」で関数を返す場合は関数名を付与しない「無名関数」を使うことが多いです。次のサンプル例を見てください。);実行結果6この例では関数「sample」の中でreturnを使って無名関数を返しているのが分かります。注目すべきは、関数「sample()」を変数「result」に代入している点です!これを行うことで、returnによって返された無名関数が変数に格納されることになるのです。そのため、「result(3)」と記述すると無名関数の中身が実行されて2倍された値「6」が出力されるというわけです。false」でブラウザ側が標準で用意しているイベント処理を中断できる・returnで、配列・オブジェクト・関数などを返すことができる以上の内容を再確認し、ぜひ自分のプログラムに生かし学習を進めてください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。輝昌こんにちは!貝原(@touhicomu)と申します。現在は、Web業界のフリーランスとして、主にPHP/WordPress/BuddyPress/VPSサーバー構築などの業務を受注しています。現住所は、日本の西海岸、長崎県は波佐見町です。ボランティアでほたる撮影会やそば塾などのスタッフとして参加させて頂いています。以下の活動も行っています。