JavaScriptのアロー関数入門：基本構文から実践例までステップバイステップ解説

JavaScriptのアロー関数は、関数を宣言するための記法のひとつです。アロー関数を使えば、より簡潔な構文で効率的に関数を書くことができ、単一の式で構成される関数では暗黙的なreturn（戻り値の省略）もサポートされています。

---

関数とは、特定の処理を実行したり値を返したりするコードのまとまりのことです。プログラマーは、繰り返し使えるコードを作るために関数を利用します。これによりプログラムの行数を減らし、全体の効率を高めることができます。

従来、JavaScriptで関数を宣言する方法はfunctionキーワードを使う方法だけでした。しかしES6以降、JavaScriptはアロー関数をサポートしており、より効率的に関数を定義できるようになっています。

このガイドでは、JavaScriptにおける関数の基本をおさらいした上で、アロー関数の使い方を解説します。さらに、どのような場面でアロー関数を使うべきかについても触れながら、実際のコード例を通してその活用方法を見ていきましょう。

JavaScriptの関数のおさらい

JavaScriptで関数を宣言する最も一般的な方法は、通常のfunctionキーワードを使うことです。functionキーワードを使えば、コード内のどこからでも参照できる関数を宣言できます。

JavaScriptの関数の基本構文は次のとおりです。

function nameOfTheFunction() {
   // コード
}

この関数はいくつかの要素で構成されています。まず、functionキーワードで「ここから関数を宣言します」とプログラムに伝えます。次に関数名を指定します。上の例ではnameOfTheFunctionです。関数名には変数と同じ命名規則が適用されるため、キャメルケースで書くのが一般的です。

関数名の後には丸括弧()が続きます。ここには必要に応じて引数（パラメータ）を渡せます。そして、実際の処理内容は波括弧{}の中に記述します。

具体的な例で、JavaScriptの関数がどのように動作するのか見てみましょう。次のコードは、朝のメッセージをコンソールに出力するwakeUpRoutineという関数を作成するものです。

function wakeUpRoutine() {
   console.log('おはようございます！今日は素晴らしい一日です。');
}

この状態でプログラムを実行しても、何も起こりません。これは、関数が宣言されただけで、まだ呼び出されていないためです。関数を実行したいときは、関数名を書いて呼び出します。

wakeUpRoutine();

このプログラムは次の出力を返します。

おはようございます！今日は素晴らしい一日です。

関数は、プログラムの中で実行したい場所ならどこからでも、何度でも呼び出すことができます。

JavaScriptの関数は引数を受け取ることもできます。引数とは、関数に渡される入力値のことで、関数内ではローカル変数として扱われます。たとえば、起床時のメッセージに自分の名前を含めたいとしましょう。その場合は次のようなコードが使えます。

function wakeUpRoutine(name) {
   console.log(`おはようございます、${name}さん！今日は素晴らしい一日です。`);
}

このコードではname引数の中身を定義していません。それは、関数を呼び出すときに値を渡すからです。たとえば名前がPeterだとすると、メッセージに名前を表示させるには次のように書きます。

wakeUpRoutine('Peter');

このプログラムは次の出力を返します。

おはようございます、Peterさん！今日は素晴らしい一日です。

name引数の値（この場合はPeter）がwakeUpRoutine関数に渡され、関数内ではname変数を使って指定された名前を参照できます。

JavaScriptのアロー関数

JavaScriptのアロー関数は「ファットアロー関数」と呼ばれることもあり、ES6で導入された最も人気のある機能のひとつです。この関数式を使うと、より簡潔な構文で効率的に関数を書くことができます。

アロー関数の基本構文は次のとおりです。

functionName = (parameters) => {
   // コード
}

先ほどのwakeUpRoutineの例を使って、アロー関数の書き方を見てみましょう。従来の書き方では「function」キーワードが必要でしたが、アロー関数では代わりに=>という矢印の構文を使います。wakeUpRoutineをアロー関数で書き直すと、次のようになります。

