2026年4月16日
JavaScript 関数とは？
「同じ処理を何度も書くのが面倒」と感じたことはありませんか？そんなときに使うのが 関数（かんすう） です。
JavaScript 関数とは、「まとめて名前をつけた処理のかたまり」です。一度定義しておけば、何度でも呼び出して使えます。
この記事では、関数の書き方・引数・戻り値・アロー関数を初心者向けにわかりやすく解説します。
関数の基本的な書き方
function キーワードを使って関数を定義します。
// 関数の定義
function greet() {
console.log('こんにちは！');
}
// 関数の呼び出し
greet(); // こんにちは！
greet(); // こんにちは！（何度でも呼び出せる）関数は「定義」と「呼び出し」の2ステップです。定義しただけでは実行されません。
引数：関数に値を渡す
引数（ひきすう）とは、関数を呼び出すときに渡す値のことです。関数の中で使える「入力」のようなものです。
// name という引数を受け取る関数
function greet(name) {
console.log('こんにちは、' + name + 'さん！');
}
greet('田中'); // こんにちは、田中さん！
greet('鈴木'); // こんにちは、鈴木さん！複数の引数
function add(a, b) {
console.log(a + b);
}
add(3, 5); // 8
add(10, 20); // 30🔥 JavaScriptとは？初心者向け解説で実践してみましょう。
戻り値：関数から値を返す
戻り値（もどりち）とは、関数が処理した結果を呼び出し元に返す値のことです。return を使います。
function add(a, b) {
return a + b; // 計算結果を返す
}
const result = add(3, 5);
console.log(result); // 8
// 戻り値をそのまま使う
console.log(add(10, 20) * 2); // 60💡 console.log との違い：
console.log は画面に表示するだけです。return は値を返すので、その値を変数に入れたり計算に使ったりできます。
💡 配列入門で基礎を確認できます。
アロー関数：短い書き方
アロー関数は、function を使わずに短く書ける関数の書き方です。=>（矢印）を使います。
// 通常の関数
function add(a, b) {
return a + b;
}
// アロー関数（同じ意味）
const add = (a, b) => {
return a + b;
};
// さらに短く（1行で書ける場合）
const add = (a, b) => a + b;ハンズオン：関数を使ったページ
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>関数練習</title></head>
<body>
<input type="number" id="num1" placeholder="数値1">
<input type="number" id="num2" placeholder="数値2">
<button id="btn">足し算する</button>
<p id="result"></p>
<script>
function add(a, b) {
return a + b;
}
document.getElementById('btn').addEventListener('click', function() {
const a = Number(document.getElementById('num1').value);
const b = Number(document.getElementById('num2').value);
document.getElementById('result').textContent = '答え：' + add(a, b);
});
</script>
</body>
</html>🔗 あわせてオブジェクト入門もチェックしてみましょう。
関数を使いこなすためのコツ
関数を上手に使うためのコツを紹介します。
コツ1：関数名は「動詞＋名詞」にする
関数名を見ただけで何をする関数かわかるようにしましょう。たとえば「calculateTotal」（合計を計算する）、「showMessage」（メッセージを表示する）、「getUserName」（ユーザー名を取得する）のように、動詞から始めると意味が伝わりやすいです。
コツ2：1つの関数には1つの役割だけ
「計算して、表示して、保存する」のように複数のことをする関数は避けましょう。1つの関数は1つのことだけをするのが理想です。役割が多いと感じたら、複数の関数に分けましょう。
コツ3：引数は3つ以内にする
引数が多すぎると、関数を呼び出すときに順番を間違えやすくなります。3つ以内に収めるのが目安です。どうしても多くなる場合は、オブジェクトにまとめて渡す方法があります。
関数でよくあるミス
ミス1：returnを書き忘れる
関数の中で計算した結果を返したいのに、returnを書き忘れるミスです。returnがないと、関数はundefined（未定義）を返します。「計算したはずなのに結果がundefinedになる」というときは、returnを確認しましょう。
ミス2：関数を定義しただけで呼び出していない
関数を書いただけでは実行されません。関数名のあとに丸かっこ（）をつけて呼び出す必要があります。「コードを書いたのに何も起きない」というときは、呼び出しを忘れていないか確認しましょう。
ミス3：引数の順番を間違える
引数が複数ある関数では、渡す順番が大切です。たとえば「createUser(名前, 年齢)」という関数に「createUser(15, "太郎")」と渡すと、名前に15、年齢に"太郎"が入ってしまいます。
ミス4：関数の中で宣言した変数を外から使おうとする
関数の中でletやconstで宣言した変数は、関数の外からはアクセスできません。これを「スコープ」と呼びます。関数の外で使いたい値は、returnで返しましょう。
関数はプログラミングの中で最も重要な概念の一つです。最初は「なぜわざわざ関数にするの？」と思うかもしれません。でも、コードが長くなるほど関数のありがたみがわかります。同じ処理を何度も書かなくて済むし、バグが見つかったときも関数の中だけ直せば全体が直ります。まずは短い関数から書く練習を始めてみましょう。
まとめ
- ✅ 関数：処理をまとめて名前をつけたもの。何度でも呼び出せる
- ✅
function 名前() { 処理 }で定義し、名前()で呼び出す - ✅ 引数：関数に渡す値。複数指定できる
- ✅ 戻り値：
returnで処理結果を返す - ✅ アロー関数：
const 名前 = (引数) => 処理と短く書ける
JavaScriptの基礎はJavaScript入門で復習できます。
あわせて読みたい記事
- JavaScriptとは？初心者向け解説 — JS基礎に戻る
- JavaScript変数入門 — 関数内の変数スコープ
- JavaScript配列入門 — 配列メソッドとコールバック
- JavaScriptイベント入門 — イベントハンドラとしての関数
- JavaScript DOM操作入門 — 関数でDOM操作をまとめる
- JavaScriptループ入門 — ループ処理を関数化