技術コンテンツ

JavaScript

No.39 関数

【JavaScript】関数（function） - 処理のまとまり

JavaScriptの関数について解説します。

検証環境

JavaScript -

macOS

14.1

関数

関数は“処理のまとまり”です。

関数を使用するには『関数の定義』と『関数の呼び出し』を行います。

関数の定義

関数の定義は“処理のまとまりを関数として定義すること”です。

目的の処理に応じて、任意の処理を関数として定義できます。

基本構文

function 関数名() {
    // 処理........
}

関数名は変数名と同様に次のルールに従って自由に決めることができます。

アルファベット（大文字/小文字）、アンダースコア（_）、ダラー（$）、数字のみ
頭文字に数字は使えない。
予約語（JavaScriptの構文等で使用する単語）は使えない。

サンプル

sample.js

___ih_hl_start
function message() {
    console.log("Good Morning!");
    console.log("Good Afternoon!");
    console.log("Good Night!");
}
___ih_hl_start

Console

１〜５行目が関数の定義です。

関数名はmessage、処理内容はブロック（波括弧{}）内の３つのconsole.logです。

また、関数は定義のみでは、その内容は実行されません。

そのため、実行結果に出力はありませんが、正常な動作です。

関数の呼び出し

関数の呼び出しは“関数を明示的に実行すること”です。

関数は呼び出したタイミングで、その内容が実行されます。

※ 関数を呼び出すことができるのは、その関数の有効スコープのみです。スコープについては別途解説します。

基本構文

関数名()

関数を呼び出す箇所に関数名に続けて丸括弧（()）を記述します。

サンプル

sample.js

function message() {
    console.log("Good Morning!");
    console.log("Good Afternoon!");
    console.log("Good Night!");
}

___ih_hl_start
message();
___ih_hl_end

Console

Good Morning!
Good Afternoon!
Good Night!

７行目が関数の呼び出しです。

message関数を呼び出しており、処理内容である３つのconsole.logが実行されたことが実行結果から確認できます。

また、１度定義した関数は何回でも呼び出すことが可能です。

sample.js

function message() {
    console.log("Good Morning!");
    console.log("Good Afternoon!");
    console.log("Good Night!");
}

message();
___ih_diff_start
+message();
+message();
___ih_diff_end

Console

Good Morning!
Good Afternoon!
Good Night!
Good Morning!
Good Afternoon!
Good Night!
Good Morning!
Good Afternoon!
Good Night!

８〜９行目にmessage関数の呼び出しを追加し、合計３回呼び出すように変更しました。

実行結果から３回分のmessage関数の処理が実行されたことが分かります。

複数の関数

関数は関数名が重複しなければ、任意の数だけ定義できます。

sample.js

function message() {
    console.log("Good Morning!");
    console.log("Good Afternoon!");
    console.log("Good Night!");
}

___ih_diff_start
+function simple() {
+    console.log("Hello World!");
+}
___ih_diff_end

message();
___ih_diff_start
+simple();
___ih_diff_end

Console

Good Morning!
Good Afternoon!
Good Night!
Hello World!

上記サンプルにsimple関数の定義を７〜９行目、呼び出しを１２行目に追加しました。

このように関数は複数定義することが可能です。

メリット

関数のメリットは主に次の３つです。

コード量の削減
可読性の向上
変更の容易さ

各メリットについて関数を未使用のコードと使用したコードを比べて確認します。

関数を未使用のコード

sample.js

console.log("Good Morning!");
console.log("Good Afternoon!");
console.log("Good Night!");
console.log("Good Morning!");
console.log("Good Afternoon!");
console.log("Good Night!");
console.log("Good Morning!");
console.log("Good Afternoon!");
console.log("Good Night!");
console.log("Good Morning!");
console.log("Good Afternoon!");
console.log("Good Night!");

関数を使用したコード

sample.js

function message() {
    console.log("Good Morning!");
    console.log("Good Afternoon!");
    console.log("Good Night!");
}

message();
message();
message();
message();

関数を使用したコードは次の３つのconsole.logを１つのまとまりにし関数として定義しています。

console.log("Good Morning!");
console.log("Good Afternoon!");
console.log("Good Night!");

このように同じ処理を１つにまとめることを『共通化』、１つの処理にまとめたものを『共通処理』と呼びます。

1.コード量の削減

共通化によって関数を使用したコードの方がコード量が少なくなっています。

上記ソースコードはコード量が少なく効果を体感しづらいですが、何千、何万行あるプログラムの場合、より多くのコード量削減を期待できます。

2.可読性の向上

コード量の削減にも関係しますが、コード量が少なくなったことで読みやすくなりました。

関数を使用しないコードは同じコードを４回読む必要がありますが、使用した場合は１度のみで済みます。

3.変更の容易さ

処理内容を変更する場合、関数を使用した方が容易に変更できます。

例えばNightの部分をLuckに変更するケースを考えます。

関数を使用しない場合は４ヶ所の書き直しが必要です。

sample.js

console.log("Good Morning!");
console.log("Good Afternoon!");
___ih_diff_start
-console.log("Good Night!");
+console.log("Good Luck!");
___ih_diff_end
console.log("Good Morning!");
console.log("Good Afternoon!");
___ih_diff_start
-console.log("Good Night!");
+console.log("Good Luck!");
___ih_diff_end
console.log("Good Morning!");
console.log("Good Afternoon!");
___ih_diff_start
-console.log("Good Night!");
+console.log("Good Luck!");
___ih_diff_end
console.log("Good Morning!");
console.log("Good Afternoon!");
___ih_diff_start
-console.log("Good Night!");
+console.log("Good Luck!");
___ih_diff_end

しかし、関数を使用した場合は１ヶ所のみで対応できます。

sample.js

function message() {
    console.log("Good Morning!");
    console.log("Good Afternoon!");
    ___ih_diff_start
-    console.log("Good Night!");
+    console.log("Good Luck!");
    ___ih_diff_end
}

message();
message();
message();
message();

デメリット

デメリットは“関数を不適切に使用した場合、複雑なソースコードになってしまうこと”です。

例えば、関数を使用してもコード量が減らない場合や本来の目的が異なるコードを共通化してしまうなどです。

デメリットを回避するにはメリットを理解して関数を使用しましょう。