Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript アロー関数

アロー関数はES6で導入されました。

アロー関数を使用すると、より短い関数構文を記述できます。

let myFunction = (a, b) => a * b;



Before Arrow:

hello = function() {   return "Hello World!"; }

With Arrow Function：

hello = () => {   return "Hello World!"; }

より短くなる！関数にステートメントが1つだけあり、そのステートメントが値を返す場合は、括弧とreturnキーワードを削除できます。

アロー関数のデフォルトの戻り値

hello = () => "Hello World!";

注:これは、関数にステートメントが1つしかない場合にのみ機能します。

パラメータがある場合は、括弧内にパラメータを渡します。

パラメーター付きアロー関数:

hello = (val) => "Hello " + val;

実際、パラメータが1つだけの場合は、括弧も省略できます。

括弧のないアロー関数

hello = val => "Hello " + val;

何についてのthis?

アロー関数では通常の関数と比べてthisの扱いも異なります。

つまり、アロー関数ではthisのバインドはありません。

通常の関数では、thisキーワードは関数を呼び出すオブジェクト (ウィンドウ、ドキュメント、ボタンなど) を表します。

アロー関数の場合、thisキーワードは常にアロー関数を定義したオブジェクトを表します。

違いを理解するために、2つの例を見てみましょう。

どちらの例もメソッドを2回呼び出します。1回目はページの読み込み時、もう1回はユーザーがボタンをクリックしたときです。

最初の例では通常の関数を使用し、2番目の例ではアロー関数を使用しています。

結果は、最初の例が2つの異なるオブジェクト(ウィンドウとボタン)を返し、2番目の例がウィンドウ オブジェクトを2回返すことを示しています。これは、ウィンドウオブジェクトが関数の「所有者」であるためです。

例

通常の関数では、関数を呼び出すthisオブジェクトを表します。

// Regular Function: hello = function() {   document.getElementById("demo").innerHTML += this; } // The window object calls the function: window.addEventListener("load", hello); // A button object calls the function: document.getElementById("btn").addEventListener("click", hello);

例

アロー関数付きのthisは関数の所有者を表します 。

// Arrow Function: hello = () => {   document.getElementById("demo").innerHTML += this; } // The window object calls the function: window.addEventListener("load", hello); // A button object calls the function: document.getElementById("btn").addEventListener("click", hello);

関数を操作するときは、これらの違いを覚えておいてください。通常の関数の動作が必要な場合もありますが、そうでない場合はアロー関数を使用してください。

ブラウザのサポート

次の表は、JavaScriptのアロー関数を完全にサポートする最初のブラウザのバージョンを定義しています。


Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
2015年9月 2015年7月 2013年5月 2016年9月 2015年9月


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル