関数かんすう

やさしい日本語で学ぶ JavaScript の「関数かんすう」ガイド

皆さん、こんにちは。JavaScriptを勉強中の留学生の皆さんにとって、一番大切な道具（どうぐ）のひとつが 「関数かんすう」 です。 関数かんすうを使いこなせると、プログラムを整理（せいり）して、賢（かしこ）く書くことができます。

実は、今までにも、関数かんすうは使っていました。alert(), Number()などは、あらかじめJavaScriptが用意している関数かんすうです。

一緒に学んでいきましょう。

I. 用語の整理

関数かんすうについて説明する前に、整理しておきたい言葉があります。前に出てきた言葉ですが、ここで復習しておきましょう。

プログラミングを勉強していると、漢字が並んでいて難むずかしく感じますよね。「演算えんざん子」 と 「式」 と 「文」 です。これらは、プログラミングの 「文法（ぶんぽう）」 の名前です。そして、どれもプログラムの動うごきを書くためのものです。

日本語の「単語（たんご）」「句（く）」「文（ぶん）」の違いに似ています。

わかりやすく「料理りょうり」に例たとえて説明しますね。

演算えんざん子（えんざんし）／ Operator

→「道具（どうぐ）」のこと

数字を足したり、比べたりするための「記号（きごう）」です。そのときにも 「料理の道具」のようなもの と説明したのは、覚えているでしょうか？

• 例れい： +, -, *, /, =, >, &&
• 料理でいうと： 包丁ほうちょう（ほうちょう）、お鍋なべ（なべ）、フライパン

しかし、道具を用意しただけでは何も起きません。道具を使って何かをする必要があります。

式（しき）／ Expression

→「計算けいさんのフレーズ」のこと

演算えんざん子（道具）を使って、「答え（値）」を出すものです。

• 例れい： 10 + 5 （答えは15）、a == b （答えは「はい」か「いいえ」）
• 料理でいうと： 「野菜（やさい）を切る」「お肉を焼く」
• 何かのアクションをして、「切った野菜」という結果が生まれます。

文（ぶん）／ Statement

→「コンピューターへの 命令めいれい」のこと

「〜をしてください」という、ひとつの完璧かんぺきな指示 です。

JavaScriptでは、最後にセミコロン ; をつけます。

• 例れい： let x = 10 + 5; （xという箱に、15を入れてください！）
• 料理でいうと： 「カレーを作ってください！」
• 道具（演算えんざん子）を使い、ステップ（式）を組くみ合あわせて、**ひとつの仕事（文）**を終わらせます。

まとめの比較表

Tip

見分みわけかたのコツ： 最後に ;（セミコロン）がついているものは、ほとんどの場合 「文」 です。日本語の「。」（まる）と同じです。

II. 関数かんすうとは何か？

「関数かんすう」は、プログラミングの中でとても便利な 「魔法まほうの箱」 や 「自動販売機じどうはんばいき」 のようなものです。

漢字で見ると難むずかしそうですが、その中身は、いくつかの 「文」 をひとつ（ひとつ）にまとめた 「セット」 です。とてもシンプルですよ！

関数かんすうは「料理マシン」と同じ！

関数かんすうをイメージするときは、キッチンにある「ジューサー（ミキサー）」を思い出してください。

1. 入れるもの（引数ひきすう：ひきすう）： リンゴを入れる。
2. 中での仕事（処理：しょり）： リンゴを細かくつぶす。
3. 出てくるもの（戻もどり値ち：もどりち）： リンゴジュースが出てくる！

一度この「マシン」を作っておけば、次からは「リンゴ」を入れるだけで、いつでもリンゴジュースを作れます。それだけでなく、「オレンジ」や「バナナ」を入れれば、オレンジジュースやバナナジュースを作ることもできるのです。

こんどは、「自動販売機（じどうはんぱいき）」 に例たとえで見ます。

• お金を入れる・ボタンを押す： これが、関数かんすうに渡わたすデータ 「引数ひきすう（ひきすう）」 です。
• 飲み物が出る： これが、命令を実行した結果けっかである 「戻もどり値ち（もどりち）」 です。

自動販売機の中には、「お金を数える」「在庫ざいこ（ざいこ）を確認する」といった複雑（ふくざつ）なプログラムが入っています。でも、私たちは「ボタンを押す」というひとつの命令だけで、欲しい結果を受け取ることができます。

なぜ「関数かんすう」を使うの？

同じコードを何度も書くのは大変だし、間違いのもとです。関数かんすうを使うメリットは2つあります。

