【JavaScript】関数（function）の定義と戻り値の基礎

2026年1月23日

概要

関数（function）は、特定の処理をひとまとめにして名前を付け、必要なタイミングで何度でも呼び出せるようにする仕組みです。 JavaScriptにおいて関数はプログラムの構成要素の要であり、引数（入力）を受け取り、処理を行い、戻り値（出力）を返すのが基本的な役割です。本記事では、function キーワードを使用した関数の宣言方法、値を返す return の挙動、および到達不能コード（Dead Code）について解説します。

仕様（入出力）

入力: 数値や文字列などの引数
出力:
1. 関数の実行結果（計算値や判定結果）のコンソール出力
2. return 文による値の返却

基本の使い方

関数を定義するには function 関数名(引数) { 処理 } という構文を使用します。定義した関数は 関数名() で実行（呼び出し）します。

構文のポイント

引数（パラメータ）: 関数に渡す値。カンマ区切りで複数指定可能。
return: 関数の処理を終了し、呼び出し元に値を返す命令。return 以降の行は実行されません。

コード全文（HTML / JavaScript）

HTML (index.html)

関数の動作を確認するための土台となるHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Function Basic Demo</title>
    <script src="function-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>関数の実行結果がログに出力されています。</p>
    </div>
</body>
</html>

JavaScript (function-demo.js)

入力されたパターン（基本、計算、早期リターン、到達不能コード）を整理し、正しい構文で記述したコードです。

/**
 * 1. 基本的な関数の定義と戻り値
 * 引数を受け取り、計算結果を返します。
 */
function addTwo(number) {
    const result = number + 2;
    return result; // 計算結果を呼び出し元へ返す
}

// 関数の実行と結果の確認
const value1 = addTwo(10);
console.log(`addTwo(10) の結果: ${value1}`); // 12


/**
 * 2. 複数の引数を持つ関数
 * 3つの数値を合計します。
 */
function calcSum(a, b, c) {
    return a + b + c; // 変数に入れず直接返すことも可能
}

console.log(`calcSum(10, 20, 30) の結果: ${calcSum(10, 20, 30)}`); // 60


/**
 * 3. return文の特性（到達不能コード）
 * returnを実行した時点で関数は終了します。
 */
function checkReturnBehavior() {
    console.log("この行は実行されます");
    return 100;
    
    // 【重要】以下の行は決して実行されません（Dead Code）
    console.log("この行は無視されます"); 
}

const returnVal = checkReturnBehavior();
console.log(`戻り値: ${returnVal}`);


/**
 * 4. 条件分岐と早期リターン（Early Return）
 * 条件に応じて値を返し分けます。
 */
function selectValue(a, b) {
    // aが100以上なら、即座にaを返して終了
    if (a >= 100) {
        return a;
    }
    
    // 上記のifに入らなかった場合のみ実行される
    return b;
}

console.log(`selectValue(150, 50) の結果: ${selectValue(150, 50)}`); // 150
console.log(`selectValue(10, 50) の結果: ${selectValue(10, 50)}`);  // 50


/**
 * 5. 税込価格計算の実践例
 */
function calcTaxPrice(price, taxRate) {
    const total = price + (price * taxRate);
    return total;
}

const myResult = calcTaxPrice(100, 0.1);
console.log(`税込価格: ${myResult}`); // 110

カスタムポイント

関数の命名: 関数名はその処理内容を表す動詞（例: calculate, get, check, render）で始めると、コードの可読性が向上します。
デフォルト引数: ES6以降では、function calc(price, tax = 0.1) のように引数に初期値を設定できます。呼び出し時に tax を省略すると自動的に 0.1 が使われます。

注意点

returnの書き忘れ: 値を返すつもりで return を書き忘れると、関数の戻り値は undefined になります。計算結果を使いたい場合は必ず return してください。
到達不能コード（Unreachable Code）: return の後に書かれた処理は絶対に実行されません。デバッグ用の console.log などは必ず return の前に記述してください。
変数のスコープ: 関数内で宣言した変数（const result など）は、関数の外からは参照できません（ローカルスコープ）。

応用

アロー関数への書き換え

現代のJavaScript開発では、function キーワードの代わりに、より短潔に書ける「アロー関数」が頻繁に使われます。

// 従来の関数定義
// function add(a, b) {
//     return a + b;
// }

// アロー関数による定義 (ES6+)
const add = (a, b) => {
    return a + b;
};

// 処理が1行だけなら、return と {} を省略可能
const simpleAdd = (a, b) => a + b;