関数宣言
このレッスンで分かること
function 名前(引数) { return 値; }で関数を作れます- 名前を付けることで同じ処理を何度でも呼び出せます
- 最小例は
function double(n) { return n * 2; }
関数宣言 とは
function キーワードで関数を宣言し、引数を倍にして返す。本レッスンでは、関数宣言 の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
関数宣言で処理をまとめる
プログラムを書いていると console.log で同じような出力を何度も書いたり、 if で同じ条件を繰り返し書いたりする場面が必ず出てきます。同じ処理をあちこちに書き散らかしていると、修正のたびに何箇所も直す羽目になり、バグの温床にもなります。そんなときに使うのが 関数 という仕組みです。 JavaScript で関数を作る一番シンプルな書き方が、 function キーワードを使った 関数宣言 です。
関数とは、ひとかたまりの処理に名前を付けて何度でも呼び出せるようにした道具です。プログラムにおける
名前付きのレシピだと考えてもよいでしょう。
例えば「与えられた数を 2 倍にして返す」という処理を double という名前の関数にしておけば、 double(3) と書くだけで 6 が手に入ります。これがプログラムを読みやすく・短くするための第一歩です。同じ計算を 100 箇所で使うとしても、関数の中身を 1 箇所だけ変えれば全箇所の振る舞いが揃います。
関数宣言の文法
関数宣言の基本形は次のとおりです。
JavaScript
function 関数名 (引数1, 引数2) {
// 処理
return 戻り値;
}function の後ろに半角スペースを入れて関数名を書き、 () の中に 引数 を書きます。 {} の中身が 関数本体 で、 return で値を呼び出し元に返します。 return を書かないと自動的に undefined が返るので注意してください。関数名は変数と同じく camelCase で書くのが慣習です。 double 、 calculateTax 、 isValidEmail のような名前が読みやすい例です。
動きを追ってみる
簡単な例で動きを確認します。
JavaScript
function double (n) {
return n * 2;
}
console.log(double(3)); // 6
console.log(double(10)); // 20
console.log(double(-4)); // -8double(3) と書くと n に 3 が入り、 n * 2 の結果である 6 が戻ります。同じ関数を double(10) で呼べば 20 が、 double(-4) で呼べば -8 が戻ります。1 つの関数を作っておけば、引数を変えるだけで何度でも使い回せます。
関数を作るときは「入力 (引数) と出力 (戻り値) は何か」を最初に決めると、中身がぐっと書きやすくなります。型のないJavaScriptでも、頭の中で型を決めてから書くのは効果的です。
関数宣言と他の書き方の違い
JavaScript には関数を作る方法がいくつかあります。代表的なのは次の通りです。
JavaScript
// 1. 関数宣言
function add (a, b) { return a + b; }
// 2. 関数式
const sub = function (a, b) { return a - b; };
// 3. アロー関数
const mul = (a, b) => a * b;| 書き方 | 巻き上げ | this |
|---|---|---|
| 関数宣言 | あり (上部から使える) | 呼び出し方で決まる |
| 関数式 | なし | 呼び出し方で決まる |
| アロー関数 | なし | 外側のスコープを引き継ぐ |
関数宣言の特徴は 巻き上げ です。 let や const と違って、関数宣言は読み込まれた瞬間にファイル全体で使える状態になります。なので、ファイルの上のほうで double(3) を呼び、下のほうで function double ... を定義しても動きます。とはいえ読み手にとって分かりにくいので、 関数は使う前に定義する のが基本です。
図の流れを順序リストで書き直すと、次の通りです。
double(3)を呼び出す- 引数
nに3が入る - 本体で
n * 2を計算する returnで6を返す- 呼び出し元で
6を使う
よくある間違い
以下のとおりです。
returnを書き忘れる → 戻り値がundefinedになるfunctionのスペルミスや()の付け忘れでSyntaxError- 引数を増やしたのに本体で使い忘れる
returnの右側に改行を入れすぎる → 自動セミコロン挿入でreturn;と読まれる
関数本体で
console.logだけ書いて満足しがちですが、テストやコード採点ではreturnで値を返さないと評価できないことが多いです。表示と戻り値は別物だと意識しましょう。
関数を使うとコードがどう変わるか
関数を使う前と後で、同じ処理がどれだけ整理されるかを見てみます。関数を使わずに同じ計算を 3 回書いた例と、関数化した例を比べてみましょう。
JavaScript
// Before — 3 箇所で同じ式を書いている
const a = 3 * 2;
const b = 10 * 2;
const c = -4 * 2;
// After — double 関数にまとめる
function double (n) { return n * 2; }
const a2 = double(3);
const b2 = double(10);
const c2 = double(-4);After の書き方なら、もし「2 倍ではなく 3 倍に変えたい」となったときも double の中身を n * 3 に直すだけで全箇所が一斉に切り替わります。関数を作ることは、 処理の意味に名前を付ける ことでもあるので、コードを読む人にとっても親切です。
関数名は
何をするかが一目で分かる名前にしましょう。f1やmyFuncのような名前は避け、doubleやformatPriceのような動詞ベースの名前を選ぶと、後で読み返したときに迷いません。
ここまでの要点
function 名前(引数) { return 値; } で宣言、camelCase の動詞ベース命名、return を必ず書く。表示と戻り値は別物。
やってみよう
引数 n を受け取り、 n の 2 倍を return する関数 double を書いてみましょう。 console.log ではなく return で値を返すのがポイントです。負の数や 0 でもきちんと動くか、テストケースで確認してみてください。
よくある質問
Q. 関数を分けるとなぜ良いのですか？
A. 1 つの処理に名前が付くため可読性が上がり、テストや使い回しが容易になります。修正時の影響範囲も小さくなるので、20-30 行を超える関数は責務ごとに分割すると良いです。関数名は動詞 + 目的語（calc_tax, fetch_user）にすると意図が伝わりやすくなります。
Q. 引数のデフォルト値はどう使えば良いですか？
A. def greet(name='guest'): のようにデフォルト値を指定すると、呼び出し側で省略可能になります。ただしミュータブル（リストや辞書）をデフォルトにすると全呼び出しで共有されるバグの原因になるため、def f(x=None): ... if x is None: x = [] のパターンを使いましょう。
Q. 戻り値が複数あるときはどう書きますか？
A. return a, b のようにタプルで返し、x, y = func() で受け取るのが Python の定石です。意味のある名前で返したいときは namedtuple や dataclass、3 つ以上返すなら辞書を返した方が呼び出し側で何が来るか明確になります。
次のレッスン
次は アロー関数 で、function キーワードで関数を宣言し、引数を倍にして返す を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- 関数宣言 の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. 関数宣言 とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
要件
- function キーワードで関数 double を宣言する
- 引数 n を受け取り n * 2 を return する
- console.log は使わず必ず return で値を返す
入出力例
test-cases.txt
double(3) → 6
double(0) → 0
double(-4) → -8
double(100) → 200