JavaScriptのfunctionとアロー関数の違いを解説！初心者でもわかる使い分け方

JavaScriptで関数を定義する方法として、従来のfunctionキーワードを使う方法と、ES6で導入されたアロー関数があります。一見似ていますが、それぞれに特徴や違いがあり、使い方次第でコードの書きやすさが変わります。今回は、「function」と「アロー関数」の違いと、それぞれのメリット・デメリットをわかりやすく解説します！

functionとは？

functionは、JavaScriptの伝統的な関数の定義方法です。以下のように記述します。

function hello(name) {
    return `こんにちは、${name}さん！`;
}

特徴

• 柔軟性が高い
  関数の定義方法がシンプルで、幅広い場面で使えます。
• thisの挙動
  呼び出し元（実行時のコンテキスト）に応じてthisの値が変化します

アロー関数とは？

アロー関数は、コードを簡潔に書けるようにした新しい記法です。以下が基本の構文です。

const hello = (name) => {
    return `こんにちは、${name}さん！`;
}

特徴

• シンプルな記述
  小規模な関数やコールバック関数で便利です。
• thisが固定される
  thisは定義された場所のスコープを保持します。
  これが最大の違いです！

違いを表にしてみた

項目	function	アロー関数
構文	従来の形式	短縮記法
thisの挙動	実行時に決まる（動的）	定義時に決まる（静的）
適用シーン	全般的に使用可能	コールバックや簡潔な処理に最適
newキーワード	インスタンスを作成可能	インスタンスを作成できない

言葉の説明

thisとは

thisは現在の実行コンテキスト（環境）を指すキーワードです。文脈によって指す対象が変わります。
下のようなコードでは、thisはwindowオブジェクトを示します。

console.log(this); 

インスタンスとは

インスタンスは、クラスや関数を元に作られた具体的なオブジェクトを指します。

class Dog {
    constructor(name) {
        this.name = name;
    }
}

const myDog = new Dog("ポチ"); // myDogはDogクラスのインスタンス
console.log(myDog.name); // 出力: ポチ

「Dog」というクラスを基にして、「myDog」というインスタンスが作られています。

newキーワードとは

newキーワードは、クラスやコンストラクタ関数から新しいオブジェクト（インスタンス）を作成するためのものです。

class Cat {
    constructor(name) {
        this.name = name;
    }
}

const myCat = new Cat("ミケ");
console.log(myCat); // Cat { name: 'ミケ' }

「new」を使うと、以下が自動的に行われます。

具体例を用いて理解

thisの違い

functionの場合

const obj = {
    name: "太郎",
    hello: function() {
        console.log(`こんにちは、${this.name}さん！`);
    }
};
obj.hello(); 

// 出力: こんにちは、太郎さん！

thisは、関数が「どこで」呼び出されたかによって決まります。この場合、thisはobjを指します。

アロー関数の場合

const obj = {
    name: "太郎",
    hello: () => {
        console.log(`こんにちは、${this.name}さん！`);
    }
};
obj.hello();

 // 出力: こんにちは、undefinedさん！

アロー関数の「this」は、オブジェクト（obj）ではなく、関数が定義された範囲（つまり、hello関数のこと）を指します。そのため、this.nameはundefinedになります。

コードの簡潔さ

functionの場合

const numbers = [1, 2, 3];
const doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); 

//出力： [2, 4, 6]

アロー関数の場合

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); 

//出力： [2, 4, 6]

アロー関数では「return」や「{}」を省略できるので、スッキリした記述が可能です。

まとめ

どちらも便利なツールですが、目的に応じて使い分けることで、読みやすく保守性の高いコードを書くことができます！自分のプロジェクトに合った方法を試してみてくださいね。