JavaScript

JavaScriptのアロー関数とは【ES2015からの新機能】

どうも、つよぽんです!

今回は、JavaScriptの「アロー関数」について解説をします。

今回解説する「アロー関数」はJavaScriptで関数を定義する1つの方法となります。

前回・前々回の記事でも、JavaScriptで関数を定義する別の方法として「関数宣言」「関数式」について解説しました。

関数宣言・関数式について忘れてしまった方は以下の記事を参考にしていただけたらと思います。

あわせて読みたい
【入門】JavaScriptで関数を定義する【関数宣言・意義】JavaScriptでは関数の定義方法が3つあります。①関数宣言、②関数式、③アロー関数。この3つの内、今回は①関数宣言を使った関数の定義方法を取り上げます。その他にも「関数の実行方法」「なぜ関数を作るのかの意義」についても解説します。...
あわせて読みたい
JavaScriptの関数式で関数を作る【使う時の注意点も解説】どうも、つよぽんです! 今回は、JavaScriptの関数式について解説をします。 今回解説する「関数式」はJavaScri...

今回の記事は次のような方に向けて書きました。

想定読者
  • アロー関数って何?
  • アロー関数の書き方を知りたい
  • functionを使って関数を作ったときと、アロー関数で関数を作ったときでthisの挙動が違うって聞いたけど、どう挙動が違うのか知りたい

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptのアロー関数を覚えるこれまで「関数宣言」「関数式」と2つの関数の書き方を解説しました。今回はES2015から新しく追加された新しい関数の書き方である「アロー関数」について解説をします。「関数宣言」「関数式」「アロー関数」の3つの違いを把握して関数の基本的な書き方をマスターしましょう。...

それでは次の内容で話を進めていきます。

今回の内容
  1. JavaScriptのアロー関数とは
  2. JavaScriptのアロー関数の書き方
  3. JavaScriptのアロー関数とfunctionでのthisの挙動の違い(中級者以上向けの内容)

 

JavaScriptのアロー関数とは

この章では「JavaScriptのアロー関数とは何か?」について解説します。

アロー関数とは「ES2015」またの名を「ES6」というバージョンから追加されたJavaScriptの新しい関数の書き方となります。

ES2015(ES6)に関しては以下の記事がよくまとめられているのでそちらを参考にしていただけたらと思います。

Qiita : ES2015(ES6) 入門

アロー関数を使って関数を定義する際には、これまで関数定義に使ってきた「function」キーワードを利用しません。

それではどのようにして関数を定義すれば良いのでしょう?

アロー(arrow)」という名前の通り、矢印のような書き方をします。具体的には「=>」を使います。

それでは次の章で具体的どのように「=>」を使っていくか見ていきましょう。

JavaScriptのアロー関数の書き方

この章では「JavaScriptのアロー関数の書き方」について解説します。

書き方

前の章の終わりでもアロー関数で関数を定義するときは、名前の通り矢印のような書き方、つまり「=>」を使って関数を定義すると説明しました。

以下の画像はアロー関数の書き方をまとめたものになります。

アロー関数の書き方アロー関数の書き方

上の画像でも書いてあるとおり、アロー関数で定義した関数は変数に代入するのが基本的な書き方となります。

というのも、functionキーワードを使ったときと異なり、アロー関数では関数名を書くことが出来ないためです。つまり「関数式」の形式で書くことになります。

関数式に関しては以下の記事で解説しています。

あわせて読みたい
JavaScriptの関数式で関数を作る【使う時の注意点も解説】どうも、つよぽんです! 今回は、JavaScriptの関数式について解説をします。 今回解説する「関数式」はJavaScri...

functionキーワードを使って関数を定義するときは「function(){処理内容}」という書き方をしました。

アロー関数のときは、「function」というキーワードの代わりに「=>」になり、置かれる位置も「()」と「{処理内容}」の間にセットされて「() => {処理内容}」となります。

サンプルコード

以下の画像は、アロー関数を使って関数を定義しいたサンプルコードとなります。

アロー関数を使ったサンプルコードアロー関数を使ったサンプルコード

関数式と使い方は同じになるので、「変数名()」で関数を定義することが出来ます。

つまり、上の画像のサンプルコードでは「hello()」とすることでhello関数が実行されます。

上の画像内で使われているサンプルコードは以下のリンクから直接確認することが出来ます。

アロー関数のサンプルその1

関数宣言・関数式・アロー関数の比較

以下の画像は、前回・前々回の記事で解説した「関数宣言」「関数式」と、今回解説している「アロー関数」の3つの書き方を比較したものです。

関数宣言・関数式・アロー関数の比較関数宣言・関数式・アロー関数の比較

画像内の3つの関数の挙動はどれも同じで、全て「hello()」とhello関数を実行することが出来ます。

JavaScriptのアロー関数とfunctionでのthisの挙動の違い(中級者以上向けの内容)

この章では「アロー関数とfunctionで関数を定義した際のthisの挙動の違い」を理解するのに役立つ参考記事の紹介だけしておきます。

今回のアロー関数の解説記事の元となっているスライドでも「this」の挙動の違いについては「おまけ」として紹介していて、JavaScript中級者以上の内容となります。

あわせて読みたい
JavaScriptのアロー関数を覚えるこれまで「関数宣言」「関数式」と2つの関数の書き方を解説しました。今回はES2015から新しく追加された新しい関数の書き方である「アロー関数」について解説をします。「関数宣言」「関数式」「アロー関数」の3つの違いを把握して関数の基本的な書き方をマスターしましょう。...

そのため、「まだ関数についての理解が十分でない」「参照って何?」という方は、一旦は「this」の挙動の違いについては一旦は無視しても問題ありません。

逆に、「関数をほぼほぼ完璧に理解している」「参照も理解している」という方は上記に挙げた参考記事を読むことで「this」の挙動の違いを理解できるかと思います。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. アロー関数とは「ES2015(ES6)」から追加された新しい関数の書き方
  2. アロー関数は、名前(arrow)の通り矢印(=>)を使った書き方をする。
  3. アロー関数で定義した関数と、functionを使って定義した関数ではthisの挙動が変わってくる

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptのアロー関数を覚えるこれまで「関数宣言」「関数式」と2つの関数の書き方を解説しました。今回はES2015から新しく追加された新しい関数の書き方である「アロー関数」について解説をします。「関数宣言」「関数式」「アロー関数」の3つの違いを把握して関数の基本的な書き方をマスターしましょう。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です