「同じ処理を何度も書くのは面倒……」 「コードを整理して、どこに何が書いてあるか分かりやすくしたい」
そんな悩みを一気に解決してくれるのが、JavaScriptの 「関数（function）」 です。関数とは、簡単に言えば「いくつかの処理を一つにまとめた便利な道具箱」のこと。
本記事では、関数の基本構文から、データの受け渡しに必要な「引数」「戻り値」、そして現場で主流の「アロー関数」まで分かりやすく紐解いていきます。
関数とは？「料理」や「自販機」でイメージしよう
関数はよく、「材料（入力）」を入れて「加工」し、「成果物（出力）」を出す装置に例えられます。
自動販売機に例えると？
- お金を入れる（引数：入力データ）
- 自販機の中でボタンに応じた飲み物を選ぶ（処理：関数の内部）
- 飲み物が出てくる（戻り値：結果の出力）
このように、一度「自販機」という関数を作っておけば、何度でも好きな時にお金を入れて飲み物を受け取ることができます。同じ処理をあちこちに書く必要はありません。
関数の基本：宣言と呼び出し
関数を使うには、「作る（宣言）」と「使う（呼び出し）」の2ステップが必要です。この「定義しただけでは何も起きない」という点は、初心者が最初に見落としがちなポイントです。
関数の作り方（関数宣言）
function というキーワードの後に、その道具の名前（関数名）を付けます。
function sayHello() {
console.log("こんにちは！");
}関数名は、後で見た時に「何をするものか」がすぐ分かるように動詞から始めるのが一般的です（例：printUser, calculateTotal）。
関数の呼び出し
定義した関数名の後ろに（） をつけることで、中に書かれた処理が実行されます。
sayHello(); // 実行結果: こんにちは！一度作ってしまえば、100回でも1000回でも呼び出せます。同じ挨拶をあちこちで表示させたい場合、100箇所に console.log を書くのではなく、この関数を100回呼ぶ方がスマートです。
関数を使うメリット：メンテナンスの容易さ
例えば、挨拶を「こんにちは」から「こんばんは」に変更したくなったとき、関数を使っていなければ100箇所すべて修正が必要です。しかし、関数化されていれば関数の中身を1箇所書き換えるだけで、すべての出力が一瞬で変わります。 これこそがプログラミングにおける「効率化」の核心です。
データを渡す「引数（ひきすう）」と「戻り値（return）」
関数を単なる「定型文の塊」から、状況に応じて柔軟に動く「賢い道具」に進化させるのが、データのやり取りです。
引数：関数への「指示書」
引数（ひきすう）とは、関数を呼び出す際に外から渡すデータのことです。
function greet(name, weather) {
console.log(name + "さん、今日は" + weather + "ですね！");
}
greet("なると", "晴れ"); // なるとさん、今日は晴れですね！
greet("サスケ", "雨"); // サスケさん、今日は雨ですね！- 仮引数：関数を作る側の（name , weather）。データの受け皿です。
- 実引数：関数を呼ぶ側の（”なると” , “晴れ”）。実際に渡す中身です。
戻り値：関数からの「お返し」
関数の中で計算した結果を、関数の「外」で使いたいときに return を使います。
function add(a, b) {
return a + b; // 合計値を「お土産」として外に持ち出す
}
const total = add(5, 3); // 8が返ってくるので、変数totalに代入できる
console.log("合計は" + total + "です");return がない関数は、処理をしたらそのまま終わりですが、return がある関数は、呼び出し元にデータを届けます。この「お返し」があることで、他の処理と組み合わせることが可能になります。
returnの重要な性質：処理の強制終了
return には「値を返す」役割のほかに、「関数の実行をそこで終わらせる」という強力な役割があります。
returnを書くとその時点で関数の処理は終了します。returnの後に書いたコードは実行されないので注意しよう。
なぜ関数を細かく分けるのか？
「動けばいいんだから、1つの関数に全部の処理を書いてもいいじゃないか」と思うかもしれません。しかし、現場では1つの関数は驚くほど小さく作られます。
「単一責任の原則」
プロの世界には「一つの関数には一つの役割だけを持たせる」という鉄則があります。
- 悪い例：processOrder（注文を受け取り、計算し、DBに保存し、メールを送る）
- 良い例:：
calculateTax（計算だけ）、saveToDB（保存だけ）、sendEmail（送信だけ）
このように細かく分けることで、もしメール送信に不具合が起きても「メール送信関数だけ」をチェックすれば良くなり、デバッグ作業が劇的に早くなります。
命名の重要性：コードは「読物」である
関数の名前は、中身を1行も読まなくても「何をして、何を返すのか」が推測できるのが理想です。
- check（何をチェックするのか不明） → isEmailValid（メール形式が正しいか確認して、true/falseを返すんだな、と分かる）
「DRY」の原則（Don’t Repeat Yourself）
同じコードを二度書かない、という意味です。もし自分のコードの中に、似たような3行が二箇所以上出てきたら、それは「関数にするべきタイミング」です。
モダンな書き方：「アロー関数」に慣れよう
現在のJavaScript開発で非常によく使われるのが、function を使わない 「アロー関数」 です。
アロー関数の構文
// 通常の関数
const double = function(n) {
return n * 2;
};
// アロー関数（スッキリ！）
const double = (n) => {
return n * 2;
};さらに、処理が1行の場合は { } や return も省略できるため、コードが劇的にスッキリします。
const double = n => n * 2;【関連記事】アロー関数について、より詳しく知りたい方は以下の記事をご覧ください。
変数の有効範囲「スコープ」を知る
関数を語る上で避けて通れないのが 「スコープ」 です。
- ローカルスコープ: 関数の内部で定義した変数。その関数の外からは見えない。
- グローバルスコープ: 関数の外で定義した変数。どこからでも見える。
const globalVar = "外";
function test() {
const localVar = "中";
console.log(globalVar); // 見える
}
console.log(localVar); // エラー！見えないこの仕組みがあるおかげで、別の関数で同じ変数名を使っても衝突せずに済むのです。
関数宣言と鑑識、どっちを使う？
実はJavaScriptには関数の作り方が複数あります。
- 関数宣言：function test( ) { }
- 関数式:
：const test = function( ) { }
どっちがいい？
結論から言うと、現代の開発では「2. 関数式（またはアロー関数）」を const で定義するのが主流です。
- 理由1：const を使うことで、間違って関数を書き換えてしまうミスを防げる。
- 理由2:：関数宣言には「ホイスティング（巻き上げ）」という特殊な挙動があり、呼び出し位置の自由度が高すぎて逆にコードの流れを追いづらくなるため。
まとめ：関数はコードの「資産」
関数をマスターすることは、プログラミングの「部品化」をマスターすることと同じです。
- 名前、引数、戻り値 の3つを意識して定義する。
- アロー関数 でモダンに書く。
- スコープ を理解して変数の衝突を防ぐ。
- 一つの関数には一つの役割 を持たせる。
最初は「わざわざ関数にしなくても動くし……」と思うかもしれません。しかし、サイトが複雑になるほど、関数の恩恵は大きくなります。まずは「2つの数字を足す」といった小さな関数から作ってみてください。その積み重ねが、拡張性の高い美しいプログラムを生む力になります。
