ECMAScript6を使ってみた ~「Promise」編


ECMAScript6とは

一応ちょっとだけ説明しておくと、
ECMAScript(エクマスクリプト)は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。(以下、ES6と呼びます)

ES6ではconstやlet、デフォルトパラメータ、arrow function、Set/Map,Symbolなど
新しい仕様がたくさん追加されていますが、今回はPromiseを使ってみたいと思います。

ちなみに各ブラウザの実装状況は以下のサイトで確認できます。
https://kangax.github.io/compat-table/es6/

Promiseとは

Promiseは非同期処理を抽象化したオブジェクトとそれを操作する仕組みです。
細かくは以下のサイトを見てもらったほうが早いでしょう!

JavaScript Promiseの本

JavaScript Promises: There and back again – HTML5 Rocks

Promiseを使ってJSONPを実装してみた

具体的な活用方法が思いつかなかったので、とりあえず簡単なところで
アドテクで割とよく使われるJSONPでデータを取得する処理をPromiseを使って実装してみました。

  • リクエスト先
    http://yebisupress.dac.co.jp/wp-content/uploads/2015/07/jsonp.js
    内容 (単純にcallbackするだけのjsです)

[code language=”javascript”]
callback({
result : "Hello ES6!"
})
[/code]

ES6(Promise)を利用しない場合

[code language=”javascript”]
var jsonp = function(url, success, failure) {
window.callback = function(res){
success(res)
};
var base = document.getElementsByTagName("script")[0];
var obj = document.createElement("script");
obj.async = true;
obj.src = url;
obj.onerror = function(){
failure("Request Error")
};
base.parentNode.insertBefore(obj,base);
};
jsonp(
"http://yebisupress.dac.co.jp/wp-content/uploads/2015/07/jsonp.js",
// リクエストが成功したときの処理
function(res){
console.log(res.result)
},
// 失敗したときの処理
function(err){
console.log(err)
}
);
[/code]

ES6(Promise)を利用した場合

[code language=”javascript”]
var jsonp = function(url) {
return new Promise(function (resolve, reject) {
window.callback = function(res){
resolve(res)
};
var base = document.getElementsByTagName("script")[0];
var obj = document.createElement("script");
obj.async = true;
obj.src = url;
obj.onerror = function(){
reject("Request Error")
};
base.parentNode.insertBefore(obj,base);
});
}

var p = jsonp("http://yebisupress.dac.co.jp/wp-content/uploads/2015/07/jsonp.js")
.then(function(res){
console.log(res.result)
}).catch(function(err){
console.log(err)
});
[/code]

成功した場合には「resolve」、失敗した場合には「reject」を実行しています。
また、実行時には「.then」,「.catch」で成功/失敗時の処理を行っています。

スッキリしたような、全然そんなことないような。。。
サンプルコードが悪かったかな。


DACエンジニア採用情報

  関連記事

Qiita Team API と Google Spread Sheet でチーム日報を生成する

チーム日報を活用する MarketOne 開発チームでは複数拠点に分かれての開発を行っています。リモート開発が中心となると口頭でのコミュニケーションに限界があるため、テキストベースのコミュニケーションの比重が高い状態にあります。 チケットシステムやソースコード管理ツール上の議論はもちろんおこなってい …

【小ネタ】JSで要素の組み合わせを列挙する

下記のような、キーの数や要素数が可変のデータの組み合わせを、列挙するjavascriptコードです。 pythonにはitertoolなどの順列・組み合わせ計算を行う定番ライブラリがあるようです。 やっている事ですが、イメージとしては組み合わせを数列に置き換えています。 1桁目が2進数、3桁目が3進 …

no image
【小ネタ】Javascriptのconsoleオブジェクトをもっと便利に使う方法

すごく便利なconsoleオブジェクトですが、ブラウザによってサポートされているメソッドが なかったり、そもそもconsoleオブジェクトが使えなかったりと、たまに不便だったりします。 そんなときによく使う便利なコード。 [code language=”javascript” …

【未経験からのRuby on Rails – 第4回】Railsアプリケーション開発をしよう! 〜開発の準備編〜

こんにちは。新卒のmatsuariです。 Rubyについてまだまだ知るべきことはたくさんありますが、とにかく早くアプリを作りたい! ということで、今回はアプリ開発の準備に取り掛かっていきます。 Rubyはアプリを作成しながら、同時に学んでいきたいと思います。 Railsアプリケーション開発の準備《 …

Selenium × PHP でテスト自動化!【環境構築編】

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …

PyStanによるはじめてのマルコフ連鎖モンテカルロ法

はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …

no image
Polymer on Rails

Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。 説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。) 簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。 Custom Elements, 説明 …

Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発・保守を担当しています。 エンジニアの皆さん、デザインってどうしてます? わたくしはプライベートでとあるW …

ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …