こんにちは！ Webコーダー・プログラマーの貝原（@touhicomu）です。
今日はJavaScriptでよく使用されるreturn文について学習します。return文を使うと関数内で処理をした結果を「戻り値」として返すことができ、その値を使ってさらに別の処理を続けることが出来ます。
この記事では「return」とその使い方から、「イベント処理の中断」や「returnの戻り値」などの応用的な使い方に関しても学習していきます。このページで、return文をよく把握して自分のスキルとしていきましょう！
「return」とは？
それでは、まず最初に「return」について基本的な知識を学んでいきましょう！
「return」を使うと、関数内で処理をした結果を「戻り値」として返すことができます。これはどういうことかと言うと関数は「return」を使わずに処理を行ったらそのまま終了となります。
しかし「return」を使うことで処理を行った結果の値を返せるので、その値を使ってさらに別の処理を続けることが出来るわけです。例えば、IF文の条件式に再利用したり、別に用意された関数の引数へ当てはめるような活用方法も考えられます。
「return」を使いこなすとJavaScriptプログラミングが飛躍的に効率化できるので、本記事でしっかりと学習していきましょう！
returnの使い方
ここからは、実際に「return」を使ったプログラミング手法を見ていきましょう！ 基本となる書き方から具体的に「値」を返す方法や戻り値を「true / false」にする手法などを学んでいきます。
return文の書き方
まずは「return」の基本的な書き方から見ていきましょう。「return」は一般的に、【 return 値・式・関数など 】のようにreturnのあとに続けてさまざまな値や式などを記述します。次のサンプル例を見てください。
function sample() {
//何らかの処理を行う
return 値や式などを記述
}
「return」は関数内に記述するので、上記のように何らかの処理を行った結果を返すのが一般的です。ただし、returnが実行されるとそれ以降の処理は実行されずに中断するので注意が必要です！
returnを使って値を返す方法
それでは、実際に「return」を使ったサンプルを作ってみましょう。簡単な例として、指定した名前を組み合わせた文字列を返すようにしてみます。
次のサンプル例を見てください。
function hello(name) {
return 'こんにちは、' + name + 'さん';
}
console.log( hello('太郎') );
実行結果
こんにちは、太郎さん
この例では、指定した「名前」を組み合わせて文字列を作成し、その文字列をreturnで返しています。実行結果を見ると、組み合わされた文字列がしっかりと出力されているのが分かりますね。
ちなみに「return」を使わなかったらどうなるのかも見ておきましょう！
function hello(name) {
'こんにちは、' + name + 'さん';
}
console.log( hello('太郎') );
実行結果
undefined
これは、先ほどのサンプル例から「return」の記述を排除したものです。当然ですが、returnが無ければ関数は処理を行うだけで終了するので戻り値は必ず「undefined」になるわけです。
「undefined」についてはこちらの記事で詳しく解説しているのでぜひ確認してください。
returnでtrue / falseを返す方法
今度は、returnの戻り値を「true / false」で返す手法について見ていきましょう！ といっても基本的な使い方はこれまで通りで、返す値を「true / false」にするということです。
例えば、先ほどの文字列を返すサンプルで「名前」が指定されていないと「undefined」になる仕組みを利用してみましょう。次のサンプル例を見てください。
function hello( name ) {
var result = 'こんにちは、' + name + 'さん';
//「name」が指定されていないとundefinedになる
if( name ) {
return true;
}
else {
return false;
}
}
//名前を指定せずに実行
console.log( hello() );
実行結果
false
この例では、hello()を実行する際に名前が指定されていないのが分かります。この場合だとhello関数内の「name」はundefinedになるので、IF文の条件式に当てはめるとfalseの処理が実行されるわけです。
あとは、「return false」と記述することで戻り値が「false」になるというわけです。戻り値が「true / false」になると、その後の処理で条件分岐が行いやすくなるので覚えておきましょう。
イベント処理の中断について
ここからは、「return」を使った処理の中断について学んでいきましょう。主に、イベント処理に対して「return false」を実行することで中断できる手法について学んでいきます。
「return false」とは何か？
まずはイベント処理を中断できる「return false」の意味を知ることから始めましょう！ ここで言う「イベント処理」というのは、ブラウザが標準で提供している処理のことでフォームやリンクなどが分かりやすいでしょう。
例えば、フォームを送信すると自動的に画面が更新されますよね？ これは自分でプログラミングしなくても、あらかじめブラウザ側で更新される処理が実行されるからなのです。
また、リンクをクリックすると自動的にリンク先へ画面が遷移されますね？ これも同じように、ブラウザ側で画面遷移するように処理されるからです。
「return false」とは、このようなブラウザ側で行う処理を中断するという意味で考えると分かりやすいでしょう。
onclick / onsubmitイベントを中断する方法
それでは、実際にリンク先への「画面遷移」やフォーム送信時の「画面更新」などのイベント処理を中断させてみましょう！ まず「aタグ」を利用したリンク先の画面遷移を中断させるには「onclick属性」を使います。
次のサンプル例を見てください。
<a href="https://www.sejuku.net/blog/" target="_blank" onclick="return false">リンク</a>
onclick属性に「return false」と記述しているのが分かりますね？ これにより、リンクをクリックしても画面遷移の処理は中断されることになります。（クリックだけができる状態）
続いて、フォーム送信時の「画面更新」ですが、この処理を中断させるには「onsubmit属性」を利用します。次のサンプル例を見てください。
<form onsubmit="return false">
<input type="text">
<input type="submit" value="送信">
</form>
この例では、formタグ内に「onsubmit属性」を付与して「return false」を実行しているのが分かります。これにより、送信ボタンをクリックしても画面は更新されることはありません。
「void(0)」でイベント処理を中断する方法
ここで「return false」とよく似た機能を持っている別の手法として「void()」についても触れておきます。「void()」は、いかなる式においても必ず「undefined」を返すことができる演算子です。
つまり「void(100)」でも「void(new Date)」でも「void(“Hello”)」であっても、結果は必ずundefinedになるわけです。この仕組みを理解したところで、次のサンプル例を見てください。
<a href="javascript:void(0)" target="_blank">テストリンク</a>
この例では、a要素を使ってリンクを作成しているのですが、href属性で「void()」を記述しているのが分かりますね。「javascript:」の部分は疑似プロトコルと言って、ブラウザのアドレスバーからJavaScriptを実行するためのものです。
a要素のhref属性は一般的にURLを記述するわけですが、「javascript:void(0)」を記述することでundefinedを取得するわけです。a要素は「undefined」を取得するとイベント処理を中断する仕様なので、結果的にリンクをクリックしても何も起きないというわけです。
returnの戻り値について
ここからは、returnを使った「戻り値」についてさらに詳しく見ていきましょう。戻り値として返せる値には配列・オブジェクト・関数などがあるので、ぞれぞれ詳しく学んでいきます。
「配列」を戻り値として利用する方法
まずは、「配列」を戻り値として使う方法から見ていきましょう！ 一般的には【 return [ 配列データ ] 】のように引数へ配列を指定すれば戻り値を配列にできるようになっています。
そこで、簡単なサンプル例を見てみましょう。
function getArray( num ) {
var results = [];
for(var i=1; i<11; i++) {
results.push( i * num );
}
return results;
}
console.log( getArray(2) );
実行結果
[2,4,6,8,10,12,14,16,18,20]
この例では、指定した数値の倍数を10個まで配列に格納する関数を作成しています。そして、作成した配列を「return」で戻り値として返しているのが分かりますね。
配列データを直接「return」で返しても良いですし、今回のように何らかの処理を行った配列を返すこともできるわけです。
「複数の値」を戻り値として利用する方法
次に、複数の値を「return」で返す方法について見ていきましょう！この場合は返す値を「オブジェクト」形式にするのが最も簡単で効率が良いでしょう。例えば、次のサンプル例を見てください。
function getObj(name) {
var obj = {
name: name,
text:function() {
console.log('どうも,' + name + 'さん');
}
}
return obj;
}
この例では、関数の中で任意のオブジェクトを作成しているのが分かりますね。オブジェクトの中身は、関数を実行する際に指定した名前を受け取るのと、その名前を使ったテキストを出力するメソッドがあります。
これらのオブジェクトをまとめて「return」することで、複数の値などが格納されたオブジェクト構造をそのまま返すことができるのです。すると、以下のように実行することが出来るわけです。
//オブジェクトのデータを出力する
console.log( getObj('太郎') );
//オブジェクトのメソッドを実行する
getObj('花子').text();
「getObj(‘太郎’)」と記述すると、「太郎」という名前を受け取ったオブジェクトデータが返されることになります。
「getObj(‘花子’).text()」と記述すると、返されたオブジェクトデータの中にあるメソッド「text」を実行することができます。
「関数（function）」を戻り値として利用する方法
今度は、戻り値として「関数」を指定する方法を見ていきましょう！一般的に「return」で関数を返す場合は関数名を付与しない「無名関数」を使うことが多いです。次のサンプル例を見てください。
function sample(num) {
return function(num) {
return num * 2;
}
}
//returnで返した関数を変数に代入する
var result = sample();
console.log( result(3) );
実行結果
6
この例では関数「sample」の中でreturnを使って無名関数を返しているのが分かります。注目すべきは、関数「sample()」を変数「result」に代入している点です！
これを行うことで、returnによって返された無名関数が変数に格納されることになるのです。そのため、「result(3)」と記述すると無名関数の中身が実行されて2倍された値「6」が出力されるというわけです。
この仕組みをさらに発展させると「クロージャ」につながり、JavaScriptの大きな特徴であるプログラミングが出来るようになります「クロージャ」については、次の記事で基本から応用技まで詳しく解説しているので参考にしてみてください！
まとめ
今回は、関数の処理結果を取得できる「return文」を学習しました！
学習のポイントを振り返ってみましょう！
・returnは関数内で処理したさまざまな値や式などを戻り値として返せる
・「return false」でブラウザ側が標準で用意しているイベント処理を中断できる
・returnで、配列・オブジェクト・関数などを返すことができる
以上の内容を再確認し、ぜひ自分のプログラムに生かし学習を進めてください！
