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

  関連記事

ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築

概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …

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

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

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

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

SDKってどうやって作ってるの?【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …

Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

(社内新卒・PHPビギナー向け)MacでPHP7開発環境を構築しよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 えっ!?新卒のプログラミング研修はPHPで行われるって?!俺の得意言語やないか!! は …

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

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

Railsたった14行でアドサーバーAPIができた話

こんにちは。駆け出しエンジニアの近江です。 最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。 広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …

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

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

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

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