ITスキル・ノウハウ

【初心者向け】JavaScriptのアロー関数について解説

JavaScript-arrow

こんにちは、ラーメン好きなフリーランスエンジニアの”ぽんねぐ”です。

JavaScriptを習い始めた方は「アロー関数」というキーワードを耳にしたことがあるかもしれません。

「=>」左記のような記号で表されるけど、お作法のように覚えている方も少なくないと思います。

私自身も勉強し始めの頃は特に意識することなく使っておりましたが、アロー関数と他の宣言方法との違いやメリットデメリットについて調べる機会があったため、まとめてみました。

本記事を最後まで読んで頂くことで以下のようなお悩みを解決できます。

この記事で解決できるお悩み

以下の関連記事についても一緒にご確認頂けるとJavaScriptのことがもっと理解できます。

まずは簡単に私のことを紹介します。

プロフィール

・システムエンジニア歴：6年（会社員：5年、フリーランス：1年）

・退職後すぐに案件獲得に成功し、1年間継続中

・独立後の年収は正社員時代の2倍を達成

それでは始めていきましょう。

アロー関数とは？

基本構文を用いて解説

アロー関数（arrow function）は、JavaScriptのES6（ECMAScript 2015）で導入された、関数を簡潔に記述するための構文です。=>（矢印）を使って定義されるため、「アロー関数」と呼ばれます。

ES6とは？

要約するとJavaScriptの6回目のメジャーバージョンということ。

アロー関数は、以下の3つの要素で成り立っています。

  1. 引数: 関数に渡す値。
  2. 矢印 (=>): アロー関数であることを示す。
  3. 関数の処理: 実際に実行するコード。

基本形：

(param1, param2, …, paramN) => { 処理内容 }

サンプルコード：

JavaScript
const add = (a, b) => {
    return a + b;
};
console.log(add(2, 3)); // 出力: 5

説明:

  • a と b が引数(param1,param2)です。
  • return a + b; が処理内容です。

上記のアロー関数を通常の関数で書くと以下のようになります。

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

アロー関数の様々な書き方

アロー関数は引数の数やアロー関数内の処理行数に応じて記述方法を変更することが出来ます。

ここでは様々な書き方を紹介します。

引数が1つの場合

引数が1つだけなら、引数の括弧 () を省略できます。

JavaScript
const square = x => x * x;
console.log(square(4)); // 出力: 16

説明:

  • 引数は x だけなので括弧を省略しています。
  • x * x はワンライナーの処理で、return 文も不要です。

引数がない場合

引数がない場合は、空の括弧 () を記述します。

JavaScript
const greet = () => "Hello!";
console.log(greet()); // 出力: Hello!

説明:

  • () は引数がないことを示しています。
  • 処理内容は "Hello!" を返すだけです。

処理が1行の場合

処理が1行だけなら、{} と return を省略できます。

JavaScript
const double = n => n * 2;
console.log(double(5)); // 出力: 10

説明:

  • 処理が n * 2 のみで {} を省略しています。
  • 省略した場合、結果が自動的に返されます。

処理が複数行の場合

処理が複数行の場合は {} を使い、明示的に return が必要です。

JavaScript
const multiplyAndLog = (a, b) => {
    const result = a * b;
    console.log(result);
    return result;
};
console.log(multiplyAndLog(3, 4)); // 出力: 12（コンソールに出力）

説明:

  • {} を使うことで複数行の処理を記述できます。
  • return 文で結果を明示的に返しています。

基本構文のまとめ：

引数の数書き方例
０個() => 処理() => "Hello!"
１個param => 処理x => x * x
２個以上(param1, param2) => 処理(a, b) => a + b
複数行処理(param1, param2) => { 処理内容 }(a, b) => { const sum = a + b; return sum; }

他の関数宣言方法

JavaScriptではアロー関数以外にも以下のような関数の宣言方法があります。

通常の関数宣言

JavaScript
function greet(name) {
    return `Hello, ${name}`;
}

クラス内メソッド

JavaScript
class Person {
    greet() {
        return 'Hello!';
    }
}

アロー関数と他との違いは？

アロー関数は以下の特徴を持ちます。

１つずつ見ていきましょう。

this を継承する

アロー関数は親スコープの this を継承します。従来の関数では this は呼び出し元（呼び出し方）によって決まります。

JavaScript
const obj = {
    name: "Alice",
    greet: function() {
        setTimeout(function() {
            console.log(this.name); // undefined（グローバルスコープの this）
        }, 1000);
    },
    greetArrow: function() {
        setTimeout(() => {
            console.log(this.name); // Alice（親スコープの this を継承）
        }, 1000);
    },
};
obj.greet();
obj.greetArrow();

上記コードのように従来のコードですと、親スコープのnameを継承することが出来ず、undefinedとなってしまいます。

短縮構文である

アロー関数はコードが短縮される特徴があります。そのため、読みやすく担当者が変わった際にも保守しやすくなります。

JavaScript
// 通常の関数式
const add = function(a, b) {
    return a + b;
};

// アロー関数
const addArrow = (a, b) => a + b;

上記コードのように３行使っていたコードを１行で表現出来ました。

arguments キーワードが使えない

アロー関数は arguments オブジェクトを持ちません。必要なら ...rest を使用します。

JavaScript
function normalFunc() {
    console.log(arguments); // [1, 2, 3]
}
const arrowFunc = (...args) => {
    console.log(args); // [1, 2, 3]
};
normalFunc(1, 2, 3);
arrowFunc(1, 2, 3);

コンストラクターとして使用不可

アロー関数は new 演算子と一緒に使えません。クラスやプロトタイプベースのコードでアロー関数は使用できませんので注意しましょう。

JavaScript
const Func = () => {};
const obj = new Func(); // エラー

まとめ

本記事では、Javascriptのアロー関数について基本的な使い方から特徴まで紹介しました。

アロー関数は近年人気の宣言方法であるため、特徴を踏まえつつ利用していくと開発の効率化や保守性を高めることに有効的です。

何か不明点などございましたらコメント欄に記載頂けたらと思います！

以上、最後までお読みいただきありがとうございました。

-ITスキル・ノウハウ