フロントエンド

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

2020年4月追記。

アロー関数をどんどん使う講座を作成したので、

初心者の方はぜひご確認くださいませ。

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

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

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

関連記事

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

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

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

『JavaScript』に限らず、

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

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

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

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

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

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

関連記事

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

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

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

function 関数名(インプット){
 
  ゴニョゴニョ;
 
  return アウトプット;
}

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

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

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

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

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

こんな記号を使います。

=>

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

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

// function
function test(x) {
  return x + 1;
}

// arrow function  引数なし (かっこがいる)
const test = () => 1; // 出力の式が一行の場合はreturnは不要

// arrow function 引数1つ (かっこいらない)
const test = x => x + 1; 

// arrow function 引数2つ以上 (かっこいる)
const test = (x, y) => x + y + 1;

違いは以下。

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

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

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

と思っていたのですが、

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

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

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

Sponsored link

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

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

『配列』の参考記事


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

// オブジェクトの配列
const data = [
  { id: 101, name: 'iPhone' },
  { id: 102, name: 'Android' },
  { id: 103, name: 'Other' },
];

// IDだけ出力する (functionの場合) mapは配列を取得する関数
const ids = data.map(function(row) {
  return row.id;
});
console.log(ids);  // => [101, 102, 103]

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

const ids = data.map(row => row.id); // 引数 => 返り値 という書き方になる
console.log(ids);  // => [101, 102, 103]
アオキ
すっきりしすぎて思わず関数なのこれっ?って思っちゃいますな・・

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

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

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

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

ざっくりいうと、

  • function関数・・thisは関数を呼び出す時に決定
  • アロー関数・・thisは宣言した段階で確定されるという違いがあるようです。

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

param = 'global param';

let printParam = () => {
  console.log(this.param);
}

let object = {
  param: 'object param',
  func: printParam
}
let object2 = {
  param: 'object2 param',
  func: printParam
}

// どっちも global param と表示される
object.func();
object2.func();

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

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

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

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

関連記事

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

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

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

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

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

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

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

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

1. 【Vue.js】初心者向けの動画をリリースしました【Udemy】

2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】

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

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

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

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

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

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

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

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

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


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

コメント

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

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

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  2. データベース

    MySQLの講座をリリースしました
  3. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  4. 生成AI

    Dify講座をリリースしました【非エンジニア向け】
  5. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock