関数を作ってみよう

このレッスンでは、JavaScriptで関数を作る書き方を学び、同じ処理を何度も再利用できるコードを書けるようになることを目標にします。「JavaScript 関数 作り方」「JavaScript function 使い方」で検索した初心者の方向けの内容です。

関数は、処理をひとまとめにして名前をつけたものです。function 名前(引数) { 処理; return 戻り値; }の形で定義し、名前(値)で呼び出します。料理のレシピのように、一度決めた手順に名前をつけておけば、必要なときにいつでも同じ結果を再現できます。引数を変えることで、同じ処理でも違う結果を得られるのが関数の強みです。

サンプルコードではgreetという関数を定義し、nameという引数を受け取って挨拶メッセージをreturnで返しています。returnで返された値は、関数を呼び出した場所でそのまま使うことができ、console.log(greet("はなこ"))のように直接利用できます。

初心者がよくつまずくのが、returnを書き忘れて関数の結果がundefinedになってしまうケースです。returnは「関数の結果をここで確定させて、呼び出し元に返す」という意味を持つため、値を返したい関数には必ず必要です。また、関数の外で定義した変数と引数の名前が同じだと混乱しやすい点にも注意しましょう。

実際の開発現場では、同じ計算やデータ処理をあちこちで使い回すために、まず関数として切り出すのが基本の考え方です。関数を適切な単位に分けることで、コードの見通しがよくなり、バグ修正やテストもしやすくなります。関数設計の良し悪しは、実務のコード品質を大きく左右します。

関数には、値を返さず処理だけを行う関数もあります。その場合はreturnを省略でき、呼び出し側では戻り値を使わずに実行だけを行います。用途に応じて「値を返す関数」と「処理だけ行う関数」を意識して使い分けられるようになると、コードの意図がより明確になります。

関数名にも命名のコツがあり、greetやcalculateTotalのように「何をする関数か」が動詞から伝わる名前を付けるのが基本です。名前だけで処理内容が想像できる関数は、コードを読む人にとって非常に親切です。