You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - YahooArchive/ypromise: An ES6 Promise polyfill
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ES6のシンタックスを予習復習(1) ~let, const, arrow function, generators, for of~ | 1000ch.net
ECMAScript6 ES6のフォローについては書こうとしていたものの後手に回っていまして、ようやく書くに至ります。 SetやらMapやら、追加クラスのあたりは実装されても試そうとした時にそんなに障壁にならない気がしてますが、 letとかconst、アローファンクション等々、シンタックスが関わる辺はつっかえ棒になりかねないので消化しておきます。 この段階での実装状況はNightly > Canary Chrome Canary 34.0.1760.0 Firefox Nightly 29.0a1 (2013-12-25) この2つをECMAScript 6 compatibility tableで比較するとNightlyのほうが先行実装は進んでいるのでNightlyでアレコレします。 Canaryだと試したいシンタックス部分がまだ実装されていないので断念。 Canaryでデバッグしたい人
この記事はTech-Circle Hands on Advent Calendar 2016の2日目の記事です。 昨日はtominaga443さんのパワポでつくるスマホアプリ: CanvasFlipでインタラクティブなプロトタイピングでした。 引き続きフロントエンド週間ですが、今日はJavaScript行ってみましょう。 「JavaScript? うん、まぁ最近書いてないけど、ある程度は読み書きできるよ」 とか言っていたのもつかの間、新しめのコードを見てみるとES6(ES2015)、ES2016で追加された新しい記法に打ちのめされたりします。 ReactやらReduxやら、新しい技術はどんどん出てきますが、学ぶ際に記法で嵌っているとコアな部分に集中できないので、まずは新しい記法に慣れてしまいましょう。 わかってしまえば単なる便利記法なので難しくないです。 なお、React/Reduxのコー
Using ES6 and ES7 in the Browser, with Babel 6 and Webpack
This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading to Babel 6, start with Six Things You Need To Know About Babel 6. The Babel CLI is great for compiling ES6 to ES5 on a file-by-file basis. However, when Babel encounters an import statement, it outputs a require call – which won’t get you very far in the browser. To make our Babel output browser
JavaScript ES6のAsync/Awaitで非同期処理とエラー処理、並列処理を解説！初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
この記事では、ES6のasync/await、およびPromises.all()を使用して非同期プログラミングを容易にする方法を学習します。 前回でのPromiseチュートリアルは以下で学ぶことができますので参照ください。 dev-k.hatenablog.com async/awaitとは asyncキーワード awaitキーワード Promise並列処理 async/awaitでのループ エラー処理 async/awaitでFetchを使用する方法 使用に関する注意点(ルール) 最後に async/awaitとは async/awaitは技術的に言えば、Promisesのシンタックスシュガー(Syntax sugar)となります。 シンタックスシュガーとは簡単に言ってしまえば、構文を省略しプログラムを書いていく事をシンタックスシュガーと言います。 ですが、これはプログラミング言語によっ
サーバーサイドReactをwebpackを使って最小構成で試す (ES6 ＆ TypeScript) - Namiking.net
サーバーサイドのReactに触れたことがなかったので、React+Express+webpackで試してみた。今回試行した手順をチュートリアル的にまとめておく。まずは、シンプルにできそうなECMAScript6で試して、後半にTypeScriptで組んだソースも、おまけ的に載せておきます。 この記事の方針 クライアント -> サーバーサイド -> 結びつける。の順に実装を行う なるべくシンプルにするために、実用構成というよりは、最小構成で動かす。 コンポーネントのプリレンダやState遷移の確認までを行う。 サーバーAPIとの通信や画面遷移は、今回扱わない。 実装するサンプルアプリの内容 チュートリアルでよくありそうな、シンプルなカウンターアプリを動かす。 事前に必要なソフトウェア node.js (v5.6.0) npm (v3.6.0) 現時点の安定版を使ってみたが、そこまで新しくなく
※こちらは2015/9/25日の古い記事です。（ESLint v1.5.1 released 22 September 2015） 現時点(2019/9/25)ではESLint v6.4.0です。 最新のドキュメントを読みに行くことを強くオススメします。 (近いうち新たに加筆してこちらに更新する予定です) こんにちは。森田と申します。芸人をしています。今回は ESLintのエラールール。日本語「ざっくりしたの」ないのか、と思ってぐぐしてもなさそうなので書きました。 よろしくお願いします。 ※使い方はこちら ※ここに載っているのが「ESlintのルール全て」ではありません。 他にこちら書きました ESLintのエラールール。日本語ざっくり解説[可能性あるエラー編] ESLintのエラールール。日本語ざっくり解説[ベストプラクティス編] ESLintのエラールール。日本語ざっくり解説[スタイル
![ESLintのエラールール。日本語ざっくり解説[ES6編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2e1e2ca01cf321cd9d16fb12e215c9bd512fcff/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9RVNMaW50JUUzJTgxJUFFJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgzJUJDJUUzJTgzJUFCJUUzJTgwJTgyJUU2JTk3JUE1JUU2JTlDJUFDJUU4JUFBJTlFJUUzJTgxJTk2JUUzJTgxJUEzJUUzJTgxJThGJUUzJTgyJThBJUU4JUE3JUEzJUU4JUFBJUFDJTVCRVM2JUU3JUI3JUE4JTVEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00MDM5ODJmNjU4ZjQ2YTY5YWU2NTJiODk3MjNlZTIxZA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTS1JU08mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFlM2E4YTBkMWUyYjBmNWVmMTQ0ZGRkOWY2NDFmZWI0%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D3b2aabb744809880e55ad3c07f497837)
Classes (ES6) Sample
Available in Chrome 42+ | View on GitHub | Browse Samples Background ES6 Classes formalize the common JavaScript pattern of simulating class-like inheritance hierarchies using functions and prototypes. They are effectively simple sugaring over prototype-based OO, offering a convenient declarative form for class patterns which encourage interoperability. Classes (as shipped in Chrome) support proto
GitHub - koajs/koala: [SEEKING MAINTAINER] An HTTP/2 and ES6 Module-ready Koa Suite
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![GitHub - koajs/koala: [SEEKING MAINTAINER] An HTTP/2 and ES6 Module-ready Koa Suite](https://cdn-ak-scissors.b.st-hatena.com/image/square/fa87ae57bfddeb580d04dce8f5b1e9d2dc28c70b/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Fc470d7759f773efde06350eb165e9288a07c59191d676baf95dc0af367586f78%2Fkoajs%2Fkoala)
JSer.info #227 - Rubyist Magazine - 2015 年の JavaScript と babel の話という記事では、Babelによるtranspileを利用しながらES6で追加された機能や構文について紹介しています。 記事中にも書かれていますがtower-of-babelというインタラクティブに学べるツールも公開されていて、ES6は最終ドラフトがでていて現在進行形でブラウザ等で実装が進んでいるので、この機会に学んでみるのもいいと思います。 また、Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pgというスライドでも書かれていますが、最近はES6で書かれた(公開時にBabel等の変換したコードを使う)ライブラリ等も増えてきていてそのサンプルコード等もES6で書かれているケースが増えて来ていると思います。 構文だけではなくて仕様的な話な
Help us understand the problem. What are the problem?
いきなり結論 基本的にはexport defaultを使うのが良さそうです。 ※ named export を使う方がいいかもという考えに変わりました。詳しくは最下部の追記をご参照ください ↓に http://www.2ality.com/2014/09/es6-modules-final.html#default_exports_are_favored Default exports are favored と書いてますね。 理由 importする側で楽できるから。 // めんどい import * as utils from './utils'; import { method1, method2 } from './utils'; // こっちのほうがいい import utils from './utils'; exports.method1 = function() {}はどうす
var Hello = React.createClass({ getDefaultProps: function() { return {name: "Default Props"}; }, render: function() { return <div>Hello {this.props.name}</div>; } }); class Hello extends React.Component { constructor(props) { super(props); console.log(props); console.log(this.props); this.state = {name: this.props.initialName}; } render() { return <div>Hello {this.state.name}</div>; } } Hello.defa
ES6 In Depth: Subclassing – Mozilla Hacks - the Web developer blog
ES6 In Depth is a series on new features being added to the JavaScript programming language in the 6th Edition of the ECMAScript standard, ES6 for short. Two weeks ago, we described the new classes system added in ES6 for handling trivial cases of object constructor creation. We showed how you can use it to write code that looks like this: class Circle { constructor(radius) { this.radius = radius;
フシハラさんはTwitterを使っています: "どれか一つ捨てないと回らないという奇跡の一枚 http://t.co/Es6boBTdvA"
どれか一つ捨てないと回らないという奇跡の一枚 http://t.co/Es6boBTdvA
Perhaps the most important thing you can learn to be a better coder is to keep things simple. In the context of identifiers, that means that a single identifier should only be used to represent a single concept. Sometimes it’s tempting to create an identifier to represent some data and then use that identifier as a temporary place to store values in transition from one representation to another. F
Function ベースのクラスについて 新しいプログラムを作るときは、新しい class キーワードを使ってクラスを作るのが、今後、普通となると思われますが、古いプログラムでは従来の Function ベースのコードが多く残っているはずです。それらを読めないと、古いコードの変更や再利用ができないので、Function ベースのクラスも理解できるようにする必要があります。 新しいクラスと古い Function ベースのクラスは混在することができます。新しいクラスの基底クラスとして Function ベースのクラスを使用することもできます。 クラス式とクラス宣言との違い クラス式とクラス宣言はほとんど同じですが、いくつかの違いがあります。 クラス式ではクラス名 className はオプションである。一方、クラス宣言では必須。 クラス式ではクラスの再宣言が可能。一方、クラス宣言ではエラーが発
START: ListView ✔ propsが正しく設定できる Finished in 0.017 secs / 0.008 secs SUMMARY: ✔ 1 test completed --------------|----------|----------|----------|----------|----------------| File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines | --------------|----------|----------|----------|----------|----------------| parts/ | 90.48 | 58.06 | 100 | 100 | | ListView.js | 90.48 | 58.06 | 100 | 100 | | -
normalize.io - an ES6 module, Web Component, and SPDY/HTTP2 Push frontend development worfklow
normalize.io βetaimport the future, build the present, normalize the past. A streamlined ES6 Module, HTML Import, and SPDY/HTTP2 frontend development solution. Show Me an Example!The frontend development workflow has fundamentally changed with the advent of ES6 modules, HTML imports, and SPDY/HTTP2 push. Normalize provides a streamlined frontend solution by normalizing inconsistencies with browser
ES6 on the front end
By @johnkpaul Who? John K. Paul Penton Media I ♥ JavaScript @johnkpaul john@johnkpaul.com johnkpaul.com ECMAScript 6 a hell of a long time coming ES3 - 1999 ES5 - 2009 ES6 - 2014...? But who cares about dates? block scoped variables array comprehensions template strings generators/iterators destructuring assignment block scoped variables Run var arr = [1,2,3]; var o = []; for(var i = 0; i<arr.leng
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 ES6 ModulesはHTTP/2によってconcat無しで使えるようになるのか サーバーサイドpushはまあ現実的に使えるのか難しいよね、サーバーサイドpushに夢求めすぎてたよねっていうのは一度は誰もが経験するところではあって、みんな夢は覚めたと思うけど、場合によっては使えるかもねと思うケースは1つあります。起点となるhtmlの最終更新日を見てそれよりも新しいファイルがあれば一括で送りつける、というのは可能かもと思います。サーバ側でシーケンシャルな日付のリストを用意しておけば難しくないですし。ただ、ダウンロード失敗等を考えると、前回ダウンロードに成功したファイルの中の一番新しいファイルの更新日時を送ればより安全かなぁ、と思います。index.htmlがサーバで動的生成され
javascript - Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await - Stack Overflow
There is a lot of talk about the latest kid in redux town right now, redux-saga/redux-saga. It uses generator functions for listening to/dispatching actions. Before I wrap my head around it, I would like to know the pros/cons of using redux-saga instead of the approach below where I'm using redux-thunk with async/await. A component might look like this, dispatch actions like usual. import { login
I know you’re all excited with Angular 2 and ES6, but that doesn’t mean we can’t use ES6 with Angular 1.x. Today, I am going to present you my new workflow for Angular 1.x with ES6. A brief introduction to Webpack Webpack is a module bundler, what does that mean? Well, it basically take modules with dependencies and generate static assets to represent those modules. So we could have a module like:
ES6のシンタックスを予習復習(1) ~let, const, Arrow Function, Generators, for of~
ES6のシンタックスを予習復習(1) ~let, const, Arrow Function, Generators, for of~ ES6のフォローについては書こうとしていたものの後手に回っていて、ようやく書くに至る。SetやらMapやら、追加クラスのあたりは実装されても試そうとした時にそんなに障壁にならない気がしてるけど、letとかconst、アローファンクション等々、シンタックスが関わる辺はつっかえ棒になりかねないので消化しておく。 この段階での実装状況はNightly > Canary Chrome Canary 34.0.1760.0 Firefox Nightly 29.0a1 (2013-12-25) この2つをECMAScript 6 compatibility tableで比較するとNightlyのほうが先行実装は進んでいるのでNightlyでアレコレする。Canary
ES6 (aka ES2015) offers many new and exciting features, from expressive syntax, to new powerful built-in APIs, to entirely new-to-JS programming paradigms. We'll start by quickly reviewing some of the best of these coming attractions. But how do we properly and responsibly bridge from our current code to the new ES6? Browser support in the newest browsers is already very strong, but has a long way
The document summarizes the key features of ES6 (ECMAScript 2015), the next version of JavaScript. It discusses new features like block scoping with let and const, arrow functions, classes, enhanced object literals, template strings, and promises. It also covers iterators and generators, which allow iterable objects to be looped over and asynchronous code to be written more cleanly. The presentati
Here’s a brain dump of my experience getting these recent-ish techs up and running together on a small project … Project Structure and Goal My project (named baby-engine), is structured like this, you can see it here src/ <ES6 JavaScript source> lib/ <the ES6 js in src/ gets built and dumped into here as ES5 JS> index.js <-- npm module entry point written in vanilla ES5 and require()s stuff from l
Reactアプリを開発していて便利だと思ったJavaScriptの記法から、特に使い勝手の良いものを6つ紹介してみます。 特にjsxでは記述量の少なさやシンプルさが読みやすさに直結すると思うので、意味が問題なく伝わる範囲でこのようなshorthandをなるべく活用していければと思っています。 これらの書き方が必ずしもベストというわけではなく、好みや開発環境や状況によって他の書き方のほうが良いケースもあると思います。 1. 三項演算子でif文を減らす ネストさせることも可能。 before render () { const {name} = this.props if (!name) { return ( <Message value={'no name'} /> ) } else { return ( <User name={name} /> ) } }
Google App Scriptをモダンな開発っぽくする環境を作ってみた(ES6, browserify, eslint, mocha) - nagashigaki
お前は今更何を言ってるんだ？というテーマですが整理するために。 Google App Script(以下GAS)とはjavascriptでGoogle App(今ではG suite？)の豊富な機能を堪能でき、ある程度の作業を自動化することができます。しかも無料で！指定時間に勝手にスクリプトを起動することもできちゃいます。 例えば、複数のcsvをDriveにアップしてボタンをポチっとするだけで目的のデータが揃い、そのデータをメールで飛ばしたりできるのは非常にありがたいです。 導入する環境 環境を整える npmとgitの初期化 babel gulpまわり browserify テストツール eslint ファイル構成 gulpfileの作成 お疲れさまでした 開発する 雑談 導入する環境 このGASの機能をもっと使いこなしたい。具体的には npmで管理 es6 gulp browserifyで
Javascript quiz. ES6 edition. Remember that crazy Javascript quiz from 6 years ago? Craving to solve another set of mind-bending snippets no sensible developer would ever use in their code? Looking for a new installment of the most ridiculous Javascript interview questions? Look no further! The "ECMAScript Two Thousand Fifteen" installment of good old Javascript Quiz is finally here. The rules are
GitHub - tc39/proposal-decorators: Decorators for ES6 classes
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
class: center, middle, inverse, title-page # Everything is Iterator ### 2015/06/27 #tng16 ### by @teppeis --- # Hello! * Teppei Sato * <a href="https://twitter.com/teppeis">@teppeis</a> <img src="https://secure.gravatar.com/avatar/b593af919ac846342f62d33b32beef2a?s=32" class="avatar"> * Cybozu, Inc. / kintone --- class: wdpress background-image: url(wdpress87.jpg) ??? WEB+DB PRESS Vol.87でES6特集を書きま
Object-oriented JavaScript: A Deep Dive into ES6 Classes — SitePoint
Often we need to represent an idea or concept in our programs — maybe a car engine, a computer file, a router, or a temperature reading. Representing these concepts directly in code comes in two parts: data to represent the state, and functions to represent the behavior. ES6 classes give us a convenient syntax for defining the state and behavior of objects that will represent our concepts. ES6 cla
さてさて、前回の記事、完全な手順！VueJSで自動ページ送りする方法では、ES6を使ってページ送り機能を実装してみましたが、その際ふと疑問に思ったことがありました。 それは、 インターネットエクスプローラー11（IE 11）だと、どんなES６の記述ができるんだろう？？ というものです。 IEといえば、当のマイクロソフトでさえedgeへの移行をすすめている、もはやレガシーなブラウザですが、未だに一定数以上のシェアを持っていることから、どうしても古いJavaScriptの書き方をせざるを得ないのが現状です。（BableとかはIEへの対応という意味合いが大きいですね） そこで！今回は、実際にIE11でES6の主要な書き方を実行し、うまくいくかどうかをひとつずつ検証してみます。（そして、せっかくなのでedgeでも検証してみました。） ぜひ開発の参考にしてみてください。 「ひさびさにVirtualB
AJAXを使うときは、素の状態で使うよりもライブラリから使ったほうがいいです。現在のプロジェクトはReact.jsを使っていますが、DOM操作は必要ないので、足りないのはAJAXを利用するだけのライブラリが欲しいです。そこで、superagentがシンプルで目的に合致します。 ES6ではPromiseが使えます。非同期通信を使うときは、Promiseを使えばネストが深いコールバック嵐から解放された約束の地へ行けます。それではsuperagnetによるAJAXの非同期通信をES6のPromiseを使って利用してみます。 import request from 'superagent'; function callApi(apiName) { return new Promise() { (resolve, reject) => { request.get("http://localhost/
Here at NMC, we're big fans of the React library for building user interfaces in JavaScript. We've also been experimenting with the next version of JavaScript, ES6, and were excited to see the latest version of React promote ES6 functionality. Starting with React 0.13, defining components using ES6 classes is encouraged. Refactoring a React 0.12 component defined using `createClass` to an 0.13 and
TypeScript の ES6 modules の解釈と allowSyntheticDefaultImports の整理 - Qiita
TypeScript の ES6 modules の解釈と allowSyntheticDefaultImports の整理TypeScript 概要 TypeScript (1.8.7) の次の項目の関連を整理する。 import foo from 'foo'; import * as foo from 'foo'; export default foo; export = foo; allowSyntheticDefaultImports option TL;DR allowSyntheticDefaultImports: false (default) export = foo; / import * as foo from 'foo'; / module.exports = foo; が対応 export default foo; / import foo from 'foo';
Mocha + Chai.js unit testing for ES6 with Istanbul code coverage
Testing is very important for finding bugs, verifying the functionality and improving the general stability of a piece of software. Almost all (if not all) developers test their code in some way. One way to test would be to manually run the program and try out all the functions to see if everything is working as expected. Another (and better) way is to write automated tests that are run every time
この記事は某JavaScript Advent Calendar 2013の2日目ではありませんし、ECMAScript Advent Calendar 2013のn日目でもありません（そんなものは本稿執筆時点で存在していない事を確認しています）。単に締め切りのある原稿を書いていて、疲れてしまって好き勝手に文章を書きたかったので、好き勝手に書いているだけです。 接頭辞にES6とつけるべきかDOMとつけるべきか迷うのですが、unwrappingされてるPromiseの話です. WHATWG DOM Standardからもそれが直接参照されてますし、ES6 Promiseあたりと呼んでおくのが妥当でしょうか。 何がいいのか ECMAScriptとDOMの大合同コンセンサスが出るなどすっかりECMAScriptのためのDOM感が増しつつ有る今日この頃ですが、この幸せな点は何と言っても標準化された
GitHub - metagrover/ES6-for-humans: A kickstarter guide to writing ES6
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2年ぐらいJavaScriptから離れていた人に贈るES6対応表 - Qiita
ESLintのエラールール。日本語ざっくり解説[ES6編] - Qiita
2015-05-12のJS: ECMAScript 2015(ES6)入門、最近のnpmの変更点を見る
老害と言われないためのES6勉強会: class編 - Qiita
ES6でexportとexport defaultをどう使い分ければいいの？ - なっく日報
React.jsでES6の文法を使って defaultProps などを設定する - Qiita
JavaScript ES6+: var, let, or const?
(初心者向け) JavaScript のクラス (ES6 対応) - Qiita
ES6+Reactをkarma+mocha+chaiでテストした時の設定まとめ - Qiita
Shibu's Diary: HTTP/2とES 6 Modulesで、concatはいらなくなるのか？
Using AngularJS with ES6 and Webpack | Angular Tips
ES6: Features By Testing
ES6 - Next Generation Javascript
Traceur, Gulp, Browserify and ES6 - Matt Greer
Reactアプリ開発ですぐ使えるJavaScript (ES6) の便利な記法6つ - Qiita
Javascript quiz. ES6 edition. — Perfection Kills
[ES6] Everything is Iterator
注意！IE11で使えない最新JavaScritコード（ES6）
ES6のPromiseを使ってsuperagentでapiを叩く - Qiita
Refactoring React Components to ES6 Classes
ES6 Promiseの何が美しいのか - saneyuki_s log