305
301

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ECMAScript6のアロー関数とPromiseまとめ - JavaScript

Last updated at Posted at 2015-12-15

はじめに

この記事ではアロー関数とpromiseについての、使い方のまとめです。とくにpromiseに関しては、非同期処理の鉄板、async.jsとの比較をしながらその実装方法を見ていきます。

そのまえに、ECMAScript6の基本構文はこちら。
[ECMAScript6の基本構文まとめ - JavaScript]
(http://qiita.com/takeharu/items/cbbe017bbdd120015ca0)

技術情報のみつぶやくアカウント作成しました。ECMAScript6などの最新情報も追っていきます。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
Feedly: [Feedlyをフォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)
RSS: http://qiita.com/takeharu/feed

アロー関数

アロー関数の記述の仕方

アロー関数では、従来の無名関数より簡潔に記述できます。

  • Before
var show = function(text) {
  console.log(text);
};
  • After

1.「function」記法を「=>」記法へ

// アロー関数
var show = (text) => {
  console.log(text);
};

2.引数が一つの時には()を省略可能

var show = text => {
  console.log(text);
};

3.さらに一文の場合は、{}とreturnの省略も可能。

var show = (text) => text + ' さようなら';

var text = show('こんにちは');
console.log(text); // こんにちは さようなら

thisを束縛する

まずthisの挙動では、JavaScript初学者は必ずといっていいほど悩まされます。
今までだと、bindでthisを束縛したり、thisを別名の変数に退避する方法などがありました。一般的には後者の退避がよくつかわれます。_this, self, thatなどといった変数名にするのが通例となっています。
ECMAScript6からはアロー関数を用いることにより、thisを束縛し、予想通りの挙動を得ることができます。

thisの挙動についてはこちら
[JavaScriptの「this」は「4種類」??]
(http://qiita.com/takeharu/items/9935ce476a17d6258e27)

  • Before
var counter = {
  count: 0,

  start: function() {
    // thisを別名で退避
    var self = this;

    setTimeout(function() {
      // ここでのthisはcounterではないため、退避した変数selfを使用する
      self.count++;
    }, 1000);
  }
};
  • After
var counter = {
  count: 0,

  start: function() {
    setTimeout(() => {
      this.count++
    }, 1000);
  }
};

非同期処理を処理する、Promise(async.jsとの比較)

こちらでは、非同期処理の鉄板、async.jsとの比較をしながらその実装方法を見ていきます。

async.jsの基本的な使い方はこちら
[JavaScriptのasync.jsでwaterfallとseries、parallelの違い]
(http://qiita.com/takeharu/items/84ffbee23b8edcbb2e21)

Promise.resolveメソッドによる順次処理の実行(async.jsのwaterfall)

  • asycn.waterfall

async.jsのwaterfallとの比較です。

async.waterfall([
  function(callback) {
    console.log('1');
    setTimeout(function() {
      console.log('1 done');
      callback(null, 1);
    }, 100);
  },
  
  function(value, callback) { // value === 1
    console.log('2');
    setTimeout(function() {
      console.log('2 done');
      callback(null, 2);
    }, 50);
  },
  
  function(value, callback) { // value === 2
    console.log('3');
    setTimeout(function() {
      console.log('3 done');
      callback(null, 3);
    }, 10);
  }
], function(err, value) { // value === 3
  if (err) {
    return console.log(err);
  }
  console.log('all done.');
});

//出力結果
1
1 done
2
2 done
3
3 done
all done.
  • Promise.resolveメソッドによる順次処理

Promise.resolveメソッドでは、thenによるメソッドチェーンにより、直感的にわかりやすく、順次処理を実現できます。resolveの引数に後続の処理へと値を渡すことができます。

Promise.resolve()
.then(function() {
  return new Promise(function(resolve, reject) {
    console.log('1');
    setTimeout(function() {
      console.log('1 done');
      resolve(1);
    }, 100);
  })
})
.then(function(value) { // value === 1
  return new Promise(function(resolve, reject) {
    console.log('2');
    setTimeout(function() {
      console.log('2 done');
      resolve(2);
    }, 50);
  });
})
.then(function(value) { // value === 2
  return new Promise(function(resolve, reject) {
    console.log('3');
    setTimeout(function() {
      console.log('3 done');
      resolve(3);
    }, 10);
  });
})
.then(function(value) { // value === 3
  console.log('all done');
})
.catch(function(err) {
  console.log(err);
})
;
  
//出力結果
1
1 done
2
2 done
3
3 done
all done.

Promise.allメソッドによる非同期処理の複数同時実行(async.jsのparallel)

  • async.parallel

async.jsのparallelとの比較です。

async.parallel([
  function(callback) {
    console.log('1');
    setTimeout(function() {
      console.log('1 done');
      callback(null, 1);
    }, 100);
  },
  
  function(callback) {
    console.log('2');
    setTimeout(function() {
      console.log('2 done');
      callback(null, 2);
    }, 50);
  },
  
  function(callback) {
    console.log('3');
    setTimeout(function() {
      console.log('3 done');
      callback(null, 3);
    }, 10);
  }
], function(err, results) {
  if (err) { 
    return console.log(err);
  }
  console.log('all done');
  console.log(results);
});

//出力結果
1
2
3
3 done
2 done
1 done
all done
[1, 2, 3] 
  • Promise.all

Promise.allメソッドでは、配列でPromiseオブジェクトを渡すことにより、それらの処理を非同期で並列に処理することが可能となります。

Promise.all([
  new Promise(function(resolve, reject) {
    console.log('1');
    setTimeout(function() {
      console.log('1 done');
      resolve(1);
    }, 100);
  }),

  new Promise(function(resolve, reject) {
    console.log('2');
    setTimeout(function() {
      console.log('2 done');
      resolve(2);
    }, 50);
  }),

  new Promise(function(resolve, reject) {
    console.log('3');
    setTimeout(function() {
      console.log('3 done');
      resolve(3);
    }, 10);
  })
]).then(
  function(results) {
    console.log('all done');
    console.log(results);
  },

  function(err) {
    console.log(err);
  }
);

//出力結果
1
2
3
3 done
2 done
1 done
all done
[1, 2, 3] 

Promise.raceメソッド

上記のようにPromise.allメソッドはすべての処理が完了されてから、後続の処理が実行されます。それに対してPromise.raceメソッドは、一つでも処理が完了されるとその時点で後続の処理を実行します。

Promise.race([
  new Promise(function(resolve, reject) {
    console.log('1');
    setTimeout(function() {
      console.log('1 done');
      resolve(1);
    }, 100);
  }),

  new Promise(function(resolve, reject) {
    console.log('2');
    setTimeout(function() {
      console.log('2 done');
      resolve(2);
    }, 50);
  }),

  new Promise(function(resolve, reject) {
    console.log('3');
    setTimeout(function() {
      console.log('3 done');
      resolve(3);
    }, 10);
  })
]).then(
  function(results) {
    console.log('first done');
  },

  function(err) {
    console.log(err);
  }
);

//出力結果
1
2
3
3 done
first done
2 done
1 done

後編の記事

ECMAScript6の最後の記事ではクラスについてまとめます。

アカウント

技術情報のみつぶやくアカウント作成しました。ECMAScript6などの最新情報も追っていきます。
Twitter: [@takeharumikami]
(https://twitter.com/takeharumikami)

RSSはこちら
Feedly: [Feedlyをフォロー]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)
RSS: http://qiita.com/takeharu/feed

おすすめの記事

ECMAScript6の基本構文はこちら。
[もうはじめよう、ECMAScript6の基本構文まとめ - JavaScript]
(http://qiita.com/takeharu/items/cbbe017bbdd120015ca0)

JavaScriptでは関数型言語の一部の機能?実践的なJavaScriptの関数型とは。
JavaScriptで関数型プログラミングの入門

良質なスタイルガイドを真似したいなら、GoogleやjQueryを参考に。
Javascriptのスタイルガイドまとめ(おすすめ4選)

305
301
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
305
301

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?