• 楽ができます： 一度作れば、名前を呼ぶだけで何度でも使えます。同じことを何度も書かなくてよくなります。
• 直しやすくなります： 挨拶の言葉を変えたいとき、1ヶ所（関数かんすうの中）を直すだけで全部変わる。
• **整理しやすくなります： 長いコードがスッキリします。

次は、この便利な「関数かんすう」をどうやって作るのか、ルールを見ていきましょう。

III. 関数かんすうの作り方（定義ていぎ：ていぎ）

関数かんすうを新しく作ることを「定義ていぎ（ていぎ）」と言います。 JavaScriptでは、誰が見ても分かりやすいように、名前の付け方に世界共通のルールがあります。

基本の書かき方かた

以下のキーワードと記号を組くみ合あわせて作ります。

• function： 「今から関数かんすうを作ります」という合図（あいず）です。
• 関数かんすう名： そのセットに付ける名前です。
• ()： 引数ひきすう（データ）を受け取るための場所です。
• {}： この中に、実行したい命令をすべて書きます。これを「ブロック」と呼びます。

良い名前をつけるルール

プログラマーは、関数かんすうが「何をするものか」すぐ分かるように、以下のルールを守ります。

1. 動詞（どうし）から始める： get（取る）、show（見せる）、calculate（計算する）、handle（処理する）などの動詞を使います。
2. キャメルケース（camelCase）： 2つ目以降の単語の最初を大文字にします。例れい：showMessage, calculateTotal

コードの例れい

「挨拶（あいさつ）をしてくれるマシン」を作ってみましょう。

// 準備: 関数（かんすう）を定義（ていぎ）する
function sayHello() {
  console.log("こんにちは！JavaScriptの世界へようこそ。");
}

これで「準備」ができました。次は、これを目的に合わせて「動かす」方法を説明します。

IV. 関数かんすうの呼び出し（実行：じっこう）

関数かんすうを作っただけでは、プログラムは動うごきません。作った関数かんすうを動かすことを 「呼び出し」 と言います。初心者しょしんしゃの方は「定義ていぎ（準備）」と「呼び出し（実行）」を分けて考えることがとても大切です。

呼び出しの仕組しくみ

関数かんすう名のあとに () をつけると、中身が動うごき出します。 sayHello(); と書くと、先ほど {} の中に書いたメッセージが表示ひょうじされます。

イベントとの連携（れんけい）

ウェブページでは、ボタンをクリックした時に関数かんすうを呼び出すことが多いです。これを 「イベントハンドラ」 と言います。

HTMLとJavaScriptのつながり

[ HTML側 ]

<button onclick="sayHello()">ボタンを押してね</button>

↓

(クリックされると、関数（かんすう）を呼び出す)

↓
[ JavaScript側 ]

function sayHello() {
    alert("こんにちは！");
}

実際、どんなふうになるか見てみましょう。下のボタンを押してみてください。

ボタンを押してね

V. 引数ひきすう（ひきすう）の活用と注意点

今度は引数ひきすうをとる関数かんすうを作ってみましょう。

「名前を呼んで、挨拶（あいさつ）をしてくれるマシン」を作ってみましょう。

// 1. 定義（ていぎ）：マシンを作る
function sayHello(name) {
  return "こんにちは、" + name + "さん！";
}

• function： 「これからマシンを作るよ！」という合図。
• name（引数ひきすう）： マシンに入れる材料（ここでは名前）。
• return（戻もどり値ち）： マシンが最後に出してくれる結果。

関数かんすうにnameという変数へんすうに入ったデータを渡すことで、処理を柔軟じゅうなん（じゅうなん）に変えることができます。

では、引数ひきすうをとる関数かんすうを呼び出すときは、どのようにすればよいでしょうか？

// 2. 実行：ボタンを押して動かす
let message = sayHello("田中");
console.log(message); // 「こんにちは、田中さん！」と出る

このように、()の中に関数かんすうに渡すデータを書きます。

ここで、

• 仮引数ひきすう（かりひきすう）： 関数かんすうの中で使う「データの箱」の名前。ここではname
• 実引数ひきすう（じつひきすう）： 呼び出すときに実際に渡す「中身」のデータ。ここでは“田中“という文字列

というふうに呼びます。この呼び方もよく使うので、覚えてください。

では、実際、どんなふうに動くか見てみましょう。F12 キー（ノートPCは Fn + F12）を使ってコンソールを開いてから、下のボタンを押してみてください。

実行

次は、変数へんすうの「使える範囲」について学びます。

