Jestで始めるJavaScriptのテスト

2018 Sep 20

概要Jestを使ってJavaScriptのテストをかいてみる。準備jestとESModulesを使いたいのでbabel-preset-2015をインストールしておく。（babel-jestはjestに用意されている。） npm install --save-dev jest babel-preset-2015 .babelrcの中身はこんな感じ。 { "presets":...

ES5 JavaScript babel babel-jest ESModules jest

モダンなJSの話──Proxy

アプリケーション

2018 Feb 28

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 ProxyとはProxyはECMAScript 2015から追加されたオブジェクトで、オブジェクトが持つ機能をラップすることにより、オブジェクトの機能をカスタマイズすることができます。 Proxyの関連用語Proxyを知る上で必要な用語です。 handler・・・トラップを入れるため...

ES5 ES6 JavaScript

モダンなJSの話──async function

アプリケーション

2018 Jan 29

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 async functionとはasync functionはAsync Functionオブジェクトを返す関数です。 asyncとawaitというキーワードを使って、Promiseよりも簡潔に非同期処理を書くことができます。 ES2017で仕様が定義されています。使い方使い方はカ...

ES5 ES6 JavaScript

モダンなJSの話──Promise

アプリケーション

2017 Dec 29

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 PromiseとはPromiseとは・・ The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value...

ES5 ES6 JavaScript

Reactでマークダウンエディタをシャッとつくる

アプリケーション

2017 Dec 25

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。準備ビルド環境のセットアップが面倒なので、今回はFacebook公式のcreate-react-appというツールを使います。 npm install -g create-react-app md-editorというアプリ名で環境を用意することにします。 create-react-a...

ES5 ES6 JavaScript React

モダンなJSの話──Destructuring assignment（分割代入）

アプリケーション

2017 Dec 25

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。分割代入とは分割代入とは、配列またはオブジェクトのデータをそれぞれ別個の変数に代入する式のことです。文章ではイメージがつきにくいかと思います。それぞれの例を見て確認してみましょう。配列の分割代入let a, b, c; [a, b, c] = [1, 2, 3] console.l...

ES5 ES6 JavaScript

モダンなJSの話──importとexport

アプリケーション

2017 Dec 25

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 exportとはexportは、指定のファイルから関数、変数、オブジェクト、クラス（クラスはプロトタイプベース継承の糖衣構文であり、関数の一種。詳しくはモダンなJSの話──クラス）などを受け取り、任意のファイルでそれらを使えるようにするための文です。 exportには主に2種類の使...

ES5 ES6 JavaScript

モダンなJSの話──クラス

アプリケーション

2017 Dec 25

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 ECMAScript6からのクラス定義ECMAScript6以前ではnew演算子やprototypeプロパティを使ってクラスに近い機能を実現していましたが、ECMAScript6からはclassキーワードでクラスを定義できるようになりました。<br>classキーワードは...

ES5 ES6 JavaScript

モダンなJSの話──var/let/const

アプリケーション

2017 Dec 25

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。スコープとは本題に入る前に、スコープの定義について確認しておきましょう。スコープとは、変数名や関数名が参照可能な範囲のことです。スコープの種類は色々ありますが、ここでは主に3つのスコープについて表で説明します。スコープ名範囲備考グローバル関数の外側どこか...

ES5 ES6 JavaScript

モダンなJSの話──アロー関数

アプリケーション

2017 Dec 25

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。アロー関数ってなに？ざっとまとめると、 ES2015から追加された新しい構文通常のfunction式よりも短くかける thisの値を語彙的に束縛することができる（＝文脈からthisの値を把握しやすい）常に匿名関数アロー（=>）を使ってかく関数式で、"this...

ES5 ES6 JavaScript

es5