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エンジニア採用情報

  関連記事

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

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

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

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

TypeScriptについてまとめてみた

はじめに JavaScript がとりあえずそのまま動くので、雰囲気で使ってしまいがちな TypeScript。初心者向けに基本的なことをまとめてみました。 TypeScript って何? TypeScript はマイクロソフトが開発したプログラミング言語で、オープンソースでメンテナンスされています …

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

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

no image
【未経験からのRuby on Rails – 第1回】楽しく書けるプログラミング言語 “Ruby” とは

こんにちは、はじめまして。新卒1年目のmatsuari(女子)です。 この度、Rubyの勉強を始めることになりまして、 まずはたくさんあるプログラミング言語の中で、なぜ自分がRubyを学ぶのか? しっかりと把握した上で学習に取り組んでいきたいと考え、『Rubyとは何か?』調べました。 超基礎的なこと …

【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …

Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう!」

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Box APIを使う背景・目的 DACはメディアレップです メディアレップとは、インタ …

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

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

iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …

【未経験からのRuby on Rails – 第3回】変数と定数

こんにちは。新卒1年目のmatsuariです。 今回はRubyに限らずプログラミングを学ぶ上で非常に重要となる「変数と定数」について、ご紹介していきます。 変数とは・・・ オブジェクトを一時的に格納しておく箱で、オブジェクトを識別するために利用します。 言葉だけでは理解が難しいかと思いますので、まず …