プログラミングの「関数」とは？自販機の例で図解

2026年8月3日

どうも、くじらいどです。

変数の次に出てくるのが「関数」です。数学の授業を思い出して身構える人も多いと思うのですが、プログラミングの関数は自動販売機だと思うとだいぶ気が楽になります。

お金を入れてボタンを押すと、ジュースが出てくる。何を入れたら何が出てくるかだけ決まっていて、中で何をしているかは知らなくても使える。関数もそういうものです。

くじらいど

実は、スプレッドシートの SUM() を使ったことがあるなら、もう関数は使えています。

結論：入れたら出てくる、処理のまとまり

関数は、何かを受け取って、決まった処理をして、結果を返すまとまりです。一度作っておけば、名前を呼ぶだけで何度でも同じ処理が使えます。

実はもう使っています

関数を「これから覚えるもの」と思うとしんどいのですが、実は普段からたくさん使っています。

見たことがある書き方	入れるもの	出てくるもの
`SUM(A1:A10)`（スプレッドシート）	足したいセルの範囲	合計
`Math.round(3.7)`（JavaScript）	小数	四捨五入した数（4）
`console.log("あ")`	表示したい文字	画面への出力

共通しているのは、名前のうしろに丸かっこがあって、その中に何かを入れているところです。この形を見たら関数だと思って大丈夫だと思います。

今回やるのは、こういう自販機を自分で作る話です。

なぜ自分で作るのか（同じ計算を3回書く問題）

商品3つの税込価格を出したいとします。関数を使わずに書くと、こうなります。

// 関数なし：同じ計算を3回書いている
console.log(Math.floor(980 * 1.1));
console.log(Math.floor(1500 * 1.1));
console.log(Math.floor(3200 * 1.1));

動くのですが、消費税が10%から変わったときに、1.1 と書いた場所を全部直すことになります。関数にまとめると、こうなります。

// 税込価格を出す関数を1つ作る
function taxIncluded(price) {
  return Math.floor(price * 1.1);
}

// あとは呼ぶだけ
console.log(taxIncluded(980));
console.log(taxIncluded(1500));
console.log(taxIncluded(3200));

▼ 実行結果（どちらのコードも同じ結果になります）

コンソールの出力

  1078
1650
3520

結果は同じですが、税率を変えるときに直す場所が違います。

× 関数なし｜直すのは3か所

Math.floor(980 * 1.1)
Math.floor(1500 * 1.1)
Math.floor(3200 * 1.1)

増えるほど直す場所も増える

◯ 関数あり｜直すのは1か所

return Math.floor(price * 1.1);

taxIncluded(980)
taxIncluded(1500)
taxIncluded(3200)

100か所で呼んでいても直すのは1行

それに taxIncluded(980) と書いてあれば、読んだ人に「税込価格を出しているんだな」と一目で伝わります。Math.floor(980 * 1.1) だと、何をしているのか一度考えないと分かりません。

関数の書き方を分解する

さっきの関数を、パーツごとに色を分けてみます。ここが読めれば、他の人が書いた関数もだいたい追えるようになると思います。

function taxIncluded(price) {
  return Math.floor(price * 1.1);
}

function「ここから関数を作ります」という合図

taxIncluded関数の名前。あとでこの名前で呼び出す

price受け取るもの＝引数（自販機のお金）

return「これを返します」という合図

Math.floor(…)返す中身＝返り値（出てくるジュース）

受け取るものを引数（ひきすう）、返すものを返り値（かえりち）と呼びます。言葉が硬いだけで、入れるものと出てくるものと読み替えて問題ないと思います。

引数を変えれば結果も変わります。taxIncluded(980) と書けば price の中身が980になり、taxIncluded(1500) と書けば1500になる。丸かっこに入れたものが、そのまま箱に入ると思ってください。

引数は複数でもいい

カンマで区切れば、いくつでも受け取れます。

// 単価と個数を受け取って、税込の合計を返す
function total(price, count) {
  return Math.floor(price * count * 1.1);
}

console.log(total(980, 3));    // 単価980円を3個
console.log(total(1500, 2));   // 単価1500円を2個

▼ 実行結果

コンソールの出力

  3234
3300

渡す順番が大事です。total(3, 980) と逆に書いても計算自体は通ってしまうので、順番を間違えると気づかないまま変な数字が出ます。ここは自分もよくやります。

よくあるつまずき：return を書き忘れる

関数を作ったのに結果が undefined（中身なし）になる、というのが最初の関門だと思います。だいたい return の書き忘れです。

× return がない

function taxIncluded(price) {
  Math.floor(price * 1.1);
}
console.log(taxIncluded(980));

undefined

計算はしたが、何も返していない（自販機の中でジュースを作って、出さずに置いている状態）

◯ return がある

function taxIncluded(price) {
  return Math.floor(price * 1.1);
}
console.log(taxIncluded(980));

1078

ちゃんと取り出し口から出てきた

Point

undefined が出たら「返し忘れ」を疑う、と覚えておくと解決が早いです。ちなみに画面に表示するだけの関数など、返すものが無い関数もあるので、return は必ずしも要るわけではありません。

用語の正体（何の略なのか）

用語	正式名称	直訳
関数	function	機能・働き
引数	argument / parameter	渡すもの・受け取る側の名前
返り値	return value	返ってくる値
呼び出す	call	（関数を）呼ぶ