みみぺんブログ

WEBデザイナー、エンジニア、プログラマー向けの記事を投稿します

アロー関数を使い方をご紹介!使いこなせれば便利でかっこいい!?【JavaScript初心者入門】

【JavaScript】アロー関数を使い方をご紹介!使いこなせれば便利でかっこいい!?

はじめに

こんにちは、かずん(@kazoonLab)です。

ES6(ES2015)にて、JavaScriptにアロー関数が追加されました。

以前に紹介したletconstと同じタイミングでの実装です。 今回の記事は、アロー関数とは何か、どのように使うかをご紹介します!

かずん

この記事を読むと、関数を宣言する方法とアロー関数の使い方についてわかるよ!



「無名関数」とは

アロー関数の説明をする前に、まず「無名関数1について説明します。

関数宣言



ES6以前は、関数は名前付きで宣言しました。下記のコードを参照ください。

// fooという名前で、関数を宣言
function foo () {
  console.log('Foo')
}

// foo関数を実行
foo();  // --> 'Foo'



上のコードでは、関数にfooという名前を付けて宣言しています。

宣言された関数fooは、foo()という形で呼び出すことができます。

このような形で関数を定義することを、関数宣言(function declaration)といいます。

関数宣言には、以下の問題点があります。どちらも、varで変数宣言する場合と似ていますね。

- 巻き戻しが発生する - 上書きできてしまう

このような問題を解消するため、「関数式」という手法があります。見てみましょう。

関数式

関数式とは、通常の変数宣言と同様に、変数に関数を代入することです。下のコードを見てみましょう。

// 名前のない関数を、変数barに代入
const bar = function () {
  console.log('Bar');
}

// bar関数を実行
bar();



上のコードで、functionと()の間に名前がないことにお気づきでしょうか。

変数barには名前のない、「コンソールに'Bar'を表示する」関数が代入されています。この名前のない関数こそが、上で登場した「無名関数」です。

変数に入れられるということは、letやconstを使うことができます。これによって、上述の問題は解消できそうです。

アロー関数とは

ところで、今までの関数の形はいわゆるブロック({}で囲まれている)でした。これをもっと短く書けるようにしたのが、今回のテーマである「アロー関数」です。

先程のbar関数をアロー関数で書くと、以下のようになります。

const bar = () => {
  console.log('Bar');
}
// 呼び出し方は同じ



()の後の=>(arrow, やじるし)から、アロー関数と呼ばれています。おおまかな挙動はfunction()で書いたものと同じです。2

ブロックの中身が一行なら、短縮して書くこともできます。

const bar = () => console.log('Bar');



関数の引数が一つなら、引数の()を外して書くこともできます。

const baz = (str) => console.log(str);
baz('Baz');  // --> Baz



function()では書かなければいけなかったreturnも、

const addition = function (a, b) {
  return a + b;
}
addition(1 + 2);  // --> 3



アロー関数なら省略できます。

const additionArrow = (a, b) => a + b;
additionArrow(4, 5);  // --> 9



このように、アロー関数を使うことで、さらにソースコードを読みやすくさせることができます。

まとめ

今回は、ES6で実装されたアロー関数についてご紹介しました。

使いこなせると、単純で見やすいコードを書けるようになります。ぜひ使ってみてください。

次回の記事では、アロー関数が実際に使われる例の1つ、「Arrayの反復処理」についてご紹介します。


最後までご覧いただきありがとうございます。

この記事がいいなっと思ったら読者登録をお願いいたします♪



【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす!お気軽にフォローもお願いします!
かなきち(@kanakichi0801)
かずん(@kazoonLab)


  1. JavaScriptには本来「無名関数」という概念は存在しませんが、関数宣言との対比で便宜上この言葉を使用しています。

  2. 関数の中で「this」で示されるオブジェクトが異なります。JavaScriptのthisに関しては、今後の記事でご紹介します。