Post

JavaScript

2019-09-17 23:01:01

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング 1. ウェブパフォーマンスとは何か 2. ブラウザのレンダリングの仕組み 3. チューニングの基礎 4. リソース読み込みのチューニング 5. JavaScript実行のチューニング 6. レイアウトツリー構築のチューニング 7. レンダリング結果の描画のチューニング 8. 高度なチューニング 9. 認知的チューニング Appendix. SVGのパフォーマンス特性 1. ウェブパフォーマンスとは何か1.1 パフォーマンスを定義するp.2 パフォーマンス ユーザーの様々な振る舞いに大してウェブページが応答を返す速さ 2. ブラウザ...

JavaScript Frontend

2018-09-20 16:32:36

Jestで始めるJavaScriptのテスト

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

プログラミング

ES5 JavaScript babel babel-jest ESModules jest

2018-02-28 10:37:27

モダンなJSの話──Proxy

※この記事はInnovator Japan Engineers’ Blogで掲載されている記事を転載したものです。 ProxyとはProxyはECMAScript 2015から追加されたオブジェクトで、オブジェクトが持つ機能をラップすることにより、オブジェクトの機能をカスタマイズすることができます。 Proxyの関連用語Proxyを知る上で必要な用語です。 handler・・・トラップを入れるためのオブジェクトで、プレースホルダ的な扱いをされます。 trap・・・Proxyがプロパティへのアクセスを実装するためのメソッド。 target・・・プロキシするオブジェクト。 invariant・・・...

プログラミング

ES5 ES6 JavaScript

2018-02-01 10:56:07

モダンなJSの話──async function

※この記事は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

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

概要準備まずは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

モダンなJSの話──Promise

※この記事は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

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

※この記事は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

モダンなJSの話──Destructuring assignment(分割代入)

※この記事は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

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

※この記事は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

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

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

プログラミング

ES5 ES6 JavaScript