【JavaScript入門】関数（function）

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

関数（function）

　プログラムを作るときは、複数の小さな部品を組み合わせて大きな仕組みを作り上げます。自動車でいえばエンジンのように、ある程度まとまった「部品」があれば、その部品を繰り返し利用でき、効率的に作業を進められます。JavaScriptにおいては、この「部品」に相当するものが関数です。関数をうまく活用すると、同じ処理を何度も書かなくて済むだけでなく、プログラムの見通しをよくする効果も得られます。

１．関数とは

　関数は、ある処理をひとまとまりにし、名前をつけて再利用できる仕組みです。関数には「入力（引数）」と「出力（戻り値）」があり、入力を受け取って中で処理し、結果を返します。

1.1. 関数の構成要素

関数の基本的な構成要素は、以下の通りです。

用語	説明
関数	処理をまとめた部品で、名前をつけて定義します。
引数	関数が受け取る値。複数ある場合はカンマで区切ります。
処理	関数内でおこなう命令や計算などの一連の動作。
戻り値	処理後に関数が呼び出し元に返す結果の値。`return`キーワードで指定。

1.2. 関数の書き方

以下の構文で関数を定義します。

function 関数名(引数1, 引数2, ...) {
    // 処理
    return 戻り値;
}

function ：関数を宣言するキーワード
関数名 ：関数を識別する名前（自由につけられます）
()内の引数 ：関数に渡す値の受け口。複数の場合は ,（カンマ）で区切ります
{}内の処理 ：関数が実行する命令や計算、必要な変数操作など
return ：関数が呼び出し元に結果を返す際に使います。戻り値が不要であれば return を省略する場合もあります

２．関数の呼び出し方

定義した関数を使うには、関数名のあとに引数をかっこ内に渡します。

2.1. 基本的な呼び出し

関数名(引数1, 引数2, ...)

　上の形で呼び出すと、関数は処理を実行し、結果を戻り値として返します。仮に戻り値がある場合は、それを別の変数に格納したり、文字列の一部に組み込んだりできます。

2.2. 戻り値の使い方

　関数を変数の計算の一部に組み込むと、関数を呼び出した箇所が実行結果（戻り値）に置き換えられます。

let message = 'これは' + 関数名(引数) + 'の結果です。';
// 関数名(引数)が戻り値に入れ替わる

たとえば、次のような例です。

function getDescription(item, price) {
    let result = '【' + item + '】は' + price + '円です';
    return result;
}

console.log('紹介文:' + getDescription('チョコレートパフェ', 750));

　上記の例で getDescription('チョコレートパフェ', 750) が返す文字列が console.log の中に組み込まれるので、コンソール画面には「紹介文:【チョコレートパフェ】は750円です」のように表示されます。

３．無名関数（関数式）

　関数には名前をつけない書き方もあります。名前がないため、一般に「無名関数」や「匿名関数」と呼ばれます。無名関数は変数に代入して使ったり、他の関数の引数として直接渡したりできます。

let myFunction = function(a, b) {
    return a + b;
};

// 変数に関数を入れているため、呼び出すときは変数名で実行
console.log(myFunction(5, 3)); // => 8

４．具体的なHTMLファイルでの例

　次に、HTMLファイルにスクリプトを組み込んで関数を定義し、呼び出す簡単な例を示します。ファイル名は「myFunctionExample.html」とします。プログラムの動きや表示されるメッセージは自由に変更して構いません。

【myFunctionExample.html】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My Function Example</title>
</head>
<body>
    <h1>関数の動作確認</h1>
    <p>コンソールを開いて結果を確認してください。</p>
    <script>
        // 関数の定義
        function createGreeting(name) {
            let message = 'こんにちは、' + name + 'さん！';
            return message;
        }

        // 関数の呼び出し
        let greetingMessage = createGreeting('花子');
        console.log(greetingMessage);

        // 無名関数を変数に代入して使う例
        let addNumbers = function(x, y) {
            return x + y;
        };

        console.log('5 + 7 = ' + addNumbers(5, 7));
    </script>
</body>
</html>

実行結果

デバッグコンソールの出力

こんにちは、花子さん！
5 + 7 = 12

　上記では、createGreeting という関数で挨拶のメッセージを作り、console.log で出力しています。また、無名関数を変数 addNumbers に代入し、合計値を計算してコンソールに表示させています。

５．関数を活用するメリット

再利用性：同じ処理を何度でも呼び出せる。
保守性：コードがまとまり、修正箇所が特定しやすい。
可読性：プログラムの意図がわかりやすくなる。

まとめ

　関数は、プログラムを部品単位で整理し、入力と出力を明確にすることでコードの再利用や保守を容易にしてくれます。たとえば複数の画面や処理で同じ演算が必要なときに、関数としてまとめておけば何度でも使えます。また、無名関数（関数式）を使うと、関数自体を値として他の処理に渡すなど、より高度な使い方が可能です。こうした仕組みを活用しながら、効率的で見やすいプログラムを組み立ててみてください。