関数の基本的な作り方を学ぼう

学習の目標

本章では、以下の内容を学習します。

function文による関数宣言の方法を理解する
関数式による関数作成の方法を習得する
関数の呼び出し方を学ぶ
関数名の命名規則を理解する

はじめに

これまでのレッスンでは、JavaScriptのコードを上から下へと順番に実行する書き方を学んできました。しかし、プログラムを書いていると、同じような処理を何度も繰り返すことがよくあります。

たとえば、「こんにちは」と表示する処理を複数回書きたい場合、同じコードを何度も書くのは効率的ではありません。また、後で処理を変更したくなった時に、同じ修正を複数箇所で行う必要が出てきます。

そんな時に役立つのが関数です。関数を使うことで、繰り返し使いたい処理をひとまとめにして、必要な時に呼び出すことができるようになります。まずは簡単な関数の作り方から一緒に学んでいきましょう。

関数とは何か

関数とは、特定の処理をひとまとめにした「処理のかたまり」のことです。身近な例で言うと、コーヒーメーカーのようなものだと考えるとわかりやすいでしょう。

コーヒーメーカーは、豆と水を入れると自動的にコーヒーを作ってくれます。同じように、関数も特定の「入力」を受け取って、決まった処理を行い、結果を「出力」として返してくれます。

JavaScriptでは、この関数を自分で作ることができます。そして、作った関数は何度でも使い回すことができるのです。

HTMLファイルで関数を試してみよう

それでは、実際に関数を作って動かしてみましょう。VS Codeで新しいフォルダを作成し、その中にfunction-test.htmlというファイルを作成してください。

まずは、基本的なHTMLの構造を書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>関数のテスト</title>
</head>
<body>
    <h1>関数のテスト</h1>
    
    <script>
        // ここにJavaScriptのコードを書いていきます
        
    </script>
</body>
</html>

このHTMLファイルを保存して、ブラウザで開いてください。そして、開発者ツールのConsoleタブを開いておきましょう。これで関数のテストを行う準備が整いました。

function文による関数宣言

JavaScriptで関数を作る最も基本的な方法が、function文を使った関数宣言です。まずは簡単な挨拶を表示する関数を作ってみましょう。

先ほど作成したHTMLファイルの<script>タグ内に、以下のコードを追加してください。

<script>
    // 挨拶を表示する関数を宣言
    function sayHello() {
        console.log("こんにちは！");
    }
    
    // 関数を呼び出す
    sayHello();
</script>

このコードを保存してブラウザでページを更新すると、開発者ツールのConsoleに「こんにちは！」と表示されるはずです。

function文の構造を理解しよう

上記のコードを詳しく見てみましょう。関数宣言の基本的な構造は以下のようになっています。

function 関数名() {
    // 実行したい処理
}

functionは、関数を作ることを示すキーワードです
関数名は、この関数を識別するための名前です
()は、関数に渡すデータ（引数）を書く場所です（今回は空にしています）
{}の中に、関数が実行される時に行いたい処理を書きます

今回の例では、sayHelloという名前の関数を作り、その中でconsole.log("こんにちは！");という処理を定義しました。

関数の呼び出し方

関数を作っただけでは、中の処理は実行されません。関数を実際に動かすには、関数を呼び出す必要があります。

関数の呼び出しは、関数名の後に()を付けて行います。

sayHello(); // 関数を呼び出す

この一行を書くことで、sayHello関数の中に書いた処理が実行され、「こんにちは！」がConsoleに表示されます。

複数の関数を作ってみよう

関数は好きなだけ作ることができます。HTMLファイルの<script>タグ内に、さらにいくつかの関数を追加してみましょう。

<script>
    // 挨拶を表示する関数
    function sayHello() {
        console.log("こんにちは！");
    }
    
    // 別れの挨拶を表示する関数を追加
    function sayGoodbye() {
        console.log("さようなら！");
    }
    
    // 自己紹介をする関数を追加
    function introduce() {
        console.log("私の名前は田中です。");
        console.log("プログラミングを学んでいます。");
    }
    
    // 関数を順番に呼び出す
    sayHello();
    introduce();
    sayGoodbye();
</script>

このコードを保存してブラウザで更新すると、Consoleに以下のような表示が順番に現れるはずです。

こんにちは！
私の名前は田中です。
プログラミングを学んでいます。
さようなら！

このように、複数の関数を作って、それぞれを呼び出すことで、処理を整理して書くことができます。また、introduce関数のように、ひとつの関数の中に複数の処理を書くこともできます。

関数式による関数作成

JavaScriptでは、function文による宣言以外にも、関数式という方法で関数を作ることができます。関数式では、関数を変数に代入する形で定義します。

