なぜJavaScriptでは関数を変数に入れるのか？―新人エンジニアのためのやさしい仕組み解説
山崎講師
こんにちは。ゆうせいです。
JavaScriptを勉強していると、こんな書き方を目にすることがありますよね。
const greet = function () {
console.log("こんにちは！");
};
「えっ？関数って普通 function greet() { ... } みたいに書くんじゃないの？」
「なんで関数を変数に入れるの？意味あるの？」
そう感じた新人エンジニアのあなたへ。
実はこれは、JavaScriptの柔軟性と関数の“特別な性質”に関係があります。
今回は、「なぜ関数を変数に入れるのか？」という疑問を、基礎からわかりやすく解説していきます！
JavaScriptでは関数も「値」だから！
まず前提として、JavaScriptでは関数は「値（value）として扱える」ものなんです。
つまり、数値や文字列と同じように、変数に代入したり、引数に渡したり、戻り値にしたりできるんです！
このような性質を「ファーストクラス関数（first-class function）」といいます。
例：関数を変数に入れるとは？
const greet = function () {
console.log("こんにちは！");
};
greet(); // → こんにちは！
ここでやっているのは、無名関数（名前のない関数）をgreetという変数に入れているということです。
これにより greet は関数として機能します。
関数を変数に入れるメリット
1. 関数を柔軟に扱える（再利用・動的切り替え）
let sayHi = function () {
console.log("Hi!");
};
sayHi(); // Hi!
sayHi = function () {
console.log("Hello!");
};
sayHi(); // Hello!
関数の中身を切り替えられるって、便利だと思いませんか？
2. 他の関数に渡せる（コールバック関数）
function processGreeting(greetingFunc) {
greetingFunc();
}
const sayHello = function () {
console.log("Hello!");
};
processGreeting(sayHello); // Hello!
これはまさに 「関数を引数に渡す」＝コールバック関数 の基本です。
3. 関数を戻り値として返せる（関数を作る関数）
function createGreeter(name) {
return function () {
console.log("こんにちは、" + name + "さん！");
};
}
const greetTaro = createGreeter("太郎");
greetTaro(); // こんにちは、太郎さん！
これは「クロージャ（Closure）」の概念にもつながっていきます！
関数式と関数宣言の違いは？
| 項目 | 関数宣言（function） | 関数式（変数に入れる） |
|---|---|---|
| 書き方 | function greet() {} | const greet = function () {} |
| hoisting（巻き上げ） | ○（先に呼び出せる） | ×（定義より前はエラー） |
| 柔軟性 | △（上書きできない） | ◎（代入・切り替え可能） |
関数を変数に入れると何ができるのか？（例えで理解）
関数を変数に入れることは、**「道具（関数）を箱（変数）に入れて持ち運べるようにする」**イメージです。
たとえば：
- 工具箱（変数）にドライバー（関数）を入れておくと、好きなときに取り出して使える
- 必要に応じて工具を入れ替えることもできる
この道具箱的な柔軟さが、JavaScriptの強みです！
まとめ：JavaScriptでは関数は「値」として使えるから変数に入れる！
- 関数は変数に代入できる
- 柔軟に切り替え・渡し・返すことができる
- コールバック関数やクロージャの基礎になる考え方
- ファーストクラス関数という、JavaScriptの重要な特徴のひとつ
今後の学習のヒント
関数を変数に入れるスタイルを理解したら、次は以下のテーマも学んでみましょう！
- アロー関数（=>）の書き方と関数式との違い
- 高階関数（Higher-Order Function）
- クロージャ（Closure）のしくみ
- 関数の引数として関数を渡すテクニック（コールバック、Promise）
この概念をマスターすると、関数を「組み立てる・渡す・返す」高度な表現力が身につきます！
「関数を変数に入れる」という考え方は、JavaScriptを理解するうえで超重要な一歩ですよ！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール