JavaScriptを学び始めると、何度も同じ処理を書くのが面倒に感じる場面が出てきます。そんなときに使うのが関数です。結論からいうと、関数とは「処理をまとめて名前を付けた再利用できる部品」です。
関数を理解すると、コードの重複を減らし、読みやすく保守しやすいプログラムを書けるようになります。この記事では、JavaScriptの関数とは何か、書き方、引数と戻り値、よくあるつまずきを初心者向けに整理します。
まずは「同じ処理を何度も使い回すための仕組み」と覚えるだけでも十分です。
結論：関数で押さえたいのは3つだけ
- 関数は処理のまとまり
- 引数は関数に渡す入力
- 戻り値は関数が返す結果
function add(a, b) {
return a + b;
}
const result = add(3, 5);
console.log(result); // 8
この短いコードだけでも、関数の基本が詰まっています。add が関数名、a と b が引数、return a + b; が戻り値です。
1. 関数とは何か
関数は、一連の処理をひとまとまりにしたものです。たとえば「税込価格を計算する」「あいさつ文を作る」「ボタンが押されたら実行する処理」などを関数として切り出せます。
関数を使うメリットは主に次の3つです。
- 同じコードを何度も書かずに済む
- 処理の意味が名前で分かるようになる
- 修正箇所を1か所にまとめやすい
2. JavaScriptで関数を書く基本形
もっとも基本的な書き方は、function を使う関数宣言です。
function greet(name) {
console.log("こんにちは、" + name + "さん");
}
greet("田中");
この例では、greet という名前の関数を定義し、後から greet("田中") のように呼び出しています。
書き方の流れは次のとおりです。
| 要素 | 意味 |
|---|---|
function |
関数を定義するという宣言 |
greet |
関数名 |
(name) |
引数 |
{ ... } |
実行する処理 |
3. 引数と戻り値を理解すると実用的になる
関数は外から値を受け取り、その結果を返せます。これが引数と戻り値です。
function getTaxIncludedPrice(price) {
return price * 1.1;
}
const total = getTaxIncludedPrice(1000);
console.log(total); // 1100
price が引数、price * 1.1 が戻り値です。こうしておくと、1000円でも2000円でも同じ関数を再利用できます。
初心者の方は、引数 = 入力、戻り値 = 出力 と考えると整理しやすいです。
4. 関数宣言と関数式の違い
JavaScriptでは、関数は function で宣言する以外に、変数へ代入する形でも書けます。これを関数式といいます。
const greet = function(name) {
console.log("こんにちは、" + name + "さん");
};
動作の考え方は似ていますが、書き方や呼び出せるタイミングに違いがあります。関数式の基本を知りたい方は、関数式の記事も合わせて読むと理解が深まります。
また、最近のJavaScriptではこの関数式を短く書けるアロー関数もよく使われます。
5. 関数の中で作った変数は外では使えない
関数には独自のスコープがあります。つまり、関数の中で宣言した変数は、外からは参照できません。
function sample() {
const message = "関数の中だけ";
console.log(message);
}
sample();
// console.log(message); // ReferenceError
このルールを知っておくと、「なぜその変数が使えないのか」で悩みにくくなります。スコープをしっかり整理したい方は、JavaScriptのスコープ解説もおすすめです。
6. よくあるつまずき
関数を定義しただけで実行されたと思い込む
関数は定義しただけでは実行されません。最後に () を付けて呼び出して初めて動きます。
return と console.log を同じものだと思ってしまう
console.log は表示するだけ、return は関数の結果を返すためのものです。ここを区別できると、関数の理解が一気に進みます。
引数を受け取る関数に値を渡し忘れる
関数に必要な引数を渡さないと、undefined になることがあります。エラーではなく動いてしまう分、初心者が見落としやすいポイントです。
function greet(name) {
console.log("こんにちは、" + name + "さん");
}
greet(); // こんにちは、undefinedさん
補足：関数を実務で使うときの見方
関数は、文法として覚えるだけでは少しもったいないです。実務では、関数を「処理を分けて、名前を付けて、あとから使いやすくするための部品」として使います。問い合わせフォーム、料金計算、入力チェック、画面の表示切り替えなど、同じような処理が何度も出てくる場面で特に役立ちます。
まずは、関数を入力から結果までの流れとして見てみます。関数が苦手な方は、function という単語よりも「引数・処理・戻り値」の3点に分けて考えると理解しやすくなります。
この図で見てほしいのは、関数の中に入るものと、関数から出てくるものです。引数は関数に渡す入力、戻り値は関数が呼び出し元へ返す結果です。たとえば税込価格を計算する関数なら、税抜価格が引数で、税込価格が戻り値になります。
function addTax(price) {
return Math.floor(price * 1.1);
}
const total = addTax(1000);
console.log(total); // 1100この例では、1000 が引数として関数に入り、計算された 1100 が戻り値として返っています。戻り値があるからこそ、結果を total に入れて、次の処理で使えます。
初心者が特につまずきやすいのが、return と console.log の違いです。どちらも画面上では何かが表示されることがあるため、同じものだと思いやすいですが、役割はまったく違います。
この画像では、関数の中で console.log(a + b) を実行しているため、画面には 5 が表示されます。しかし、関数が return していないため、result には undefined が入ります。
実務でよくあるのは、デバッグ中に console.log で値が見えたため「関数が値を返している」と勘違いするケースです。画面に表示するだけなら console.log で十分ですが、その計算結果を別の関数へ渡したり、画面表示に使ったりするなら return が必要です。
もうひとつ大事なのは、関数名です。関数名はコメントの代わりにもなります。calc のような曖昧な名前より、calculateTotalPrice や validateEmail のように、何をする関数なのか分かる名前にすると、あとから読む人が理解しやすくなります。
関数を理解したら、次は アロー関数 や コールバック関数 へ進むと自然です。どちらも関数の考え方を土台にしているため、引数と戻り値を押さえておくと一気に読みやすくなります。
関数に切り出すか迷ったときの判断
初心者のうちは、どこまでを関数にすればよいか迷いやすいです。判断の目安は、「同じ処理が2回以上出てくるか」「処理に名前を付けると読みやすくなるか」です。同じ計算、同じチェック、同じ表示処理が何度も出てくるなら、関数に切り出す価値があります。
たとえば、メールアドレスの形式チェックを複数の画面で使うなら、毎回同じコードを書くより validateEmail のような関数にまとめたほうが安全です。あとでチェック条件を変えたいときも、修正箇所を1つにできます。
function validateEmail(email) {
return email.includes("@");
}
if (!validateEmail(inputValue)) {
console.log("メールアドレスを確認してください");
}この例では、メールアドレスらしいかを確認する処理を関数にしています。実務ではもっと厳密なチェックが必要になることもありますが、「何を確認している処理なのか」が関数名で分かる点が大きなメリットです。
よくあるミスを防ぐコツ
- 関数を作っただけで満足せず、必要な場所で呼び出す
- 戻り値を使うなら、必ず
returnを書く - 関数名は「何をするか」が分かる動詞から始める
- 1つの関数に、関係ない処理を詰め込みすぎない
関数を小さく分けるメリット
関数を小さく分けると、コード全体の流れが追いやすくなります。たとえば、会員登録画面の処理を考えると、入力値を取得する、メールアドレスをチェックする、パスワードをチェックする、エラーを表示する、送信する、という複数の役割があります。これを1つの大きな関数に全部入れると、どこで何をしているのか分かりにくくなります。
一方で、それぞれを関数に分けると、処理の名前を見るだけで流れを読めるようになります。getFormValues、validateEmail、showErrorMessage のように分けておけば、細かい中身を読む前に全体像をつかめます。
もちろん、何でも細かく分ければよいわけではありません。1回しか使わず、名前を付けても分かりやすくならない処理まで無理に関数化すると、逆に読みにくくなります。まずは「同じ処理が繰り返される」「名前を付けると意味が伝わる」「修正箇所をまとめたい」という場面から関数化するとよいです。
関数を書くときの順番
関数を書くときは、いきなり文法から入るよりも、「何を受け取るか」「何を返すか」「関数名を何にするか」の順番で考えると整理しやすいです。たとえば税込価格を計算するなら、受け取るのは税抜価格、返すのは税込価格、関数名は addTax や calculateTaxIncludedPrice のようになります。
この順番で考えると、関数の中身も自然に決まります。引数が足りない、戻り値を返し忘れる、関数名と処理内容が合っていない、といったミスにも気づきやすくなります。
- まず、関数に渡す入力を決める
- 次に、呼び出し元へ返す結果を決める
- 最後に、処理内容が分かる名前を付ける
関数は、JavaScriptだけでなく多くのプログラミング言語で使う基本です。ここで「入力、処理、戻り値」の感覚をつかんでおくと、アロー関数、コールバック関数、Promise、async/awaitを学ぶときにも土台になります。
関数は、コードを短くするためだけのものではありません。処理に名前を付け、あとから読み返しやすくし、修正しやすくするための整理方法でもあります。
実務では、関数を作ったあとに「この関数は何を知らなくてよいか」も考えます。たとえば、税込価格を計算する関数なら、画面のどこに表示するかまでは知らなくて構いません。計算は計算、表示は表示に分けると、修正時の影響範囲が小さくなります。
この分け方ができると、同じ関数を別の画面でも使いやすくなります。商品一覧、カート、注文確認画面で同じ計算を使う場合、計算処理を1つにまとめておけば、税率や丸め方を変えるときも修正漏れを防げます。
初心者のうちは、まず「関数名だけを読んで処理の目的が想像できるか」を確認してみてください。名前を見ても目的が分からない場合は、処理を詰め込みすぎているか、名前が曖昧な可能性があります。
関数は、プログラムの中に小さな見出しを作るようなものです。適切に分けられた関数は、コード全体を読みやすくし、ミスが起きたときに調べる場所を見つけやすくしてくれます。
また、関数を小さくしておくとテストもしやすくなります。入力に対して期待した戻り値が返るかを確認できるため、画面全体を動かさなくても一部の処理だけを検証できます。
関連して学びたい記事
まとめ
JavaScriptの関数は、文法そのものよりも「何のために使うのか」が分かると覚えやすくなります。まずは短い関数を自分で書いて、引数と戻り値の流れに慣れていくのがおすすめです。