【JavaScript】アロー関数（=>）によるモダンな関数定義の完全ガイド

2026年1月23日

概要

ES6（ECMAScript 2015）から導入された「アロー関数（Arrow Functions）」は、従来の function キーワードを使わずに、矢印記号 => を用いて関数を定義する新しい構文です。コードの記述量が減り可読性が向上するだけでなく、「引数が1つの場合の省略」や「returnの省略」といった強力な短縮記法が利用可能です。本記事では、アロー関数の基本構文から、実務で頻出する省略形のパターンまでを解説します。

仕様（入出力）

入力: 数値などの引数
出力: 計算結果（戻り値）のコンソール出力

基本の使い方

アロー関数は基本的に変数（定数）に代入して使用します。構文は const 関数名 = (引数) => { 処理 }; が基本形となります。

コード全文（HTML / JavaScript）

HTML (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>アロー関数デモ</title>
    <script src="arrow-demo.js" defer></script>
</head>
<body>
    <div class="container">
        <h1>Consoleを確認してください</h1>
        <p>アロー関数の実行結果が出力されています。</p>
    </div>
</body>
</html>

JavaScript (arrow-demo.js)

入力されたパターンを整理し、構文ごとの違いが分かるように実装しました。

/**
 * 1. 基本的なアロー関数（引数が複数の場合）
 * 引数が2つ以上の場合は、() は省略できません。
 * 処理が複数行ある場合は、{} と return が必要です。
 */
const calcSum = (a, b, c) => {
    const result = a + b + c;
    return result;
};

console.log(`合計値: ${calcSum(1, 2, 3)}`); // 6


/**
 * 2. 引数が1つの場合の省略記法
 * 引数が「1つだけ」の場合、引数を囲む () を省略できます。
 * ※好みが分かれますが、Prettier等のフォーマッタでは付ける設定が一般的です。
 */
// 基本形
const myFunction1 = (a) => {
    return a + 2;
};

// () を省略した形
const myFunction2 = a => {
    return a + 2;
};

console.log(`myFunction1: ${myFunction1(10)}`); // 12
console.log(`myFunction2: ${myFunction2(10)}`); // 12


/**
 * 3. 処理が1行の場合の省略記法（暗黙のreturn）
 * 処理内容が「値を返す式」1行だけの場合、
 * {} ブロックと return キーワードを同時に省略できます。
 * これにより非常にシンプルに記述可能です。
 */
const myFunction3 = (a) => a + 2;

console.log(`myFunction3（省略形）: ${myFunction3(10)}`); // 12


/**
 * 応用：引数がない場合
 * 引数がない場合は () を必ず記述する必要があります。
 */
const sayHello = () => console.log("Hello Arrow Function!");
sayHello();

カスタムポイント

省略形の採用基準: チーム開発では「引数の () は常に付ける」「return 省略は単純な計算のみ許可する」といったルールを設けることが多いです。一貫性を保つため、自動整形ツール（Prettierなど）の導入を推奨します。
即時実行関数: (() => { 処理 })(); のように書くことで、定義と同時に実行するパターンも可能です。

注意点

オブジェクトを返す場合の罠: 暗黙のreturnを使ってオブジェクトを返そうとすると、{} がブロックとして解釈されてしまいエラーになります。 const getObj = () => { id: 1 }; // エラーオブジェクトを返す場合は、全体をカッコで囲みます。 const getObj = () => ({ id: 1 }); // OK
this の挙動の違い: アロー関数は、従来の function と異なり、独自の this を持ちません（定義された場所の this を引き継ぎます）。そのため、オブジェクトのメソッド定義やイベントハンドラで this を使いたい場合には注意が必要です。

応用

配列メソッドとの組み合わせ

map や filter などの配列操作メソッドにおいて、アロー関数の省略形は真価を発揮します。

const numbers = [1, 2, 3, 4, 5];

// 従来の書き方
// const doubled = numbers.map(function(num) {
//     return num * 2;
// });

// アロー関数での書き方（非常に簡潔）
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]