2019-09-17 23:01:01
Webフロントエンド ハイパフォーマンス チューニング
1. ウェブパフォーマンスとは何か
2. ブラウザのレンダリングの仕組み
3. チューニングの基礎
4. リソース読み込みのチューニング
5. JavaScript実行のチューニング
6. レイアウトツリー構築のチューニング
7. レンダリング結果の描画のチューニング
8. 高度なチューニング
9. 認知的チューニング
Appendix. SVGのパフォーマンス特性
1. ウェブパフォーマンスとは何か1.1 パフォーマンスを定義するp.2
パフォーマンス
ユーザーの様々な振る舞いに大してウェブページが応答を返す速さ
2. ブラウザ...
本
JavaScript
フロントエンド
2018-09-20 16:32:36
概要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
※この記事は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