JavaScriptの関数の使い方を完全ガイド！初心者でもわかる基本

新人と先輩の会話形式で理解しよう

新人

「JavaScriptで関数を使うと、どんなことができるんですか？」

先輩

「関数を使うと、繰り返し使う処理をまとめて、再利用することができますよ。関数は、特定の処理をまとめておき、後で呼び出して使うためのものです。」

新人

「なるほど！関数の使い方を具体的に教えてもらえますか？」

先輩

「もちろんです！今回は引数と戻り値がない関数の使い方を見ていきましょう。」

1. 関数とは？

関数は、特定の処理をまとめておくためのブロックです。関数を定義しておくと、必要なときにその処理を繰り返し呼び出すことができます。

例えば、数値を加算する処理を関数としてまとめることができます。これを「関数定義」と呼びます。

2. 関数の定義

関数は、functionというキーワードを使って定義します。次のコードでは、引数と戻り値なしの関数を定義しています。


<script>
    // 関数の定義
    function greet() {
        document.write("こんにちは！<br>");
    }
</script>

この関数greetは、呼び出すたびに「こんにちは！」と表示するだけの処理を行います。引数も戻り値もありません。

3. 関数の呼び出し

関数を定義した後は、関数名を使って呼び出すことができます。次のコードでは、先ほど定義したgreet関数を呼び出して、メッセージを表示します。


<script>
    // 関数の呼び出し
    greet(); // こんにちは！と表示される

    // 関数の定義
    function greet() {
        document.write("こんにちは！<br>");
    }
</script>

ブラウザ表示

このコードでは、関数greet()を呼び出すことで、「こんにちは！」というメッセージが表示されます。

4. 関数を使う際の注意点

関数を使う際には、いくつか気をつけるべきことがあります。特に初心者のうちは、簡単に間違えがちですが、少しの注意でうまく使えるようになります。以下の点に気をつけましょう。

関数の定義と呼び出しの順序: functionで関数宣言した場合、関数の定義と呼び出しの順序は関係なく、どちらを先に書いても正しく動作します。
関数を何度も使いたい場合: 関数は一度定義すれば、何度でも呼び出して使える便利なものです。毎回同じ処理を繰り返す場合に関数を使うと、コードが短くなり読みやすくなります。
関数を使って処理を整理する: 複雑な処理を関数に分けることで、コードが整理されて他の部分でも再利用しやすくなります。

これらのポイントを守ると、関数をより効果的に使うことができます。

1. 関数の定義と呼び出しの順序

JavaScriptでは、functionで関数宣言した場合、関数の定義と呼び出しの順序は関係なく動作します。

関数宣言の場合

関数宣言（function）では、JavaScriptの「ホイスティング」という仕組みが働き、関数定義がスクリプトの先頭に持ち上げられます。そのため、定義した後なら、関数を呼び出しても問題ありません。


<script>
    greet();  // 関数を呼び出しても動作する

    function greet() {
        document.write("こんにちは！<br>");
    }
</script>

ブラウザ表示

上記のように、関数を呼び出すコードが関数定義より前にあっても、問題なく動作します。これはホイスティングによって関数が先にメモリに上げられるためです。

2. 関数を何度も使いたい場合

関数は一度定義すれば、何度でも呼び出して使うことができます。例えば、同じ処理を何度も繰り返す場合に関数を使うと、コードが短くなり、読みやすくなります。

関数を使って繰り返し処理

以下の例では、関数を使って同じ処理を繰り返し行っています。


<script>
    function sayHello() {
        document.write("こんにちは！<br>");
    }

    // 関数を何度も呼び出す
    sayHello();
    sayHello();
    sayHello();
</script>

ブラウザ表示

このように、同じ処理を繰り返し使いたいときには関数を使うと便利です。これで「こんにちは！」を3回表示することができます。

3. 関数を使って処理を整理する

長いコードや複雑な処理をそのまま書き続けると、後から見るのが難しくなります。そんなときには関数を使ってコードを整理しましょう。

コードを関数で整理する

たとえば、以下のように関数を使ってコードを整理することができます。


<script>
    function printGreeting() {
        document.write("こんにちは！<br>");
    }

    function printGoodbye() {
        document.write("さようなら！<br>");
    }

    // それぞれの関数を呼び出して、処理を整理
    printGreeting();
    printGoodbye();
</script>

ブラウザ表示

このように、関数を使うことで、各処理を別々に分けることができ、コードを見やすく整理することができます。

4. 関数を使ってバグを減らす

関数を使うことによって、コードが短くなるだけでなく、バグを減らす効果もあります。例えば、同じ処理を何度も書かなくて済むので、修正が必要なときにも一箇所を変更すれば済むため、バグが少なくなります。

関数をうまく使って、より効率的で読みやすいコードを書けるようにしましょう。

5. 関数式（関数を変数に代入する方法）

JavaScriptでは、関数を変数に代入して使うこともできます。これを「関数式」と呼びます。関数をデータのように扱えるのが特徴です。


<script>
    const greet = function() {
        document.write("こんにちは！（関数式）<br>");
    };

    greet(); // 関数を呼び出す
</script>

このように、関数を変数に代入することで、柔軟に関数を扱うことができます。

6. アロー関数の基本

JavaScriptでは、より簡潔に関数を書くために「アロー関数」という書き方もあります。特に短い処理を書くときに便利です。


<script>
    const greet = () => {
        document.write("こんにちは！（アロー関数）<br>");
    };

    greet();
</script>

アロー関数を使うことで、コードをシンプルに書くことができ、可読性が向上します。

7. 関数のスコープと変数の関係

関数の中で宣言した変数は、その関数の中でのみ使うことができます。これを「ローカルスコープ」と呼びます。


<script>
    function test() {
        let message = "関数内の変数";
        document.write(message + "<br>");
    }

    test();
    // document.write(message); // エラー：関数外では使えない
</script>

このように、関数ごとに変数の範囲を分けることで、安全にプログラムを書くことができます。