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

  関連記事

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

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

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

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

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

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

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

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

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

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

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

次のようなHTMLがあったとする。 [code language=”html”] <!doctype html> <html lang="jp" ng-app="App"> <head> <me …

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

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

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

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

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

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

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

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