VI. 変数へんすうのスコープ（Scope）：変数へんすうの見える範囲

変数へんすうは、どこからでも見えるわけではありません。この「見える範囲」をスコープと呼びます。スコープを正しく使うことで、プログラムのミス（バグ）を減らすことができます。

プログラミングの「スコープ（Scope）」は、日本語でいうと 「有効（ゆうこう）な範囲（はんい）」、つまり 「その変数へんすうがどこまで使えるか」というルールのこと です。

グローバルスコープ (Global Scope)

→「外の世界（公園やインターネット）」のようなもの

プログラムのどこからでも見える、一番広いスコープです。

let world = "こんにちは世界！"; // グローバル変数（へんすう）

function sayWorld() {
  console.log(world); // 関数（かんすう）の中でも使える
}

sayWorld();
console.log(world); // 関数（かんすう）の外でも使える

• イメージ： 空に浮かんでいる「お月様（つきさま）」です。どこにいても見えますよね。

ローカルスコープ / 関数かんすうスコープ (Local Scope)

→「家の中」のようなもの

function（関数かんすう）の中で作った変数へんすうは、その関数かんすうの外からは見えません。

function myHouse() {
  let secret = "これは秘密（ひみつ）です"; // ローカル変数（へんすう）
  console.log(secret); // 関数（かんすう）の中ならOK
}

myHouse();
console.log(secret); // ❌ エラー！外からは見えません。

• イメージ： 家の中にある「テレビのりもこん」です。隣の家の人（関数かんすうの外）は使えません。

ブロックスコープ (Block Scope)

→「小さな箱（はこ）」のようなもの

if 文や for 文などの { } （波（なみ）かっこ）の中で let や const を使って作った変数へんすうは、その { } の中だけでしか使えません。

if (true) {
  let fruit = "りんご"; // ブロック変数（へんすう）
  console.log(fruit); // ブロックの中ならOK
}

console.log(fruit); // ❌ エラー！箱の外には出せません。

• イメージ： ロッカーの中の荷物です。ロッカー（{ }）を閉めたら、外からは触れません。

ポイントまとめ

なぜこれが大事なの？

もし、すべての変数へんすうを「グローバル（どこでも使える）」にすると、知らないうちに別の場所で**データが上書うわがき（書きかえ）**されてしまい、バグの原因になります。

Tip

「できるだけ狭（せま）く」が基本！ 留学生には、「変数へんすうはなるべく小さな箱（ブロックスコープ）に入れて、必要なときだけ外に出そうね」と教えてあげてください。

var は使わない、const を使おう

JavaScriptには変数へんすうの作り方が3つありますが、安全性のために使つかい分わけが重要です。

var・let・const の違いは、プログラミングの世界では 「古いルール」と「新しいルール」の違い だと考えると分かりやすいです。

むかしは var しかありませんでしたが、今はもっと安全な let と const を使うのが普通です。

違いをまとめた表

まずは、この表で全体（ぜんたい）のルールを見てみましょう。

なぜ var は使わないほうがいいの？

var は「ルールがゆるすぎる」ので、ミスが起きやすいんです。

① ブロック { } を無視して外に出てしまう

var は if や for の外まで飛び出してしまいます。

if (true) {
  var leak = "外に出ちゃうよ！";
}
console.log(leak); // ⭕ 表示（ひょうじ）できてしまう（これがバグの原因になる）

if (true) {
  let safe = "外には出ないよ";
}
console.log(safe); // ❌ エラー（外からは見えないので安全！）

② 同じ名前で何度でも作れてしまう

var は、同じ名前の変数へんすうをうっかり2回作っても怒られません。

var name = "田中";
var name = "鈴木"; // ⭕ OK（前の「田中」が消えてしまう！）

let age = 20;
let age = 25; // ❌ エラー！「もうありますよ！」と教えてくれる

let と const はどう使つかい分わける？

今のプログラミングでは、この 「使つかい分わけ」 がとても大切です。繰くり返かえしになりますが、ここでも確認しておきましょう。

const（定数：ていすう）

• 「カギをかけた箱」 です。
• 一度入れたら、中身を変えることはできません。
• 基本はこれを使います。 途中で値が変わらないほうが、読む人が安心できるからです。

let（変数へんすう：へんすう）

• 「カギのない箱」 です。
• 中身を何度も入いれ替かえることができます。
• for 文のカウンター（i++ など）のように、数字が変わるものだけ に使います。

学生へのアドバイス

