JavaScript関数の使い方を徹底解説！初心者向けステップバイステップガイド

JavaScriptの関数とは、再利用できるカスタムコードブロックのことです。関数を活用することでコードのモジュール化が促進され、オブジェクト指向プログラミングにおいても欠かせない存在となります。関数は「宣言」または「式」のいずれかの方法で定義できます。

---

これからJavaScriptを学ぼうとしている方にとって、JS関数の基礎は必ず押さえておきたい重要ポイントです。プログラミング言語に触れた経験がある方なら、関数が複雑なプログラムを組み立てるための基本的な部品であることはご存じでしょう。しかし、その仕組みまで理解している方は少ないかもしれません。関数を使えば、共通の処理を一度書くだけで済み、同じコードを何度も繰り返し記述する手間から解放されます。

関数とは、特定の処理を実行し、値を返すこともできるコードブロックのことです。用途に応じて自由にカスタマイズでき、コードの効率化とモジュール化に大きく役立ちます。

このチュートリアルでは、関数の基本である「関数の定義方法」「関数の呼び出し方法」「関数が役立つ場面」について順を追って解説していきます。

JavaScriptで関数を定義する2つの方法

JavaScriptで関数を定義する方法は、「関数宣言」と「関数式」の2種類があります。まずは、関数宣言による定義方法から見ていきましょう。

JavaScriptの関数宣言

関数宣言では、名前付きの関数を定義します。このタイプの関数を定義するには、コードをfunctionキーワードで始め、その後に関数名を続けます。以下が基本の構文です。

function nameOfYourFunction() {
	// 関数のコード
}

関数名は変数と同じ命名ルールに従います。英字、アンダースコア、数字を使用でき、一般的にはキャメルケース（例：printGoogle）で記述されます。関数名の後には丸括弧を付け、そこには任意のパラメータを指定できます。パラメータについては記事の後半で詳しく解説します。

そして、for文やif文と同様に、関数の処理内容は波括弧 { } の中に記述します。以下は、コンソールに「Google」と出力する関数の例です。

function printGoogle() {
	console.log("Google");
}

printGoogle()関数の中には、関数が呼び出されたときに実行されるconsole.log()ステートメントが含まれています。ただし、関数を呼び出すまで何も起こりません。関数を呼び出すには、次のコードを使用します。

printGoogle();

それでは、これらのコードを1つにまとめて、実際に関数を呼び出してみましょう。

// printGoogle()関数を宣言
function printGoogle() {
	console.log("Google");
}

// printGoogle()関数を呼び出し
printGoogle();

このコードの出力結果は「Google」になります。printGoogle()関数は、最終行で呼び出された時点で結果を返します。

出力処理が関数の中にまとめられたことで、printGoogle()を呼び出すだけで、何度でも同じ処理を実行できるようになりました。

JavaScriptの関数式

関数を定義するもう1つの方法が「関数式」です。関数式では、関数を変数に代入する形で定義します。

先ほどと同じ例を使って説明しましょう。関数を単独で宣言する代わりに、変数に代入することができます。以下がその例です。

const google = function printGoogle() {
	console.log("Google");
}

この式を呼び出すには、実行したい箇所にgoogle()というコード行を追加します。

関数のパラメータ

関数宣言と関数式という2つの定義方法がわかったところで、次は関数をさらに柔軟にカスタマイズする方法を見ていきましょう。これまでのコードでは、コンソールに「Google」を出力する関数を作成しました。

別の名前（例えばFacebookなど）を出力したい場合は、コード自体を変更する必要があります。仮に、Webサイトにアクセスしたユーザーが好きな会社の名前を入力し、それをコンソールに出力したい場合を考えてみてください。現在の関数では対応できません。

そこで活躍するのがパラメータです。JS関数にnameパラメータを追加すれば、どんな名前でもコンソールに出力できるようになります。以下がその例です。

function printCompany(name) {
	console.log(`My favorite company is ${name}!`);
}

関数名はprintCompany()で、パラメータはnameです。このパラメータはJavaScript関数内で参照できます。上の例では、nameパラメータを使うことで、console.log()で出力される内容を動的に変更しています。

しかし、まだnameの具体的な値が定義されていません。パラメータを定義するには、関数を呼び出すときに値を渡します。例えば、あなたの好きな会社がSnapchatだとしましょう。関数を呼び出す際に、引数として会社名を括弧の中に渡します。

以下がその例です：

// "name"として"Snapchat"を渡してprintCompany()関数を呼び出し
printCompany("Snapchat");

このコードを実行すると、次のように出力されます。

My favorite company is Snapchat!

この例では、printCompany()で関数を呼び出し、括弧の中に名前を渡しています。これで、異なる名前を渡しながら、同じ関数を何度でも再利用できるようになりました。

なお、パラメータはいくつでも設定できます。複数のパラメータを渡した場合は、指定した順番どおりに参照されます。

戻り値

これまでの例では、値を返す代わりにコンソールへテキストを出力してきました。しかし関数では、パラメータを受け取って処理を行い、returnステートメントに基づいて値を返すことも可能です。

以下は、2つの数値を足して合計を返す関数の例です。

function addNumbers(first, second) {
	return first + second;
}

addNumbers(1, 2);

このプログラムでは、関数が呼び出され、2つの数値が渡されます。この関数が実行されると（上の例では最終行）、答えとして3が返されます。パラメータリストはカンマで区切って記述します。

このプログラムは、firstとsecondというパラメータ名で受け取った1と2を加算し、その結果をコードに返しました。戻り値を画面で確認したい場合は、addNumbers(1, 2)を呼び出している行をconsole.log()で囲むようにします。

アロー関数

ECMAScript 6（ES6）以降、関数をより簡潔に定義できる「アロー関数」という記法が導入されました。これは次の矢印式で表されます：=>

アロー関数は関数式の一種です。実際の動作を例で確認してみましょう。

const addNumbers = (first, second) => {
	return first + second;
}

addNumbers(10, 15);

functionキーワードと書く代わりに、矢印記号を使って関数を宣言することを示せます。アロー関数と通常の関数にはいくつか微妙な違いがありますが、ほとんどのユースケースでは意識する必要はありません。

補足として、変数が1つだけの場合は、その変数を囲む括弧を省略できます。また、変数を一切使わない場合は、変数を宣言する位置に空の括弧 () を記述する必要があります。

まとめ

以上が、関数の基本として押さえておきたいポイントのすべてです。このチュートリアルでは、関数宣言、関数式、関数からの値の返却（戻り値）、そしてアロー関数について解説しました。

総じて言えば、関数とはある処理を実行し、値を返すことができるコードブロックのことです。プログラム全体を通して何度も実行する必要のある複数行のコードがある場合、関数が大きな力発揮します。

必要になるたびに毎回同じ複数行のコードを書く代わりに、あらかじめそれらを関数にまとめておけば、コードを実行したいタイミングで関数を呼び出し、必要な値を引数として渡すだけで済みます。

本記事の主なポイント：

• 関数は、特定のコード行を実行するために設計されたサブプログラムである。
• 関数は呼び出されたときにのみ実行される。これを「関数の呼び出し（インボーク）」と呼ぶ。
• 関数には値を渡すことができ、渡された値は関数内で利用できる。
• 関数は値を返す（return）ことができる。