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です)

callback({
	result : "Hello ES6!"
})

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

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)
	}
);

ES6(Promise)を利用した場合

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)
	});

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

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


DACエンジニア採用情報

  関連記事

no image
gulp.jsで広告タグの開発環境を整える

SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …

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

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

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

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

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

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

スクリーンショット 2015-07-31 16.41.25
【未経験からのRuby on Rails – 第3回】変数と定数

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

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

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

no image
Angular.jsのvalueとfactoryの違いを考える

次のようなHTMLがあったとする。 valueとfactoryの違いを考える valueもfactoryもcontrollerから利用する値やfunctionを登録しておくのに使う。そのようなcontrollerの外部に登録されているfunction等をサービスと呼ぶ。たとえば、下記のようにplus …

スクリーンショット 2015-07-31 16.38.02
【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

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

3_001
プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。 普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、 今回は業務とは全く関係ないプログラミングをやってみました。 全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。 初心者の目線から作成方法をつらつ …

no image
Polymer core-ajax の使い方

Polymerのcore-ajaxの使い方。 まずは、index.html my-topicsというCustom Elementに実際の処理を書く。JSONで、とあるサーバからデータを取得する、という想定。本当はJSONPで取りたかったんだけど、それは次回までの課題で… core-aja …