1. まずは const を使おう！（一番安全だから）
2. もし、あとで値を書かき換かええる必要があるなら let に変えよう。
3. var はもう使わない！（古い本や古いサイトには書いてあるけど、今は使わないのがルールだよ）

Tip

「定数（const）」 の 「定」 は「決定（けってい）」の「定」。 つまり、「もう決まっていて動かない」という意味だと教えると分かりやすいですよ。

VII. 無名関数かんすう（むめいかんすう）

ここまで「関数かんすう（マシン）」についてお話はなしししました。次は、そのマシンの 「ちょっと特別な形」 である、無名関数かんすう（むめいかんすう）とアロー関数かんすう について説明します。

どちらも、今のJavaScriptでは毎日使うとても大切な書かき方かたです！

無名関数かんすう（むめいかんすう）

→「名前のない マシン」のこと

普通の関数かんすうは function sayHello() ... のように名前をつけますが、名前をつけないで作ることもできます。

• なぜ名前をつけないの？ 「その場ですぐに使うだけだから、名前をつけるのが面倒（めんどう）」という時に使います。

• 例たとえ話： 名前のある関数かんすうが「名前を登録とうろく（とうろく）した専属のシェフ」なら、無名関数かんすうは「その時だけ手伝ってくれる助っ人（すけっと）」のようなイメージです。

// 普通の関数（かんすう）（名前がある）
function sayHi() {
  console.log("こんにちは！");
}

// 無名関数（かんすう）（名前がない）
// 変数（へんすう）に入れて使うことが多いです
const sayHi2 = function() {
  console.log("こんにちは！");
};

アロー関数かんすう (Arrow Function)

→「もっと短く書ける、最新さいしんのショートカット」のこと

「無名関数かんすう」をさらに短く、かっこよく書く方法です。 =>（矢印：アロー） を使うので「アロー関数かんすう」と呼びます。

書かき方かたの変化を見てみよう

どれも同じ動うごきをしますが、下に行くほど短くなります。

1. 普通の関数かんすう： function(a, b) { return a + b; }
2. アロー関数かんすう： (a, b) => { return a + b; }
3. もっと短く（1行のとき）： (a, b) => a + b;

どうしてアロー関数かんすうを使うの？

留学生のみなさんには、この3つのメリットを覚えてほしいです。

• タイピングが楽： function と書かなくていいので、指が疲れません。
• 見みた目めがスッキリ： コードが短くなって、読みやすくなります。
• 「this」のルールがやさしい： （少し難むずかしい話ですが）アロー関数かんすうを使うと、プログラムが「自分（this）」を見失いにくくなり、エラーが減ります。

どんな時に使うの？（具体的な例れい）

一番よく使うのは、「他の関数かんすうの中で、ちょっと手伝ってほしい時」 です。

// 3秒後に「時間ですよ！」と表示（ひょうじ）する
setTimeout(() => {
  console.log("時間ですよ！");
}, 3000);

このように、setTimeout という関数かんすうの中に、さらに小さな関数かんすう（アロー関数かんすう）を入れて使います。

学生へのアドバイス

Tip

初心者しょしんしゃのうちは… 自分で書くときは、まず 「アロー関数かんすう」 を練習してみてください。今の現場では 90% くらいアロー関数かんすうが使われています。もし古いコードを読んで function が出てきたら、「あ、これはお父さん世代の書かき方かただな」と思えばOKです！

いかがでしょうか？「矢印（=>）が出てきたら、短い関数かんすうの合図だ！」と覚えると簡単ですよ。

VIII. まとめ

JavaScriptの「関数かんすう」をマスターするために、5つのポイントを振ふり返かえりましょう。

• 定義ていぎ： function を使い、動詞から始まる名前をつけてセットにしましょう。
• 呼び出し： 関数かんすう名のあとの () を忘れずにつけて実行しましょう。
• スコープ： 変数へんすうは const を使い、なるべく {} の中で安全に管理しましょう。
• 無名関数かんすう： 一度きりの処理は、名前をつけずにスマートに書きましょう。

So What?（だから何？） 関数かんすうを学ぶことは、ただコードを書くことではありません。大きな問題（プログラム）を、小さくて扱いやすい「関数かんすうのセット」に分けて考えることです。これが**「プログラマーのように考える」**ための第一歩いっぽです。

留学生向けの言葉のガイド

難むずかしい専門用語を、もっと簡単な日本語に言いかえてみましょう。

Tip

「引数ひきすう（ひきすう）」の覚え方 「いんすう」と読みたくなりますが、プログラミングでは 「ひきすう」 と読みます。「（材料を）引き連れてくる数」だと覚えるといいですよ！