es6

モダンなJSの話──Proxy

アプリケーション

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

ES5 ES6 JavaScript

モダンなJSの話──async function

アプリケーション

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

ES5 ES6 JavaScript

ReactとHistory APIを使ってrouterを自作する

アプリケーション

概要準備まずはHistory APIを理解しておきます。GO TO MDN。 MDN - History MDN - ブラウザの履歴を操作する 忙しい人はpushStateとwindow.popstateだけ理解しておけばなんとかなるはず。 仕様このrouterでは、以下のようなURLに対応します。 /post /post/:id /post/:id/:title クエリパラメータには対応...

ES6 JavaScript React history-api router

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

アプリケーション

※この記事は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(分割代入)

アプリケーション

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

ES5 ES6 JavaScript

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

アプリケーション

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

ES5 ES6 JavaScript

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

アプリケーション

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

ES5 ES6 JavaScript

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

アプリケーション

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

ES5 ES6 JavaScript

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

アプリケーション

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

ES5 ES6 JavaScript