wakeUpRoutine = (name) => {
   console.log(`おはようございます、${name}さん！今日は素晴らしい一日です。`);
}

関数の呼び出し方は、従来の関数とまったく同じです。

wakeUpRoutine('Sophia')

この関数は次の出力を返します。

おはようございます、Sophiaさん！今日は素晴らしい一日です。

アロー関数の構造は従来の関数と非常によく似ています。違いは、functionキーワードを使わず、代わりに=>の矢印を使う点だけです。

さらに、アロー関数ではreturnキーワードを省略できる場面があるため、コードをより簡潔にできます。

暗黙的なreturn（Implicit Return）

アロー関数は、関数の本体が単一の式である場合に特に便利です。本体が1つの式だけであれば、波括弧を外して暗黙的なreturnを使い、関数をさらにシンプルにできます。これは従来の関数にはない特徴で、通常の関数では行数によって定義方法が変わることはありません。

1行で書けるアロー関数の例を見てみましょう。

const multiplyNumbers = (a, b) => a * b;
multiplyNumbers(2, 2);

このコードは4を返します。ご覧のとおり、アロー関数が2つの数値を掛け合わせています。

この暗黙的なreturnの構文は、上の例のように値を返す場合によく使われます。ただし、値を返さない処理を実行するときにも使えます。たとえば、wakeUpRoutineを暗黙的なreturnの構文で書き直すと、次のようになります。

const wakeUpRoutine = name => console.log(`おはようございます、${name}さん！今日は素晴らしい一日です。`);
wakeUpRoutine('Ava');

このコードは次の出力を返します。

おはようございます、Avaさん！今日は素晴らしい一日です。

引数の括弧を省略する

アロー関数では、引数が0個の場合や2個以上の場合には丸括弧が必要ですが、引数がちょうど1つだけのときは括弧を省略できます。

wakeUpRoutine = name => {
   console.log(`おはようございます、${name}さん！今日は素晴らしい一日です。`);
}

ご覧のとおり、name引数が括弧で囲まれなくなりました。

map・filter・reduceとアロー関数の組み合わせ

アロー関数は、JavaScriptの配列メソッドであるmap、filter、reduceと組み合わせてよく使われます。アロー関数を使えば、配列の変換処理をわずか1行で書けるからです。

たとえば、生徒のテストの点数が入った配列があるとしましょう。最近のテストではある設問に不備があり、誰も満点の30点を取れない状況だったため、全員の点数に1点を加算したいとします。テストの点数を修正するために使えるアロー関数の例がこちらです。

const grades = [25, 26, 22, 28];
const fixStudentGrades = grades.map(score => score + 1);
console.log(fixStudentGrades);

このコードは次の出力を返します。

[26, 27, 23, 29]

ご覧のとおり、grades配列の各点数に1が加算されています。

補足：アロー関数とthisの挙動

アロー関数には、もうひとつ知っておきたい重要な特徴があります。それは、通常の関数と異なり、自分自身のthisを持たないという点です。アロー関数内のthisは、定義された場所の外側のスコープにあるthisをそのまま参照します。そのため、コールバック関数の中でthisを扱いたい場合にアロー関数は非常に便利です。一方で、オブジェクトのメソッドとして使う場合は意図しない挙動になることがあるため、注意が必要です。

まとめ

アロー関数は、ES6のJavaScriptで導入された機能で、より効率的で簡潔なコードを書くために使えます。functionステートメントの代わりに=>の矢印を使えるほか、条件によっては1行で関数を書くことも可能です。

このチュートリアルでは、まずJavaScriptにおける関数の基本を確認し、その後アロー関数の書き方を学びました。さらに、暗黙的なreturn、引数の括弧の省略、map・filter・reduceとの組み合わせ、そしてthisの挙動についても解説しました。

これであなたも、プロのようにアロー関数を書くための知識を身につけました！