JavaScript | 関数から値を返す（return文）

JavaScript JavaScript
2020.08.02
スポンサーリンク

JavaScriptの関数とreturnの基本

はじめての人向けに、関数とreturnを「何ができるのか」「どう使うのか」をていねいに解説します。例題と練習問題も用意しました。

関数とは何か

  • 役割: 何度も使う処理を「ひとかたまり」にする仕組み。名前をつけて呼び出せる。
  • メリット: コードの重複を減らし、読みやすく、直しやすくする。
  • 基本の形: 
function 関数名(引数1, 引数2) {
  // ここにやりたい処理を書く
  return 結果; // 必要なら結果を返す
}
JavaScript
  • 引数: 関数に渡す入力（材料）。なくてもよい。
  • 返り値: returnで返す出力（出来上がり）。返さないこともできる。

returnの役割

  • 値を返す: 計算や処理の結果を呼び出し元へ渡す。
  • 処理を終える: その行で関数の実行を終了する（途中でも終了可能）。
function add(a, b) {
  return a + b; // 結果を返す
}

function checkAge(age) {
  if (age < 20) {
    console.log("20歳未満は利用できません");
    return; // 値は返さず、ここで終了
  }
  console.log("利用可能です");
}
JavaScript
  • 返り値がないとき: returnを書かない、またはreturn;だけの関数は、結果がundefinedになる。

例題で理解する

例題1: 円の面積を計算する

  • 目的: 入力に半径を受け取り、面積を計算して返す。
  • ポイント: 数値計算の結果をreturnで返す。
function calcCircleArea(radius) {
  const PI = 3.14;
  const area = PI * radius * radius;
  return area;
}

const result = calcCircleArea(10);
console.log(result); // 314
JavaScript

例題2: 条件で処理を打ち切る

  • 目的: 年齢に応じてメッセージを出し、未成年ならそこで終了。
  • ポイント: return;で早めに関数を終える。
function register(age) {
  if (age < 20) {
    console.log("20歳未満は登録できません");
    return; // ここで終わる
  }
  console.log("登録が完了しました");
}

register(18); // 「20歳未満は登録できません」
register(25); // 「登録が完了しました」
JavaScript

例題3: 複数のreturnは最初に到達したものが有効

  • 目的: 点数でランクを返す。
  • ポイント: 先に条件を満たしたreturnで関数が終了。
function getRank(score) {
  if (score >= 90) return "A";
  if (score >= 75) return "B";
  if (score >= 60) return "C";
  return "D"; // どれにも当てはまらなければD
}

console.log(getRank(88)); // "B"
JavaScript

例題4: 返り値を使った「合成」

  • 目的: 返り値を次の計算に使って、処理を組み合わせる。
  • ポイント: 「小さく作って、組み合わせる」習慣を持つ。
function toTaxIncluded(price) {
  const taxRate = 0.10;
  return Math.round(price * (1 + taxRate));
}

function addCoupon(price, discount) {
  return price - discount;
}

const priceAfterCoupon = addCoupon(2000, 300); // 1700
const finalPrice = toTaxIncluded(priceAfterCoupon); // 1870（概算）
console.log(finalPrice);
JavaScript

よくあるつまずきポイント

  • returnの後は実行されない: return以降の行はもう動かない。 
function f() {
  return 123;
  console.log("これは出ない"); // 実行されない
}
JavaScript
  • console.logとreturnの違い:
    • console.log: 画面に表示するだけ。値は呼び出し元に戻らない。
    • return: 値を関数の外に渡す。別の処理に使える。
  • undefinedに注意: 値を返さない関数を変数に入れても、使える数字や文字列にはならない。

練習問題

練習1: 三角形の面積

  • 課題: 底辺baseと高さheightを受け取り、面積を返す関数triangleAreaを作る。
  • ヒント: 面積はbase * height / 2。
function triangleArea(base, height) {
  // ここを埋めてみよう
}

// 例:
// console.log(triangleArea(8, 5)); // 20
JavaScript
  • 解答例: 
function triangleArea(base, height) {
  return base * height / 2;
}
JavaScript

練習2: 早期returnで入力チェック

  • 課題: 価格priceが0以下なら「不正な価格」と表示して終了。正の数なら税込価格（10%）を返すsafeTaxPrice。
  • ヒント: if (price <= 0) { console.log(...); return; }
function safeTaxPrice(price) {
  // ここを埋めてみよう
}

// 例:
// console.log(safeTaxPrice(1000)); // 1100（概算）
// safeTaxPrice(0); // 「不正な価格」
JavaScript
  • 解答例: 
function safeTaxPrice(price) {
  if (price <= 0) {
    console.log("不正な価格");
    return;
  }
  const rate = 0.10;
  return Math.round(price * (1 + rate));
}
JavaScript

練習3: パスワードの強さ判定

  • 課題: 文字数が8未満なら”weak”、数字が含まれていなければ”weak”、記号!@#のいずれかを含めば”strong”、それ以外は”medium”を返すpasswordStrength。
  • ヒント: string.length、includes、正規表現/[0-9]/。
function passwordStrength(pw) {
  // ここを埋めてみよう
}

// 例:
// console.log(passwordStrength("abc"));      // "weak"
// console.log(passwordStrength("abcd1234")); // "medium"
// console.log(passwordStrength("a1b2c3!@")); // "strong"
JavaScript
  • 解答例: 
function passwordStrength(pw) {
  if (pw.length < 8) return "weak";
  if (!/[0-9]/.test(pw)) return "weak";
  if (pw.includes("!") || pw.includes("@") || pw.includes("#")) return "strong";
  return "medium";
}
JavaScript

使い分けのコツ

  • 値が必要なとき: 計算や判定の結果を別の処理に使いたい → returnで返す。
  • メッセージだけで十分なとき: 画面に出すだけで終わりたい → console.logで表示し、return;で終える。
  • わかりやすさ優先: 長い関数は小さく分け、早期returnでネストを浅くする。

次に進むなら

  • 引数のデフォルト値: function f(x = 10) { ... }
  • 無名関数・アロー関数: const add = (a, b) => a + b;
  • 複数の値が必要: オブジェクトで返す → return { price, taxIncluded }
前へ次へ
123456
スポンサーリンク
タイトルとURLをコピーしました