Zenn
🍍

[JavaScript]アロー関数 とは（備忘録）

2025/02/11に公開
JavaScript
初心者
メモ
tech

１．はじめに

・アロー関数は、関数式の簡潔な代替構文として導入されました。
アロー関数を使用すると、コードをより短く読みやすくすることができます。

アロー関数の書き方の例
// 処理内容が1行の場合
const 変数名_1 = (引数1) => 処理内容;

// 処理内容が複数行に及ぶ場合
const 変数名_2 = (引数2) => {
    処理内容
};

// 関数を呼び出す
変数名_1(引数1);
変数名_2(引数2);

２．サンプルプログラム

〇例１：

Sample_1.js
// 処理内容が1行の場合の書き方
const calc_1 = (size) =>　size * size;

// 処理内容が複数行に及ぶ場合の書き方
const calc_2 = (size) => {
    return size * size
};

console.log(calc_1(5));
console.log(calc_2(5));
実行結果
25
25

〇例２：三項演算子とアロー関数を併用したプログラム

Sample_2.js
const score = prompt('0～15までの値を、数値のみで入力してください。', '');
// 入力内容を数値に変換
const modify_score = Number(score);

const chk =
    (modify_score >= 16) ? () => console.log('0～15の値を入力してください') :
    (modify_score >= 10) ? () => console.log('素晴らしい') :
    (modify_score >= 5 && modify_score <= 9) ? () => console.log('普通') :
    () => console.log('頑張ろう');

// アロー関数を呼び出す
chk();

〇例３：例２のプログラムをif/else if/elseを使用して修正

Sample_3.js
const score = prompt('0～15までの値を、数値のみで入力してください。', '');
// 入力内容を数値に変換
const modify_score = Number(score);

// アロー関数
const chk = (modify_score) => {
    if (modify_score >= 16) {
        console.log('0～15の値を入力してください');
    } else if (modify_score >= 10) {
        console.log('素晴らしい');
    } else if (modify_score >= 5 && modify_score <= 9) {
        console.log('普通');
    } else {
        console.log('頑張ろう');
    }
};

// アロー関数を呼び出す
chk(modify_score);

３．アロー関数を使用する際の注意点-その１

アロー関数には this 等へのバインドがありません。
そのため、アロー関数をメソッドとして使用するのは適切ではありません。

Sample_1.js
const msg = {
    name: '山田',
    // メソッド
    greet: () => {
        console.log(`こんにちは、${this.name}です`);
    }
};

msg.greet();
実行結果
こんにちは、undefinedです

４．アロー関数を使用する際の注意点-その２

アロー関数をコンストラクターとして使用することはできません。
new をつけて呼び出すと、TypeError が発生します。

Sample_1.js
const Member = (age, name) => {
    this.age = age;
    this.name = name;
};

// インスタンス生成
const member = new Member(25, '田中');

console.log({ age: member.age, name: member.name });
実行結果
TypeError: Member is not a constructor
Sample_2.js
const Member = function(age, name) {
    this.age = age;
    this.name = name;
};

// インスタンス生成
const member = new Member(25, '田中');

console.log({ age: member.age, name: member.name });
実行結果
{ age: 25, name: '田中' }

５．参考

・アロー関数式
・アロー関数の基本
・JavaScriptのアロー関数とは？コードをシンプルにするためのアロー関数の使い方

６．その他

・実行環境

Discussion