JavaScriptの関数とは？基本と使い方を徹底解説

2026.03.04

JavaScript

JavaScriptにおける「関数」は、プログラムを効率よく整理し、再利用しやすくするための最も重要な仕組みのひとつです。
Webサイトの動きやアプリケーションの処理の多くは、関数によって構成されています。

本記事では、JavaScriptの関数の基本から実践的な使い方までを体系的に解説します。基礎を確実に理解し、応用へとつなげられる内容になっています。

JavaScriptの関数とは

関数とは、特定の処理をひとまとめにしたものです。

同じ処理を何度も書くのではなく、関数として定義することで、必要なときに呼び出して再利用できます。

関数の役割

関数には、主に次のような役割があります。

処理をまとめる
コードの再利用を可能にする
可読性を高める
バグを減らす
保守しやすくする

JavaScriptの基礎構造について理解があいまいな場合は、まずは
👉 「JavaScriptの役割と構造を理解する」
の記事から確認すると理解が深まります。

関数の基本構文

function宣言

最も基本的な書き方は「function宣言」です。

function greet() {
  console.log("Hello");
}

この関数は、greet()と呼び出すことで実行されます。

greet(); // Hello

構文の分解

function 関数名() {
  処理内容
}

function：関数を定義するキーワード
関数名：任意の名前
{}：処理を書くブロック

引数と戻り値

関数の本質を理解するために重要なのが「引数」と「戻り値」です。

引数（パラメータ）

引数とは、関数に渡す値のことです。

function greet(name) {
  console.log("Hello " + name);
}

greet("Taro");

nameが引数です。

戻り値（return）

戻り値は、関数が処理結果として返す値です。

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

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

returnを使うことで、結果を外部で利用できます。

関数式とアロー関数

JavaScriptには複数の関数定義方法があります。

関数式

const greet = function() {
  console.log("Hello");
};

変数に関数を代入する書き方です。

アロー関数（ES6）

const greet = () => {
  console.log("Hello");
};

より簡潔に書ける構文です。

引数が1つの場合は、さらに省略できます。

const greet = name => console.log("Hello " + name);

配列と組み合わせるケースも多いため、
👉 「JavaScriptの配列とは？基本と使い方」
の記事もあわせて確認すると理解が深まります。

スコープと関数

関数を理解するうえで欠かせない概念が「スコープ」です。

スコープとは、変数が有効な範囲のことです。

function test() {
  let message = "Hello";
  console.log(message);
}

console.log(message); // エラー

関数内で定義した変数は外からは使えません。

スコープや変数の扱いがあいまいな場合は、
👉 「JavaScriptのオブジェクトとは？基礎から解説」
とあわせて復習すると整理できます。

関数を使うメリット

1. 再利用できる

同じ処理を何度も書く必要がありません。

2. 可読性が上がる

処理ごとに名前をつけることで、コードの意味が明確になります。

3. テストしやすい

関数単位で動作確認が可能になります。

4. 保守性が高まる

修正が必要な場合も、該当関数だけ変更すれば済みます。

実務でよく使う関数パターン

イベント処理

button.addEventListener("click", function() {
  alert("Clicked!");
});

データ処理

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

モダンなJavaScriptでは、配列メソッドとアロー関数の組み合わせが頻繁に使用されます。

関数理解のステップアップ

基礎を理解した後は、次の概念にも挑戦するとよいでしょう。

コールバック関数
無名関数
高階関数
クロージャ
即時実行関数（IIFE）

フレームワークを学ぶ際にも関数の理解は必須です。
👉 「JavaScriptのフレームワークとは？基礎から解説」
の記事も参考になります。

まとめ

JavaScriptの関数は、プログラムを整理し、効率よく書くための基礎中の基礎です。

本記事のポイントは次の通りです。

関数は処理のまとまり
引数と戻り値が重要
function宣言・関数式・アロー関数がある
スコープの理解が不可欠
実務でも頻繁に使用される

関数を自在に扱えるようになると、JavaScript全体の理解が一段と深まります。

基礎を段階的に積み上げることで、確実なスキル定着につながります。