概要
JavaScriptの「関数（function）」は、定義のしかた・定義される位置・利用目的 によって性質が異なります。
本記事では、関数を 「宣言関数」→「関数式」→「アロー関数」→「コンストラクタ関数」 の4分類で整理し、
それぞれの特徴・スコープ・this挙動を具体例で理解します。
目次
- 関数とは
-
JavaScriptにおける関数の4分類
- 宣言関数 (Function Declaration)
- 関数式 (Function Expression)
- アロー関数 (Arrow Function)
- コンストラクタ関数 (Constructor Function) - 分類の関係図
- スコープとthisの違い
- まとめ
- 参考リンク
1. 関数とは
一連の処理をまとめて再利用できる構文。
JavaScriptでは、関数は「第一級オブジェクト (First-class Object)」として扱われます。
function greet(name) {
return `Hello, ${name}`;
}
console.log(greet("Taro")); // "Hello, Taro"
💡 第一級オブジェクトとは？
- 関数を変数に代入できる
- 引数として渡せる
- 戻り値として返せる
2. JavaScriptにおける関数の4分類
宣言関数
functionキーワードで宣言される関数。
スコープの先頭で読み込まれるため、ホイスティングが有効です。
sayHello(); // ← OK（ホイスティングされる）
function sayHello() {
console.log("Hello!");
}
- 定義方法：
function 関数名(...) { ... } - 呼び出し方：
関数名() - 特徴：定義前でも呼び出せる
-
this：呼び出し元のコンテキストを指す（通常はundefined）
💡 特徴
- 再利用に適したベーシックな構文
- モジュールスコープでも利用しやすい
関数式
関数を 変数に代入して定義 する形式。
ホイスティングされず、定義後にのみ呼び出せます。
// sayHello(); ← エラー（定義前）
const sayHello = function() {
console.log("Hello!");
};
sayHello(); // OK
- 定義方法：
const 変数名 = function(...) { ... }; - 呼び出し方：
変数名() - 特徴：式（Expression）として扱われる
-
this：通常の関数同様に動的（呼び出し元による）
💡 特徴
- コールバック関数や即時実行関数（IIFE）によく使われる
- スコープを閉じて安全に扱える
アロー関数
ES6で導入された、短い構文 + 静的
thisを持つ関数式。
関数式と似ていますが、thisの扱いが異なります。
const sayHello = (name) => {
console.log(`Hello, ${name}`);
};
sayHello("Taro");
- 定義方法：
const 変数名 = (引数) => { ... } - 呼び出し方：
変数名() - 特徴：
thisが静的（レキシカルスコープ） - 代表用途：イベントコールバック・配列メソッド内関数・短いロジック
💡 特徴
-
thisが外側スコープを参照するため、クラス内やDOMイベントで便利 - コンストラクタ関数としては使用できない（
new不可）
コンストラクタ関数
newキーワードと共に使用し、オブジェクトを生成する 特別な関数。
クラス構文が登場する前のオブジェクト生成手法です。
function User(name) {
this.name = name;
}
const user1 = new User("Taro");
console.log(user1.name); // "Taro"
- 定義方法：
function 関数名(引数) { this.プロパティ = 値; } - 呼び出し方：
new 関数名() -
this：生成された新しいオブジェクトを指す - 代表例：
Date(),Promise(), 独自クラス風実装
💡 特徴
- クラス構文（
class）の前身 -
prototypeを通じてメソッドを共有できる
まとめ
| 分類 | 主な定義方法 | 主な活用シーン（実務例） |
|---|---|---|
| 宣言関数 | function fetchData() { ... } |
共通処理・再利用ロジック API通信や計算処理など、複数箇所で呼び出す汎用関数に最適。 例） function calculateTax(price) { return price * 1.1; }
|
| 関数式 | const handleClick = function() { ... } |
ローカル関数・コールバック処理 setTimeoutやイベント処理など、そのスコープ内限定の用途。 例） setTimeout(function(){ console.log("done"); }, 1000);
|
| アロー関数 | const sum = (a, b) => a + b; |
短い処理・Reactや配列操作 React Hooks、map/filterなどの反復処理や簡潔なコールバックに最適。 例） fruits.map(f => f.toUpperCase()) / button.onclick = () => setOpen(true)
|
| コンストラクタ関数 | function User(name) { this.name = name;}const u = new User("Taro"); |
オブジェクト生成・クラス設計class導入以前のOOP手法。オブジェクトを生成して状態を持たせる用途。例） function Car(model) { this.model = model; } / new Car("Tesla")
|