フロントエンド

【アロー関数】とは わかりやすくまとめてみた【JavaScript】

数あるプログラム言語の中でも

ドラスティックに変わった言語といえば、『JavaScript(ジャバスクリプト)』。

2015年を機にガラッと機能が増えました。

関連記事

その中でもよく使う『アロー関数』についてまとめてみることにします。

アオキ
慣れるととてもすっきり書けるようになってきます。
Sponsored link

アロー関数の前に そもそも関数とは

『JavaScript』に限らず、

  • スクラッチでも、
  • PHPでも、
  • Pythonでも、
  • C++でも、

多くのプログラム言語で『関数(かんすう)』という機能を使う事ができます。

  • 関数(かんすう)・・英語でfunction(ファンクション)

『関数』をざっくりいうと、

計算だったり文字の編集だったり、
何かしらの処理をひとまとめにしておける機能の事です。

アオキ
以前、『自動販売機』に例えて記事を書きました。

関連記事

『関数』には大きく分けて3つの情報があります。

  • インプット・・引数(ひきすう)
  • ゴニョゴニョ・・実際の処理
  • アウトプット・・戻り値(もどりち)(処理結果)

以前の『JavaScript』では、
『関数』といえばこんな書き方をしていました。

個人的にはこの書き方で別にいいじゃないと思ったりもするんですが、
(PHPもこんな書き方だし)

この書き方をガラッと変えて、読みやすくしたのが、

『アロー関数』になります。

アロー関数とは functionとの違いを比べてみる

アロー(英語でArrow)は『矢印』という意味で、

こんな記号を使います。

=>

アオキ
まさに『矢印』そのまんまですな・・

これまでの『function』での書き方と、
アロー関数を比べると、こんな違いがあります。

違いは以下。

  • 先頭で変数を定義する(const(定数)かlet(変数))
  • () => {} の形で書く
  • 引数が1つなら()も不要 (引数0なら()は必要)
  • 出力が1行なら{}も不要
  • 出力が1行ならreturnも不要

あまりの変貌っぷりに最初は、

アオキ
形変わりすぎだし、いろいろはしょってるし、なんか見づらいわぁ・・

と思っていたのですが、

意識して何度も書いているうちに、

  • function書かなくていいのは楽かも
  • ()とか{}とかreturn とかはしょっていいのは楽かも

と思えるようになってきたので、
ちょっとずつ使いながら慣れていくといいのかなと思います。

Sponsored link

アロー関数の使い方 関数の引数に関数式を渡すのが楽ちんになる

プログラムでは、
まとまったデータを扱える『配列』や『連想配列』をしょっちゅう使うのですが、

『配列』の参考記事


『配列』に何か処理をかけたい場合に、
とてもすっきり書くことができるようになります。

アロー関数を使うといろいろはしょれるのでこんな書き方ができます。

アオキ
すっきりしすぎて思わず関数なのこれっ?って思っちゃいますな・・

参考記事
アロー関数でさくさくコールバック。

アロー関数とは thisは宣言したタイミングで確定される

『function』を使った関数と、
『アロー関数』を使った関数の大きな違いとして、
いろんなページでも紹介されているのが、『this』の挙動の違い。

『this』は、
関数の中にある要素を指定できる仕組みなのですが、

ざっくりいうと、

  • function関数・・thisは関数を呼び出す時に決定
  • アロー関数・・thisは宣言した段階で確定される

    という違いがあるようです。

結論を言いますと、アロー関数式で宣言された関数は、宣言された時点で、thisを確定(=束縛)させてしまうのです。
参照: 【JavaScript】アロー関数式を学ぶついでにthisも復習する話

アオキ
個人的にはthisは確定した方がわかりやすいのかなと思います。
Sponsored link

アロー関数の注意 IEでは未対応

なにぶん新しい書き方だからか、
インターネットエクスプローラなど一部のブラウザで非対応だったりします。

『Babel(バベル)』などを使う事で
旧来の『JavaScript』に変換ができるので、
実際の現場で使うときはもれなく『Babel』などもセットになるかなと思います。

関連記事

アロー関数とは わかりやすくまとめてみて

2015年前後であまりにドラスティックに変貌を遂げた『JavaScript』。

中でも『アロー関数』は、

あまりにはしょりすぎて元の形なんだったっけ現象が発生しがちなので、

しっかり抑えて使いこなしてイマドキの開発ができるようになりたいもんです。

アオキ
アロー関数使いこなせるとこなれてる感がでてきていい感じですなきっと。

参考記事
イマドキのJavaScriptの書き方2018

『JavaScript関連』ではこんな記事も読まれています。

1. プログラム入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜

2. 【P5.js】遊ぶようにプログラムできるクリエイティブコーディング〜はじめのいっぽ〜(1)

3. 3Dプログラムの基本を【Three.js】でまとめてみた【初心者向け】

4. 【JavaScript】の環境構築の仕方 webpackとbabel【昭和と令和なJavaScript】

5. 【アロー関数】とは わかりやすくまとめてみた【JavaScript】

6. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

7. 【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
  2. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. 音楽

    コードの転回形の練習方法をまとめてみた【大人のピアノ】
  4. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
  5. CG関連

    【WebGL】入門 わかりやすく【図解】してみた
PAGE TOP