こんにちは、かつコーチです。
前回はオブジェクトの基本を解説しました。
今回は、プログラミングの基礎の中でも特に重要な「関数」について解説します。
関数を使いこなせるようになると、同じ処理を何度も書かずに済み、コード全体がぐっと整理されます。
関数とは？
処理をひとまとめにして名前をつけるもの
関数（Function） とは、複数の処理をひとまとめにして、名前をつけて再利用できるようにしたものです。
たとえば「税込み価格を計算する処理」を何度も使うとします。
関数を使わないと、同じ計算式をあちこちに書くことになります。
const priceA = 1000 * 1.1;
const priceB = 2000 * 1.1;
const priceC = 3000 * 1.1;
これを関数にまとめると、次のようにすっきり書けます。
function calcTaxIncludedPrice(price) {
return price * 1.1;
}
const priceA = calcTaxIncludedPrice(1000);
const priceB = calcTaxIncludedPrice(2000);
const priceC = calcTaxIncludedPrice(3000);
「同じ処理を2回以上書きそうになったら関数にする」というのは、コードを整理するうえでの基本の考え方です。
なぜ関数が重要なのか
関数を使うメリットは主に3つあります。
- 再利用性：同じ処理を何度も書かずに済む
- 可読性：処理に名前がつくことで、コードの意図が伝わりやすくなる
- 保守性：処理を修正するとき、関数の中身を直せば全ての呼び出し箇所に反映される
特に「保守性」は実務で強く実感するポイントです。
税率が10%から変わった場合、関数化しておけば1箇所直すだけで済みますが、あちこちにベタ書きしていると全て探して直す必要があります。
関数の基本的な作り方
function文での定義
もっとも基本的な関数の書き方は function キーワードを使う方法です。
function greet(name) {
return `こんにちは、${name}さん！`;
}
const message = greet("かつコーチ");
console.log(message); // こんにちは、かつコーチさん！
function 関数名(引数) { 処理 } という形が基本の型です。
関数式での定義
関数を変数に代入する形で定義することもできます。
const greet = function (name) {
return `こんにちは、${name}さん！`;
};
console.log(greet("かつコーチ")); // こんにちは、かつコーチさん！
function 文との違いは、巻き上げ（hoisting） の扱いです。
function 文は定義より前の場所からでも呼び出せますが、関数式は定義された行より前では呼び出せません。
console.log(sayHi()); // 動く（function文は巻き上げられる）
function sayHi() {
return "hi";
}
console.log(sayBye()); // エラー：Cannot access 'sayBye' before initialization
const sayBye = function () {
return "bye";
};
引数と戻り値をしっかり理解する
引数：関数に渡すデータ
引数（ひきすう） とは、関数の外から中に渡す値のことです。
function add(a, b) {
return a + b;
}
console.log(add(3, 5)); // 8
引数は複数指定でき、呼び出し側で渡した値が順番に対応します。
デフォルト引数
引数が渡されなかった場合に使う「初期値」を設定することもできます。
function greet(name = "ゲスト") {
return `こんにちは、${name}さん！`;
}
console.log(greet("かつコーチ")); // こんにちは、かつコーチさん！
console.log(greet()); // こんにちは、ゲストさん！（引数を省略）
「引数が省略されるかもしれない関数」を作るときは、デフォルト引数を使うことで undefined によるエラーを未然に防げます。
戻り値：関数から返ってくる値
戻り値（もどりち） とは、return によって関数の外に返される値のことです。
function multiply(a, b) {
return a * b;
}
const result = multiply(4, 5);
console.log(result); // 20
return が実行されると、その時点で関数の処理は終了します。
return 以降に書いたコードは実行されないので注意が必要です。
function checkAge(age) {
if (age >= 20) {
return "成人です";
}
return "未成年です";
console.log("この行は絶対に実行されない"); // 到達しない
}
つまずきやすいポイント：戻り値のないつもり違い
console.logと勘違いしてハマった話
私が関数を学び始めたころ、return を書き忘れて何時間も原因を探した経験があります。
❌ Before：return を書かず console.log だけで済ませる
function calcTaxIncludedPrice(price) {
console.log(price * 1.1); // 画面には表示されるが…
}
const total = calcTaxIncludedPrice(1000);
console.log(total); // undefined（戻り値がないため）
console.log は画面（コンソール）に値を表示するだけの命令で、関数の外に値を渡す（返す）機能はありません。
calcTaxIncludedPrice(1000) を呼んだときにコンソールに数字が表示されるので、一見「ちゃんと動いている」ように見えてしまい、total が undefined になっている原因になかなか気づけませんでした。
✅ After：return で値を関数の外に返す
function calcTaxIncludedPrice(price) {
return price * 1.1; // 値を関数の外に返す
}
const total = calcTaxIncludedPrice(1000);
console.log(total); // 1100（正しく値を受け取れる）
「この関数は画面に表示するだけなのか、それとも値を返してほかの処理で使いたいのか」を意識して return の有無を決める癖をつけると、この手のミスは防げます。
応用：関数を値として扱う
関数を別の関数に渡す（コールバック関数）
JavaScriptでは、関数を「値」として変数に入れたり、ほかの関数の引数として渡したりできます。
これを コールバック関数 と呼びます。
function processArray(array, callback) {
const result = [];
for (const item of array) {
result.push(callback(item));
}
return result;
}
function double(num) {
return num * 2;
}
const numbers = [1, 2, 3];
const doubled = processArray(numbers, double);
console.log(doubled); // [2, 4, 6]
実は、前々回に解説した map() や filter() の引数に渡していた (item) => { ... } も、まさにこのコールバック関数の考え方そのものです。
「関数の中に関数を渡す」という発想に慣れておくと、次回解説する アロー関数 の理解もスムーズになります。
まとめ
この記事のポイント
- 関数は処理をひとまとめにして再利用できるようにするもの。同じ処理を2回以上書きそうなら関数化を検討する
function文と関数式では、巻き上げ（定義より前から呼べるか）に違いがある- 引数は関数に渡すデータ、戻り値は
returnで関数の外に返す値 console.logは画面に表示するだけで、値を関数の外に返す機能はない。値を使い回したいならreturnが必須- 関数は値として扱え、ほかの関数の引数として渡すコールバック関数もよく使われる
次に読むべき記事
関数の基本が身についたら、次はより短く書ける「アロー関数」の書き方を見ていきましょう。
→ 次の記事：アロー関数をわかりやすく解説