ECMAScript2015のProxyを使ってobjectの値の変更を検出する

ECMAScript2015でobjectの値の変更を検出して関数を実行する場合、以前であればObject.prototype.watchの機能があったのですが現在では非推奨および廃止とのことなのでECMAScript2015から導入されたProxyの機能を使って値の変更を検出したいと思います。

MDNのサンプルでは以下のようにProxyに対して監視対象のobjectの初期値とイベントハンドラを渡していて、帰ってきたobjectの値を参照しようとした時にイベントハンドラのget関数が実行されていることが確認できます。

続きを読む

ECMAScript6でthisを束縛する方法について

ECMAScript6でthisを束縛する方法について検証した際のメモ

まずダメな例として、以下は画面クリックの際に呼ばれる clickFunc から this.calledFunc() を呼び出すことはできません。クリックに反応したelementがthisになるため、この場合はリスナーが設定されたdocumentがthisになりthis.calledFunc()を呼び出すことはできません。

続きを読む

webpack入門_typescript

webpack

公式のドキュメントを参考にwebpackをTypescriptに対応させたいと思います。

まず以下のコマンドでtypescriptとts-loaderをインストールします。

npm install --save-dev typescript ts-loader

続きを読む

webpack入門_shimming

webpack

shimming

公式のドキュメントでShimmingを試してみたいと思います。
webpackの設定ファイルでProvidePluginを指定するとライブラリをグローバルに適用することができ、importなしでも使用することができます。例えばサードパーティ製のライブラリがjQueryを使用している場合などProvidePluginを使用することで解決ができるかもしれないです。

続きを読む

webpack入門_Progressive Web Application

webpack

Progressive Web Application

webpackの公式ドキュメントのProgressive Web Applicationを見ていきたいと思います。

まずPWA(Progressive Web Application)ですが、これはWEBアプリをネイティブアプリのように動作させる技術のようで以下のドキュメントを見れば大体わかるのかと思います。
https://developers.google.com/web/progressive-web-apps/
https://speakerdeck.com/nazonohito51/pwafalsesanpuruapuriwozuo-tutemita

続きを読む

webpack入門_ライブラリ作成

webpack

Authoring Libraries

公式ドキュメントのAuthoring Libraries を参考にnodeのモジュールを作成して参照できるようにしたいと思います。 それではまず、モジュール化させるプロジェクトを作成します。

mkdir webpack-numbers cd webpack-numbers npm init -y npm install --save-dev webpack lodash

続きを読む