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

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

質問する

ただいまの
回答率

88.22%

javascriptのreturnの使い道が理解できません...

解決済

回答 6

投稿

  • 評価
  • クリップ 17
  • VIEW 16K+
退会済みユーザー

退会済みユーザー


演算子と制御文を一通り終え関数に入ったのですがjsのreturnの使い方がいまいち理解できません 

function menseki(r){
  var m = 3.14 * r * r;
  return m;
}ｗ

var m = menseki(5);

自分なりに考えてみたのですが、処理を終えたり新しい処理を始める前にreturnを使うのでしょうか...

それともbreakやcontinueのように一定の処理を飛ばしたり無効にするためにつかうのかわかりません値を返すというのが理解できません。。どこに返しているのですか？

初歩的なことを質問してすみません。。
どなたか教えてください

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 6 件

link

+37

プログラムというのは関数同士のリレーのようなものです。

例にある処理で言うとmenseki()に5というバトンを渡して、返ってきたバトンにmという名前をつけています。
(名前をつけることを代入といいますね)
処理が終わるまでプログラム上ではmというバトンが存在することになります。

そして、functionの中で名前をつけたバトンは基本的にfunctionの中にしか存在することができません。
(この存在できる範囲をスコープといいます)

名前が同じなのでちょっとややこしいのですがmenseki()の中のmと外にあるmは別ものになります。
中にあるmを外に渡してあげるためにreturnを使ってあげます。

逆に言うと中にあるmは普通にやっても外からは取り出せません。
この処理を行うにはスコープという概念を理解する必要がありますので、必要なときに調べるかまたここで聞いてみると良いと思います。

この返ってきたバトンが返り値と呼ばれ、returnという言葉の意味に通づるわけです。

バトンの中身を知るにはconsole.log(m);としてコンソールに出力するなどして表示させる必要があります。

ちなみにfunctionに渡すバトンを引数(argument)といいます。
効率のよいプログラムというのは少ないバトンで効率よくバトンが回っているものになります。 

function menseki(r) {
    // 渡されたバトンにrという名前をつける

    // rを計算した結果の値にmと名付ける
    var m = 3.14 * r * r;

    // `m`というバトンを外に渡してあげる
    return m;
}

// menseki()に`5`という値をバトンで渡して、返ってきたバトンにmと名付ける
var m = menseki(5);

バトンの例えで伝わりましたでしょうか。
この概念はほぼすべての言語に共通しているので頑張って理解してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/11/28 23:40

    質問者ではないのですが、コメントします！
    僕もよく理解できていない状態だったので気になって見てみたのですが、
    回答者さんの回答はとても丁寧かつ、例えを出してくれたりと工夫してくれてとっても分かりやすかったので思わずコメントしてしまいました！
    ありがとうございます！

    キャンセル

  • 2020/08/07 06:26

    何を見てもわからなかったのですが、ようやくreturnが何をやっているのかを理解できました。
    わかりやすいです！
    質問者とは別人ですが、ありがとうございました。

    キャンセル

link

checkベストアンサー

+22 

function menseki(r){
  var m = 3.14 * r * r;
  return m;
}

var m = menseki(5);
　ではこれをreturnを使わずに書いてみましょう。
　 
function menseki(r){
  var m = 3.14 * r * r;
}

var m = menseki(5); // undefined
　これではダメですね。
　では、直接mに代入してしまうのはどうでしょうか。
　 
function menseki(r){
  m = 3.14 * r * r;
}

var m = menseki(5); // undefined
　あれ、ダメですね。
　return文がないため menseki から undefined が返ってきてしまうのが原因ですね。
　では、代入をやめましょう。
　 
function menseki(r){
  m = 3.14 * r * r;
}

menseki(5); 
alert(m); // 78.5
　うまくいきました。
　では、これを使い回してみましょう。3つの円の面積を求めてみます。
　 
function menseki(r){
  m = 3.14 * r * r;
}

menseki(3);
menseki(4);
menseki(5);
alert(m); // 78.5
　あれ、他の二つはどこへ行ってしまったんでしょう？
　そうですね、関数が実行されるたびに上書きされてしまうので、常に一つの値しか持てないんですね。
　では、3つの値を持てるように関数を増やしましょう。
　 
function menseki1(r){
  m1 = 3.14 * r * r;
}
function menseki2(r){
  m2 = 3.14 * r * r;
}
function menseki3(r){
  m3 = 3.14 * r * r;
}

menseki1(3);
menseki2(4);
menseki3(5);
alert(m1); // 28.26
alert(m2); // 50.24
alert(m3); // 78.5
　超きもいっすね。100回実行するためには100個書かないといけない。
　なんか上手い方法はないでしょうか？
　
　計算が終わるたびに、値を別の変数に取りだしてみましょうか。
　 
function menseki(r){
  m = 3.14 * r * r;
}