HTMLファイルに新しいコードを追加してみましょう。

<script>
    // function文による関数宣言（これまでの方法）
    function sayHello() {
        console.log("こんにちは！");
    }
    
    // 関数式による関数作成（新しい方法）
    const sayWelcome = function() {
        console.log("いらっしゃいませ！");
    };
    
    // どちらの関数も同じように呼び出せる
    sayHello();    // 関数宣言で作った関数
    sayWelcome();  // 関数式で作った関数
</script>

関数式では、function()で関数を作り、それをconstで宣言した変数に代入しています。注意してほしいのは、関数式の最後にセミコロン（;）を付けることです。これは変数への代入文なので、セミコロンが必要になります。

関数宣言と関数式の違い

関数宣言と関数式は、どちらも同じように関数を作ることができますが、微妙な違いがあります。

関数宣言で作った関数は、コードのどこからでも呼び出すことができます。たとえば、関数を定義する前に呼び出しても動作します。

// 関数を定義する前に呼び出しても動作する
sayHi(); // "こんにちは！"と表示される

function sayHi() {
    console.log("こんにちは！");
}

一方、関数式で作った関数は、その変数が定義された後でないと呼び出すことができません。

// これはエラーになる
// sayBye(); // エラー：Cannot access 'sayBye' before initialization

const sayBye = function() {
    console.log("さようなら！");
};

// ここでなら呼び出せる
sayBye(); // "さようなら！"と表示される

どちらを使うかは状況や好みによりますが、最初のうちはfunction文による関数宣言の方が分かりやすいかもしれません。

関数名の命名規則

関数に名前を付ける時には、いくつかのルールと慣習があります。適切な名前を付けることで、コードが読みやすくなり、後で見返した時にも理解しやすくなります。

基本的なルール

関数名には以下のルールがあります。

英数字、アンダースコア（_）、ドル記号（$）が使える
数字から始めることはできない
予約語（function、if、forなど）は使えない
大文字と小文字は区別される

命名の慣習

JavaScriptでは、以下のような慣習に従って関数名を付けることが一般的です。

<script>
    // キャメルケース（推奨）
    function calculateTotal() {
        console.log("合計を計算します");
    }
    
    // 動詞から始める（推奨）
    function showMessage() {
        console.log("メッセージを表示します");
    }
    
    function getUserName() {
        console.log("ユーザー名を取得します");
    }
    
    // 関数の機能が分かりやすい名前（推奨）
    function validateEmail() {
        console.log("メールアドレスを検証します");
    }
    
    // 関数を呼び出してテスト
    calculateTotal();
    showMessage();
    getUserName();
    validateEmail();
</script>

キャメルケースとは

JavaScriptでは、関数名や変数名にキャメルケースという書き方を使うのが一般的です。キャメルケースでは、最初の単語は小文字で始め、２つ目以降の単語の最初の文字を大文字にします。

// キャメルケースの例
showUserProfile()     // show + User + Profile
calculateTaxAmount()  // calculate + Tax + Amount
getStudentScore()     // get + Student + Score

この書き方は、ラクダ（camel）のこぶのように見えることから「キャメルケース」と呼ばれています。

関数を使うメリット

関数を使うことで、プログラムにはいくつかのメリットが生まれます。

コードの再利用

同じ処理を何度でも簡単に呼び出すことができます。たとえば、挨拶を表示する処理を複数の場所で使いたい場合、関数にしておけば何度でも呼び出せます。

function showWelcome() {
    console.log("ようこそ！");
    console.log("サービスをご利用いただき、ありがとうございます。");
}

// 複数回呼び出すことができる
showWelcome(); // 最初の挨拶
console.log("--- 何かの処理 ---");
showWelcome(); // 2回目の挨拶

コードの整理

処理を関数に分けることで、プログラム全体が読みやすくなります。関数名を見るだけで、そこでどのような処理が行われているかが分かるからです。

修正の簡単さ

同じ処理を複数の場所で使っている場合、関数にしておけば、修正は関数の定義部分だけで済みます。関数を使わずに同じコードを複数箇所に書いていた場合、すべての箇所を修正する必要があります。

まとめ

本章では、JavaScriptの関数の基本的な作り方について学びました。以下の内容を理解できたことと思います。

function文を使った関数宣言の方法
関数式を使った関数作成の方法
関数の呼び出し方
関数名の命名規則とキャメルケースの使い方
関数を使うことのメリット

関数は、プログラミングにおける基本的で大切な概念です。最初は慣れないかもしれませんが、同じような処理を繰り返し書いていることに気づいたら、それを関数にまとめることを考えてみてください。

次回は、関数に値を渡して、より柔軟な処理を行う方法について学んでいきます。