2018-02-28 10:37:27
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
ProxyとはProxyはECMAScript 2015から追加されたオブジェクトで、オブジェクトが持つ機能をラップすることにより、オブジェクトの機能をカスタマイズすることができます。
Proxyの関連用語Proxyを知る上で必要な用語です。
handler・・・トラップを入れるためのオブジェクトで、プレースホルダ的な扱いをされます。
trap・・・Proxyがプロパティへのアクセスを実装するためのメソッド。
target・・・プロキシするオブジェクト。
invariant・・・...
アプリケーション
ES5
ES6
JavaScript
2018-02-01 10:56:07
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
async functionとはasync functionはAsync Functionオブジェクトを返す関数です。
asyncとawaitというキーワードを使って、Promiseよりも簡潔に非同期処理を書くことができます。
ES2017で仕様が定義されています。
使い方使い方はカンタンです。
async関数を関数定義の時に頭につけるだけです。
Promise以外の値を返すように定義した場合は、その値で解決された形でPromiseが返されます。
async function a...
アプリケーション
ES5
ES6
JavaScript
2018-01-20 23:39:39
概要準備まずはHistory APIを理解しておきます。GO TO MDN。
MDN - History
MDN - ブラウザの履歴を操作する
忙しい人はpushStateとwindow.popstateだけ理解しておけばなんとかなるはず。
仕様このrouterでは、以下のようなURLに対応します。
/post
/post/:id
/post/:id/:title
クエリパラメータには対応しません。
使用するパッケージReact周りは省略します。
React以外で使うパッケージは1つだけです。
pillarjs/path-to-regexp
URL部分の正規表現を良しなにやってくれるパ...
アプリケーション
ES6
JavaScript
React
history-api
router
2017-12-29 20:44:23
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
PromiseとはPromiseとは・・
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. MDN - Promise
だそうです。
ざっくりまとめると、Promiseとは、非同期処理やその結果をいい感じにしてくれるオブジェクトのことです
Promiseを使うと主に以下のようなメリ...
アプリケーション
ES5
ES6
JavaScript
2017-12-25 23:24:08
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
準備ビルド環境のセットアップが面倒なので、今回はFacebook公式のcreate-react-appというツールを使います。
npm install -g create-react-app
md-editorというアプリ名で環境を用意することにします。
create-react-app md-editor
次に、今回使うライブラリのインストールをしておきます。
cd ./md-editor
npm install --save marked
npm install
最後にサーバ...
アプリケーション
ES5
ES6
JavaScript
React
2017-12-25 23:23:27
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
分割代入とは分割代入とは、配列またはオブジェクトのデータをそれぞれ別個の変数に代入する式のことです。文章ではイメージがつきにくいかと思います。それぞれの例を見て確認してみましょう。
配列の分割代入let a, b, c;
[a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1 2 3
let color = [1, 2, 3]
const [red, green, yellow] = color
console.log(red, gree...
アプリケーション
ES5
ES6
JavaScript
2017-12-25 23:22:37
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
exportとはexportは、指定のファイルから関数、変数、オブジェクト、クラス（クラスはプロトタイプベース継承の糖衣構文であり、関数の一種。詳しくは モダンなJSの話──クラス）などを受け取り、任意のファイルでそれらを使えるようにするための文です。
exportには主に2種類の使い方があります。
Named exportsexportしたい要素の名前を付けてexportする方法です。
export { fooFunction };
export { fooFunction,...
アプリケーション
ES5
ES6
JavaScript
2017-12-25 23:21:32
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
ECMAScript6からのクラス定義ECMAScript6以前ではnew演算子やprototypeプロパティを使ってクラスに近い機能を実現していましたが、ECMAScript6からはclassキーワードでクラスを定義できるようになりました。<br>classキーワードはこれまでのnew演算子やprototypeプロパティによるクラス定義のシンタックスシュガーです。
classキーワードを使ったクラス定義の方法には、クラス宣言とクラス式の2種類があります。
クラス宣言...
アプリケーション
ES5
ES6
JavaScript
2017-12-25 23:20:27
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
スコープとは本題に入る前に、スコープの定義について確認しておきましょう。
スコープとは、変数名や関数名が参照可能な範囲のことです。
スコープの種類は色々ありますが、ここでは主に3つのスコープについて表で説明します。
スコープ名
範囲
備考
グローバル
関数の外側
どこからでもアクセスできる。
ローカル（関数）
関数の内側
ローカルスコープ内からでしかアクセスできない。
ブロック
ブロック（{ }）の内側
if, for, switchなど
ブロックスコ...
アプリケーション
ES5
ES6
JavaScript
2017-12-25 23:19:03
※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。
アロー関数ってなに？ざっとまとめると、
ES2015から追加された新しい構文
通常のfunction式よりも短くかける
thisの値を語彙的に束縛することができる（＝文脈からthisの値を把握しやすい）
常に匿名関数
アロー（=>）を使ってかく関数式で、"thisの値を語彙的に束縛することができる"という点が大きなポイントです。
アロー関数を使うと、今までこう書いていたものが・・・
const foo = function() {
console...
アプリケーション
ES5
ES6
JavaScript