「JavaScriptの関数って、正直なんとなくしか分かってないかも…」
そう感じたこと、ありませんか？
Web制作やフロントエンド開発を学び始めると、必ずぶつかるのが「関数」という壁。
書けるようにはなったけれど、「宣言と式の違い」「アロー関数の使いどころ」「スコープやクロージャの仕組み」になると、急に難しく感じてしまう人も多いはずです。
でも安心してください。
この記事では、関数の基本から応用までを、“腑に落ちる”順番で丁寧に解説します。
✔️ Web制作・フロントエンドを仕事にしたい
✔️ JavaScriptを基礎からやり直したい
✔️ Reactなどのフレームワークに進む前に土台を固めたい
そんなあなたにこそ、最後まで読んでほしい内容です。
目次
1. 関数とは？ —「同じ処理をまとめて名前をつける」
関数（function）とは、「一連の処理をひとまとめにして、名前をつけて再利用できる」仕組みのことです。
たとえば「挨拶を表示する」「合計を出す」など、何度も使う処理を関数にまとめると、コードが整理され、保守がとても楽になります。
function greet(name) {
return `こんにちは、${name}さん！`;
}
console.log(greet("アキラ")); // → こんにちは、アキラさん！✅ ポイント：
関数を使うと「何をしているか」が明確になるため、後から読んだ人にも理解しやすくなります。
2. 関数の書き方 — 3つの主要な定義方法
2-1. 関数宣言（最も一般的）
function add(a, b) {
return a + b;
}
console.log(add(3, 4)); // 7
functionキーワードで始まり、定義より前でも呼び出せるのが特徴です（「巻き上げ＝ホイスティング」）。
ただし可読性のため、基本的には定義を上に書くのがおすすめです。
2-2. 関数式（変数に関数を代入）
const mul = function (a, b) {
return a * b;
};
この形は「関数も値の一種」というJavaScriptの特徴を活かした書き方です。
代入前に呼び出すとエラーになる点に注意してください。
関数式は、動的に関数を切り替えたり、引数として関数を渡すときによく使われます。
2-3. アロー関数（短く・シンプルに書ける）
const div = (a, b) => a / b;
functionを省略し、=>（矢印）で定義するモダンな書き方。
短いコールバック関数や無名関数を定義する場面で便利です。
⚠️ 注意：
アロー関数は「this」を持たず、外側のthisを参照します。そのため、オブジェクトのメソッド定義には不向きなことがあります。
3. 引数の使い方 — 柔軟で便利な指定方法
3-1. デフォルト引数
function greetUser(name = "ゲスト") {
console.log(`こんにちは、${name}さん！`);
}
greetUser(); // こんにちは、ゲストさん！
値が渡されなかったときの“保険”として、初期値を設定できます。
3-2. 可変長引数（restパラメータ）
const sum = (...nums) => nums.reduce((total, n) => total + n, 0);
console.log(sum(2, 4, 6, 8)); // 20
引数がいくつでもOK。...を使うと配列として受け取れます。
3-3. 分割代入（オブジェクトをそのまま引数に）
function showProfile({ name, age }) {
console.log(`${name}さんは${age}歳です`);
}
showProfile({ name: "ユウキ", age: 28 });
オブジェクトの中身をわかりやすく取り出せるテクニックです。
Reactなどのフレームワークでも頻出します。
4. 戻り値（return）の仕組み
function getDiscount(price) {
if (price > 10000) return "10% OFF";
return "対象外";
}
console.log(getDiscount(12000)); // 10% OFF
returnで関数の結果を外へ返します。returnの後の処理は実行されないため、「早期リターン」で条件を明確にするのが良い書き方です。
5. スコープ（変数の有効範囲）
スコープとは「変数が使える範囲」のこと。let・constはブロック単位、varは関数単位で有効です。
function example() {
let x = 10;
if (true) {
let y = 20;
console.log(x + y); // OK
}
// console.log(y); // ❌ エラー：スコープ外
}💡 ポイント：varは古い仕様なので、基本的にletかconstを使うのが現代的です。
6. thisのふるまい — function とアローの違い
const obj = {
count: 0,
normal: function () { return this.count; },
arrow: () => this.count
};
console.log(obj.normal()); // 0
console.log(obj.arrow()); // undefined
アロー関数は「外側のthis」を参照するため、オブジェクト内で使うとundefinedになることがあります。
メソッドとして使う場合はfunction式を使いましょう。
7. コールバックと高階関数
関数は値なので、他の関数に「渡す」こともできます。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
.map()や.filter()などは、関数を引数として受け取る「高階関数」です。
慣れてくるとコードの見通しが圧倒的に良くなります。
8. クロージャ — 外の変数を“覚えている”関数
function counter() {
let count = 0;
return () => ++count;
}
const click = counter();
console.log(click()); // 1
console.log(click()); // 2
関数が「定義されたときのスコープ」を保持するため、外の変数を覚え続けます。
状態管理やモジュールパターンに応用できます。
9. 即時実行関数（IIFE）
(() => {
console.log("最初に一度だけ実行");
})();
一度だけ実行したい初期化処理などで使用します。
グローバル変数を汚さない安全な書き方です。
10. 非同期関数（async / await）
async function fetchData() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
console.log(data);
}
fetchData();
asyncをつけると、関数の中でawaitが使えます。
非同期処理を「同期的」に書けるため、コールバック地獄を避けられます。
11. 実務で使える関数の書き方ルール
constをデフォルトで使う- 関数名は「動詞＋目的語」（例：
getUserInfo） - 1つの関数に1つの責務（SRP原則）
- コールバックにはアロー関数を使って可読性を上げる
forEachよりmapやfor...ofを優先
まとめ
関数を使いこなすことは、JavaScriptの第一歩。
書き方（宣言・式・アロー）、引数の柔軟性、スコープ、クロージャ、非同期処理などを理解すると、コードの品質が飛躍的に上がります。
