【完全入門】”=> とは?”JavaScriptのアロー関数の使い方と意味

PR
【完全入門】=> とは?JavaScriptのアロー関数の使い方と意味
この記事は約6分で読めます。

ReactでおなじみのJavaScriptやTypeScriptに登場する「アロー関数(=>)」その使い方と意味、生い立ちについて解説します。

意味をしっかり覚えるとその後の理解が進みます。

PR

PR
PR

PR
PR

“=>” アロー関数とは?(Arrow Functions)

正式には**「アロー関数(Arrow Functions)」**と呼ばれます。

アロー関数は、JavaScriptのES6(ECMAScript 2015)で導入された割と新しい関数定義の方法です。

アロー関数は、従来の関数宣言に比べて簡潔な構文を提供し、特に無名関数やコールバック関数の定義に便利です。

=> という構文を使って定義されることから、「アロー(矢印)関数」と呼ばれます。
定義がより簡単かつ直感的になりました。

アロー関数 =>(矢印)の特徴

  1. 簡潔な構文:
    • アロー関数は、functionキーワードを省略し、=>を使用することで関数を定義します。
  2. 暗黙のreturn:
    • 単一の式を返す場合、中括弧とreturnキーワードを省略できます。
  3. レキシカルthisバインディング:
    • アロー関数は、宣言された場所のthisを継承します。従来の関数と異なり、アロー関数内のthisは、関数が定義されたスコープのthisを保持します。

その前に無名関数(匿名関数)とは?

「匿名関数」と「無名関数」は、同じ意味として使われます。

無名関数(匿名関数)とは、関数名を持たない関数のことです。

主にその場限りで使用する関数や、コールバックとして渡す関数に使われます。

この後例の中で説明しますので、覚えておいてください。

関数定義(ES5以前)とアロー関数(ES6以降)の実装比較

従来の関数定義(ES5以前)は、functionキーワードを使用して行います。

アロー関数(ES6以降)は、=>(矢印)を使って定義します。より簡潔な構文で、特にコールバック関数や無名関数の定義に適しています。

通常の関数

// -------------------------
// 従来の関数定義
// -------------------------
// 名前付き関数
function add(a, b) {
    return a + b;
}

// 匿名関数(関数式) ※ 無名関数とも呼ばれる
const multiply = function(a, b) {
    return a * b;
};
// -------------------------
// ☆アロー関数☆
// -------------------------
// 名前付き関数
const add = (a, b) => {
    return a + b;
};

// 匿名関数(関数式) ※ 無名関数とも呼ばれる
// 一行の内容なら、さらに簡潔に{}カッコが省略できる(暗黙のreturnを使用)
const multiply = (a, b) => a * b;

コールバック関数での使用

// -------------------------
// 従来の関数定義
// -------------------------
const numbers = [1, 2, 3, 4, 5];

// 通常の関数を使ったコールバック
const doubled = numbers.map(function(number) {
    return number * 2;
});

// -------------------------
// ☆アロー関数☆
// -------------------------
const numbers = [1, 2, 3, 4, 5];

// アロー関数を使ったコールバック
const doubled = numbers.map(number => number * 2);

アロー関数が使えない書き方

アロー関数は便利な機能を提供しますが、適していない場合もあります。

特に、アロー関数はコンストラクタとして使用できません。

コンストラクタとして使用できない

アロー関数は、newキーワードでインスタンスを作成するためのコンストラクタとして使用できません。これはアロー関数が持つ特性によるものです。

// -------------------------
// 従来の関数定義
// -------------------------
function Person(name) {
    this.name = name;
    this.age = 0;
}

const person = new Person("Alice");
console.log(person.name);  // 出力: Alice
console.log(person.age);   // 出力: 0

// -------------------------
// ☆アロー関数☆
// -------------------------
const Person = () => {
    this.age = 0;
};

// 以下はエラーになります
const person = new Person();  // TypeError: Person is not a constructor

const Person = (name) => {
    this.name = name;
    this.age = 0;
};

// 以下はエラーになります
const person = new Person("Alice");  // TypeError: Person is not a constructor
  • レキシカルなthisバインディング: アロー関数は、宣言されたスコープのthisを継承します。通常の関数では、newキーワードを使用すると、新しいオブジェクトが作成され、そのオブジェクトがthisとしてバインドされます。しかし、アロー関数はそのような動作をしません。
  • プロトタイプが存在しない: 通常の関数はprototypeプロパティを持ちますが、アロー関数はprototypeプロパティを持ちません。newキーワードを使用すると、新しいオブジェクトは関数のprototypeプロパティを継承しますが、アロー関数にはこのプロパティがないため、継承機構が機能しません。

寄付の依頼

もし、少しでもご参考になりましたらサイト運営への寄付をお願いします。
とても励みになります。

If you would like to help, please make a donation to the site management.
It is very encouraging.

BTC (ビットコイン) アドレス
35AfkHtN3paTC1iNVtHg6BDmCnHmffzQWM
DEEPコイン アドレス
0x43Dbe7F99b4A31bF184b98A8A814ADEC48FB789D
【賃貸にスマートロック】玄関におすすめ後付け可能な鍵比較5選
賃貸でも玄関の鍵にスマートロックを後付けすることが可能です。スマホで楽々解錠、急な来客や彼氏彼女に合鍵シェアっておしゃれですね。徹底的に調べて厳選比較しました。【賃貸OK】ITエンジニアがおすすめする賃貸でもできるスマートハウス化計画!
【React&TypeScript入門】理解が進むreactとtypescriptの違いの話
JavaScript(js)ライブラリのreactとtypescript(ts)の違いについて簡単に解説します。概念の違いをしっかりと抑えておくとその後の学習や開発の際に理解が進むので身につく速度が変わります。基礎的な概念なので必ず覚えておきましょう
需要の高い人気プログラミング言語&フレームワーク【将来性】
数多くの種類の言語からプログラミング初心者にもエンジニアのキャリアアップにも最適な将来性の高い人気のプログラミング言語とおすすめフレームワークを紹介!特に需要の把握はスキルアップと年収に直結です。ガチで必要な全ての選択肢の答えがここに
【完全入門】JavaScriptとJavaの違いと概念を10秒で説明します
プログラミング初心者向け解説!JavaScriptとJavaの違いと概念をコンパクトに10秒でなるべく分かりやすく説明します【すぐわかる】エンジニア完全入門!JavaScriptとJavaは名前が似ているものの全く異なるプログラミング言語です
【React&TypeScript入門】.js .jsx .ts .tsxの違いと使い分けの話
なんとなく使っているけど、.js .jsx .ts .tsxの違いが分からない~使い分けがよくわからない~を解決しよう!React開発でJavaScriptやTypeScriptのどちらを使うべきかそれぞれメリット・デメリットを把握しよう!
PR
PR

コメント

タイトルとURLをコピーしました