menseki(3);
var m1 = m;
menseki(4);
var m2 = m;
menseki(5);
var m3 = m;
alert(m1); // 28.26
alert(m2); // 50.24
alert(m3); // 78.5
　上手くいきました。すっきりですね。
　でも、関数呼び出しと代入の2行を書かなきゃいけないのがイマイチですね。1行で終わる方法はないでしょうか。
　関数から変数へ直接代入をしていないのはなぜなんでしたっけ？
　
　そうですね、関数が undefined を返してくるからでした。return文を書けば undefined 以外の値も返せるのでそれで書き直してみましょう。
　 
function menseki(r){
  var m = 3.14 * r * r;
  return m;
}

var m1 = menseki(3);
var m2 = menseki(4);
var m3 = menseki(5);
alert(m1); // 28.26
alert(m2); // 50.24
alert(m3); // 78.5
　これでひとまず分かりやすくなりましたね。
　
　retrun文があるといろいろ便利なのがお分かりいただけましたでしょうか？

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/12/02 18:33

    返信が遅くなってしまいごめんなさい
    丁寧に説明して頂いたおかげでやっと理解することができました！
    ありがとうございます

    キャンセル

link

+19

既に回答が有りますので補足です。returnだけを考えると難しいかも知れません。
まずfunctionにする理由が有ります。
  • 主処理をシンプルに書ける
functionとして小分けできる処理を分離すると、主処理がスッキリして読み易くなる場合が有ります。
javascriptの場合、主処理もfunctionも同じソースに書く慣例もあるので慣れないと初めは読みずらいかも知れません。
  • 主処理（または他のfunction）で繰り返し利用できる
簡単な処理ではあまり無いケースですが、こうしたメリットも有ります。

コーディングスタイルの差もありますが、returnが使用される理由に「function化のメリット」が有ります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+18

蛇足かもしれませんが、
return自体については他の方のご回答で十分かと思いますので、別の面について少しだけ。

ご提示の機能だけだと、functionの存在意義があまり分からないかと思いますので、
色んな「球」を扱いたい場合について、書いてみました。 
// クラス定義
// 「r」は半径
var kyuu = function(r){
    // コンストラクタ
    this.pi = 3.14;
    this.r = r;
};
// function定義
kyuu.prototype.ensyuu = function(){
    return 2 * this.pi * this.r;
};
kyuu.prototype.heimenseki = function(){
    return this.pi * this.r * this.r;
};
kyuu.prototype.hyoumenseki = function(){
    return 4 * this.pi * this.r * this.r;
};
kyuu.prototype.taiseki = function(){
    return (3/4) * this.pi * this.r * this.r * this.r;
};

var myKyuu5 = new kyuu(5);
var myKyuu7 = new kyuu(7);
// 結果表示
console.log('半径5の場合 ： 円周'+myKyuu5.ensyuu());
console.log('半径5の場合 ： 平面積'+myKyuu5.heimenseki());
console.log('半径5の場合 ： 球表面積'+myKyuu5.hyoumenseki());
console.log('半径5の場合 ： 球退席'+myKyuu5.taiseki());

console.log('半径7の場合 ： 円周'+myKyuu7.ensyuu());
console.log('半径7の場合 ： 平面積'+myKyuu7.heimenseki());
console.log('半径7の場合 ： 球表面積'+myKyuu7.hyoumenseki());
console.log('半径7の場合 ： 球退席'+myKyuu7.taiseki());
結果 
半径5の場合 ： 円周31.400000000000002
半径5の場合 ： 平面積78.5
半径5の場合 ： 球表面積314
半径5の場合 ： 球退席294.375
半径7の場合 ： 円周43.96
半径7の場合 ： 平面積153.86
半径7の場合 ： 球表面積615.44
半径7の場合 ： 球退席807.765

この様になっていた場合、色んな大きさの球を扱う上で、非常に便利になる事が分かるかと思います。
まだクラスの概念は勉強されていないかもしれませんが、functionはクラスがあって初めて大きな価値が出てきますので、
是非頑張ってみて下さい。

ちなみに、この辺りまで理解できれば、大抵のプログラムは読めるようになるはずです！

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+17

コードの埋め込みの仕方がわからないので、分かり辛くなってしまうとは思いますが書いてみます
function Gura_house(friend) {
  ret = friend + "とぐら"
  return ret;
}

title = Factory("ぐり");
console.log(title);

実行結果は"ぐりとぐら"です。
ぐりだけでは寂しいので、Gura_house(ぐらの家）に行ってきて、ぐらと一緒に遊ぶことにしました
既出のSAMURAI-HACKさんの説明がかなり詳しいので、この回答に意味があるかはわかりませんが、関数というのは、大雑把にいうと「トランザクション」です。
日本語訳すると「ひとまとまりの処理」ですね

プログラムで書く
myName = "tukejonny"
というのは、myNameという変数に、"tukejonny"の文字列を代入しろ！という１つの処理ですよね
これが複数まとまっているのが関数で、処理＝加工と捉えれば、加工した結果を返させる事ができます

汚い説明ですし、私自身プログラミング初心者なので正しいとも言えませんが、あくまで私自身がこうとらえているという意見を書いてみました。
ご参考になれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+14

とても丁寧に解説していただき感謝です
初心者の私にも理解できました！
ありがとうございます

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る