JavaScript | 基礎構文：関数 – 関数定義

JavaScript JavaScript
2025.12.14
スポンサーリンク

関数ってそもそも何者？

関数は、
「処理に名前をつけて、あとから何度でも呼び出せるようにしたもの」 です。

同じような処理を何回も書くのはダルいし、ミスの元です。
そこで「この処理に名前をつけておいて、必要なときにその名前を呼ぶだけ」にする。
これが関数の役割です。

「レシピに名前をつける」と思ってください。
レシピ（関数）を一度書いておけば、「カレー作って」と言うだけで毎回同じ手順で作れる、そんなイメージです。

一番基本的な関数定義の形

function 文での定義

まずは、いちばん基本の形から。

function greet() {
  console.log("こんにちは！");
}
JavaScript

これで greet という名前の関数が定義されました。
でも、この時点では「レシピを書いただけ」で、まだ実行はされていません。

実行するには「呼び出し」が必要です。

greet(); // ここで初めて「こんにちは！」が表示される
JavaScript

ここが重要です。
「関数定義」と「関数呼び出し」は別物 です。
function greet() { ... } は「こういう処理だよ」という宣言。
greet() は「今それを実行して」という命令です。

引数付きの関数定義

「入力を受け取る」関数

関数には「引数（ひきすう）」という“入力”を渡せます。

function greet(name) {
  console.log("こんにちは、" + name + "さん");
}

greet("太郎");   // こんにちは、太郎さん
greet("花子");   // こんにちは、花子さん
JavaScript

name が引数です。
greet("太郎") と呼び出したとき、name の中身は "太郎" になります。

ここで大事なのは、
関数は「変わる部分」を引数にして、処理の中で使う という考え方です。

「誰に挨拶するか」は毎回違うので引数にする。
「挨拶の仕方」は同じなので関数の中に書いておく。
こうやって「変わるところ」と「変わらないところ」を分けるのが、関数設計の基本です。

戻り値付きの関数定義

「結果を返す」関数

関数は、処理をして「結果」を返すこともできます。
そのときに使うのが return です。

function add(a, b) {
  return a + b;
}

const result = add(3, 5);
console.log(result); // 8
JavaScript

add(3, 5) を呼び出すと、
関数の中で a + b が計算され、その結果が return で呼び出し元に返されます。

ここが重要です。
return は「この関数の“答え”はこれです」と外に渡すためのキーワード です。

もう少しだけ踏み込むと、
return が実行された時点で、その関数の処理はそこで終了します。

function check(num) {
  if (num > 10) {
    return "大きい";
  }
  console.log("ここは num <= 10 のときだけ実行される");
  return "小さい";
}
JavaScript

num > 10 のときは、最初の return で関数が終わるので、
console.log の行は実行されません。

関数定義のいろいろな書き方

関数宣言（function 文）

さっきのような書き方です。

function greet(name) {
  console.log("こんにちは、" + name + "さん");
}
JavaScript

これは「関数宣言」と呼ばれます。
ファイルのどこに書いても、同じスコープ内なら前からでも後ろからでも呼び出せます（ホイスティングされるため）。

関数式（関数を変数に代入する）

関数は「値」として扱えるので、変数に代入することもできます。

const greet = function (name) {
  console.log("こんにちは、" + name + "さん");
};

greet("太郎");
JavaScript

function (name) { ... } という“無名の関数”を、greet という変数に入れています。
この書き方は、あとで関数を差し替えたり、他の関数に渡したりするときに便利です。

アロー関数（=>）

最近の JavaScript では、アロー関数もよく使います。

const greet = (name) => {
  console.log("こんにちは、" + name + "さん");
};
JavaScript

さらに、戻り値だけのシンプルな関数なら、こう短く書けます。

const add = (a, b) => a + b;

console.log(add(2, 3)); // 5
JavaScript

ここが重要です。
「function 文」「関数式」「アロー関数」は“書き方が違うだけで、どれも関数を定義している」 ということ。
最初は function で慣れてから、徐々にアロー関数に触れていけば十分です。

実務でよくある「関数定義」の使い方イメージ

「1つの責務」に名前をつける

例えば、ユーザー一覧を表示する処理を考えます。

async function loadUsers() {
  const res = await fetch("/api/users");
  const users = await res.json();
  renderUsers(users);
}
JavaScript

ここでは、

データを取得する
JSON に変換する
画面に描画する

という一連の流れに loadUsers という名前をつけています。

さらに分けるなら、

async function fetchUsers() {
  const res = await fetch("/api/users");
  return res.json();
}

function renderUsers(users) {
  // DOM 操作など
}

async function loadUsers() {
  const users = await fetchUsers();
  renderUsers(users);
}
JavaScript

こんなふうに、
「データ取得」と「表示」を別々の関数に分けることもできます。

ここが重要です。
関数定義の本質は「処理をまとめて名前をつける」こと。
“何をしているか”が名前から分かるように切り出すと、コードが一気に読みやすくなる。

初心者がつまずきやすいポイントを先に押さえておく

「定義しただけでは動かない」

よくあるのが、こういうパターンです。

function greet() {
  console.log("こんにちは");
}
JavaScript

これを書いて満足して、「あれ、何も表示されない…」となる。
それは「呼び出していないから」です。

greet(); // これが必要
JavaScript

関数は「レシピ」なので、
「書く（定義）」と「使う（呼び出し）」はセット だと覚えておいてください。

引数の数が合わなくてもエラーにならない

JavaScript は、引数の数が合わなくてもエラーになりません。

function add(a, b) {
  return a + b;
}

console.log(add(1));      // NaN（b が undefined なので）
console.log(add(1, 2, 3)); // 3（3つ目は無視される）
JavaScript

これは初心者には少し罠です。
「引数が足りないときは undefined になる」ということを知っておくと、
バグの原因を追いやすくなります。

必要なら、デフォルト値をつけることもできます。

function add(a = 0, b = 0) {
  return a + b;
}
JavaScript

まとめ：関数定義で本当に押さえてほしいこと

関数は、
「処理に名前をつけて、何度でも呼び出せるようにしたもの」。

基本形はこれ。

function 名前(引数1, 引数2, ...) {
  // 処理
  return 結果; // 必要なら
}
JavaScript

重要なポイントは、

関数定義と関数呼び出しは別
引数で「変わる部分」を受け取り、return で「結果」を返せる
function 文・関数式・アロー関数は、どれも関数を定義する書き方の違い
「1つの責務」に名前をつけると、コードが読みやすくなる

もしよければ、
「自分のよくやる処理」を1つ関数にしてみてください。
例えば「税込価格を計算する」「挨拶文を作る」「配列の平均を出す」など。

その瞬間から、あなたはもう「関数を使って設計しているプログラマー」です。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました