JavaScriptにおいて、関数はコードの再利用性を高め、プログラムの可読性や保守性を向上させる重要な要素です。本記事では、JavaScriptの関数の基本から、さまざまな種類、使い分け、応用例 まで詳しく解説していきます。
[目次を開く]
1. 関数とは？
関数（function） とは、一連の処理をまとめて名前をつけたものです。関数を定義すると、同じ処理を何度も書く必要がなくなり、コードの管理がしやすくなります。
2. 関数の基本的な作り方
JavaScriptの関数の作り方には、主に以下の3つの方法があります。
(1) 関数宣言（Function Declaration）
最も基本的な関数の定義方法です。function キーワードを使って定義します。
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // "Hello, Alice!"
✅ 特徴
-
functionキーワードで定義 - ホイスティング（巻き上げ）が適用される
- 関数の宣言がスクリプトの先頭に持ち上げられるため、関数を定義前に呼び出せる
sayHello(); // "Hello!"
function sayHello() {
console.log("Hello!");
}
(2) 関数式（Function Expression）
関数を変数に代入する形で定義します。
const add = function (a, b) {
return a + b;
};
console.log(add(2, 3)); // 5
✅ 特徴
- ホイスティングの影響を受けない
- 関数宣言と異なり、定義前に呼び出すとエラーになる
console.log(multiply(2, 3)); // ❌ エラー
const multiply = function (a, b) {
return a * b;
};
(3) アロー関数（Arrow Function）
ES6 で導入された新しい関数の記法です。簡潔に記述でき、thisの挙動が異なる のが特徴です。
const square = (x) => x * x;
console.log(square(4)); // 16
✅ 特徴
-
functionキーワード不要で、短く書ける - thisの挙動が異なる（後述）
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob")); // "Hello, Bob!"
3. 関数のパラメータとデフォルト値
関数の引数（パラメータ）にはデフォルト値を設定できます。
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
console.log(greet()); // "Hello, Guest!"
console.log(greet("Charlie")); // "Hello, Charlie!"
✅ デフォルト値を活用することで、関数の汎用性を高められる
4. コールバック関数（Callback Function）
関数を引数として別の関数に渡すことができます。これを コールバック関数 と呼びます。
function executeCallback(callback) {
console.log("Executing callback...");
callback();
}
executeCallback(() => console.log("Hello from callback!"));
✅ コールバック関数の利用例
- 配列のメソッド (
map,filter,forEachなど) で活用される
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]
5. 即時実行関数（IIFE）
関数を定義すると同時に実行する方法 です。主に、スコープを汚染しないために使用されます。
(function () {
console.log("IIFE executed!");
})();
✅ メリット
- グローバルスコープを汚さない
- 変数の衝突を防ぐ
6. 関数と this の関係
JavaScriptでは this の挙動が関数の定義方法によって異なります。
通常の関数 (function キーワード)
通常の関数では this は 呼び出し元のオブジェクト を指します。
const obj = {
name: "Alice",
sayHello: function () {
console.log(`Hello, ${this.name}!`);
}
};
obj.sayHello(); // "Hello, Alice!"
アロー関数 (=>)
アロー関数では this は定義時のスコープを保持するため、オブジェクトのメソッドには向きません。
const obj2 = {
name: "Bob",
sayHello: () => {
console.log(`Hello, ${this.name}!`);
}
};
obj2.sayHello(); // "Hello, undefined!"
✅ アロー関数はオブジェクトのメソッドには向かない
➡ function キーワードを使うべき。
7. 高階関数（Higher-Order Function）
関数を引数に取ったり、関数を返したりする関数 を高階関数と呼びます。
function createMultiplier(multiplier) {
return function (num) {
return num * multiplier;
};
}
const double = createMultiplier(2);
console.log(double(5)); // 10
✅ メリット
- 関数の再利用性を向上
- 柔軟な関数の組み合わせが可能
まとめ
| 関数の種類 | 特徴 |
| 関数宣言 | function キーワードで定義。ホイスティングが適用される |
| 関数式 | const などの変数に代入。ホイスティングなし |
| アロー関数 | => で定義。短く書けるが、this の挙動が異なる |
| コールバック関数 | 引数として関数を渡す。配列のメソッドで活用 |
| 即時実行関数 | 定義と同時に実行。スコープを汚染しない |
| 高階関数 | 関数を引数に取る、または関数を返す関数 |
JavaScriptの関数を使いこなせるようになると、より効率的で読みやすいコードが書けるようになります！
ぜひ活用してみてください。🚀
