【JavaScript】わかりやすい「戻り値」と使い方【return】

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

「return」ってなに?

return(リターン)は、関数内で処理した結果を「戻り値」として返す
とよく説明されます。

私も理解するまで、ずっと感じておりました。
そこで今回は「戻り値」について、とにかく簡単に、初学者でも理解しやすく説明していきます。

「戻り値ってのがなんとなく理解できない…」という方の不安を解消できるよう
コピペだけで使えるコードも載せております。是非、ご活用下さい。

「戻り値」を見てみよう！

まず、具体的に「これが戻り値だよ」というのを目で見ていただくのが1番だと思います。こちらをご覧ください。

数秒後に表示された「わたしは戻り値です」
これが文字列ですが、単純な数字や配列も戻り値として活用することができます。

「戻り値」はどこからきたの?

関数の処理結果から戻り値を取得することができます。

function hello(a) { 
　　return 'わたしは' + a + 'です'
}
////////////////
document.getElementById("returnValue").textContent = hello("戻り値")

[return ‘わたしは’ + a + ‘です’]

このコードであればこの部分で戻り値を作成しています。
引数(a)に”戻り値”を入れることで「わたしは戻り値です」が返ってきます。

まとめるとこのようになります。

「関数の中にreturnを入れて、そのあとに戻してほしい値を書く」

これだけ理解できればOKです！

return の後にくるfalseとかtrueって何?

簡単な「戻り値」の仕組みは理解いただけたと思います。
皆様にあと1つ覚えていただきたいのが「return false/true」

この仕組み、とても便利なのです。

ですが感覚的に理解しづらいのに使用頻度が高いので初学者の壁の1つになっていると個人的に思います。こちらを解説します。

return falseって何?

falseとは「間違い」という意味で、イベント処理を中断させるが主な役割です。

イベント処理とは「ボタンを押す」「ページが読み込まれる」などを行うことです。
一例ですが、以下のように「on」が頭につくメソッドが多いですね。

ゲームなどによく使われる「onclick」を使ってreturn falseの使い方を具体的に見て行きましょう。

onclickを始めて知る方は↓こちらをご活用ください。
5分程度でonclickの基本が分かるようになっております。

要素をクリックした時に処理を開始する方法【clickイベント】

falseは基本的にif文で使う

こちら、return falseを実際に使用したコードです。

青い時にボタンを押すと「わたしは戻り値です」を表示します。
赤い時にボタンを押しても何も起こりません。

ポイントは「押してね」が赤い時、青い時で処理を変えているところです。

条件式だけ抜粋すると下記のようになります。

let modoriti = document.getElementById("returnValue")
　if(btn.style.background === "blue" && btn.style.background != "red"){
　　　return modoriti.textContent = 'わたしは戻り値です'; 
　}else{
　　　return false; 
}

処理を止めたい条件(=「押してね」が赤い)を満たした時、return falseすれば処理を取り消すことができるのです。

このように条件を分けて、何も処理してほしくない時にreturn falseを使うことで処理を止めることが可能です。

まとめ

最後に、returnの戻り値とfalseについてまとめておきます。

以上、JavaScriptでのreturnの使い方のご紹介でした。