JavaScriptの関数を、初心者向けにやさしく解説
はじめてのプログラミングは「わかったつもり」が続きやすいもの。関数は“作業の箱”だと思うとスッと入ってきます。箱に「名前」を付けて、「材料（引数）」を入れると、「結果（戻り値）」が返ってくる——そんなイメージで一歩ずついきましょう。
関数ってなに？
- 役割: 処理をひとまとめにして、好きなタイミングで何度でも呼び出せる“再利用できる箱”。
- メリット: 同じコードを繰り返し書かなくて済む。ミスが減り、読みやすくなる。
- 基本の形:
function 関数名(引数1, 引数2) {
// やりたい処理
return 戻り値; // 必要なときだけ返す
}
作って呼び出すまでの流れ
- 関数を作る（定義）
function sayHello() {
console.log("こんにちは！");
}
- 関数を使う（呼び出し）
sayHello(); // 関数名に()を付ける。ここで初めて動く
- 引数を使う（材料を渡す）
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
greet("田中"); // → こんにちは、田中さん！
- 戻り値を返す（結果を受け取る）
function add(a, b) {
return a + b; // 計算した結果を返す
}
const sum = add(3, 5);
console.log(sum); // → 8
例題で理解を固める
例題1: 合計と平均を計算する関数
- ねらい: 引数と戻り値の使い方に慣れる
function totalAndAverage(scores) {
// scores は数値の配列 [80, 90, 70] など
let total = 0;
for (let i = 0; i < scores.length; i++) {
total += scores[i];
}
const average = total / scores.length;
// 結果をまとめて返す（オブジェクトで返すと便利）
return { total: total, average: average };
}
const result = totalAndAverage([80, 90, 70]);
console.log("合計:", result.total); // → 合計: 240
console.log("平均:", result.average); // → 平均: 80
例題2: メッセージを何回も表示する関数
- ねらい: 引数の型・繰り返しを理解する
function repeatMessage(message, times) {
for (let i = 0; i < times; i++) {
console.log(message);
}
}
repeatMessage("頑張れ！", 3);
// → 頑張れ！ (3回表示)
例題3: 条件で動きを変える関数
- ねらい: if 文と戻り値の組み合わせ
function judgePass(score) {
if (score >= 60) {
return "合格";
} else {
return "不合格";
}
}
console.log(judgePass(75)); // → 合格
console.log(judgePass(50)); // → 不合格
よくあるつまずきポイント
- ラベル: 引数の順番
- 間違えると別の値として扱われる。関数側の引数名と呼び出しの順は一致させる。
- ラベル: return の位置
- return の後は実行されない。早めに返すなら「早期 return」を意識。
function isAdult(age) {
if (age < 0) return "年齢が不正です";
return age >= 18 ? "成人" : "未成年";
}
- ラベル: 関数を“呼ぶ”のを忘れる
- 関数名だけでは動かない。必ず
()を付けて呼び出す。
- 関数名だけでは動かない。必ず
- ラベル: console.log と戻り値の違い
- console.log は画面に表示するだけ。戻り値は「後で使うために外へ返す」もの。
もう少しだけ発展（使い分け）
- ラベル: 関数宣言（いちばん基本）
function add(a, b) { return a + b; }
- ラベル: 関数式（変数に入れる）
const add = function(a, b) { return a + b; };
- ラベル: アロー関数（短く書ける）
const add = (a, b) => a + b; // 1行で戻り値
- まずは「関数宣言」で慣れてから、必要に応じてアロー関数へ。読みやすさを最優先に。
練習問題
- 問題1: 最小値を返す
- 2つの数
x, yを受け取り、小さい方を返す関数min(x, y)を作る。
- 2つの数
function min(x, y) {
// ここに処理
}
- 問題2: 税込価格を計算
- 価格
priceと税込率taxRate（例: 0.1）を受け取り、税込価格を返すwithTax(price, taxRate)。
- 価格
function withTax(price, taxRate) {
// ここに処理
}
- 問題3: 文字数カウント
- 文字列
strを受け取り、空白を除いた文字数を返すcountChars(str)。
- 文字列
function countChars(str) {
// ここに処理
}
- ヒントが欲しければ、あなたの解答を書いてくれたら添削するよ。間違いは“次に進むサイン”だから、遠慮なく見せて。
まとめ
- ラベル: 関数の核心
- 「名前のついた処理の箱」。材料（引数）を受け取り、結果（戻り値）を返す。
- ラベル: スタート地点
- まずは関数宣言で「定義→呼び出し→引数→戻り値」の流れを体に覚えさせる。
- ラベル: 実践
- 小さな関数を作って、何度も呼ぶ。自分の生活のミニ課題（合計、判定、変換）を関数化してみると、腑に落ちる。
