abcdefGets

ゲッツ!

typescript 2.4 の新機能

typescript2.4がでたので新機能を確認。 Dynamic Import Expressionsのサポート import('...')式がサポートされた。 import式を使うことで多くのバンドラーがコード分割をすることが可能になるので、 module: esnextで出力するのがおすすめだそう。 async fu…

babelのAsyncIterationバグ

問題 for-await-ofのボディで配列への分割代入を行うと、 Cannot read property 'file' of undefined というエラーを投げてトランスパイルに失敗する。 どうやらscopeの解析に失敗しているらしい。 サンプルコード async function g(t) { return new Promise…

Webpackでpolyfillをちゃんと動かす

面倒だったので備忘録 Polyfillの設定 とりあえずwebpackはrequireしないと駄目。 でも既存のコードを一切変えずにpolyfillをインストールしたい。 webpack.ProvidePluginを使う。 new webpack.ProvidePlugin({ 'Promise': 'es6-promise', 'Symbol': 'es6-sy…

jspmからWebpackに移行した

とりあえず、Webpackを導入したがそのままだと色々問題が多かったので以下の事をやった。 まあ今更感あるが。 typescriptのallowSyntheticDefaultImportsをfalseにする。 production用とdev用のconfigをいい感じにわける node_modulesのdllを生成する。 type…

V8 Iginition Interpreter

以前、東京Node学園25時限目で発表した内容を修正して書いていこうと思う。 というわけで、V8にバイトコードインタープリタ Ignition が搭載された。 このインタープリタは単純そうに見えて非常にわかりづらいので解説していく。 バイトコードインタープリタ…

typescript 2.3 RC

typescript 2.3 rcがアナウンスされた 主な変更点は以下の通り –strictオプションの追加 以下の型チェックオプションを有効にする –noImplicitAny –strictNullChecks –noImplicitThis –alwaysStrict 以下の様に部分的にOFFにもできる { "compilerOptions": {…

gulp-uglifyでプロパティ名をmangleする

全然ドキュメントがなかったので備忘録。 ClosureCompilerみたいにプロパティ名もmangleしたい。 こんなの const x = { doSomething() {return ...} doNothing() {} } x.doSomething(); x.doNothing(); const x = { a() {return ...} b() {} } x.a(); x.b();…

ES6のComputedPropertyNameとトランスパイラ

ES6のComputed Property Nameは非常に便利だが、トランスパイラを併用すると問題が起きがちである。 それを確認していく。 Base const SYMBOL = Symbol('foo-bar-baz'); const obj = { [SYMBOL]: 1, name: 'brn', job: 'engineer' } typescript var SYMBOL =…

Ecmascript decorator を使ってキャッシュする

表題の通り ES proposal のdecoratorをつかってメモ化のようなことをするライブラリを前に書いたので、 キレイにして、GitHubに公開した。 GitHub - brn/cache-decorator: javascript method/function cache decorator. インストール npm install cache-deco…

Function.prototype.bind のパフォーマンスについて

ふとパフォーマンスが気になったので調査した。 記憶が正しければ、callよりも遅いはず。 というわけでレッツ検証 事前準備 package.json { "name": "bench", "version": "1.0.0", "description": "", "main": "index.js", "author": "brn", "license": "MIT…

React.js meetup × React Native meetup に参加した

パネルディスカッション 参加者 @yosuke_furukawa @koba04 @yositosi (Togetter CEO) @janus_wel (CureApp CTO) 全体的にReactNativeはWebの技術をどう活かせるか、 ワンソース・マルチユースができるか等の話だった。 あとReactNativeの将来性とか 全体的に…

【RECRUIT Technologies NIGHT vol.5】リクルート流フロントエンド開発 に参加してきた

React / Redux を活用したリクルートテクノロジーズのフロントエンド開発 古川陽介 さん(@yosuke_furukawa) speakerdeck.com 以下メモ 言いたいこと フレームワークは作るものに合わせて作る リクルートのWeb トップページに検索があり、 検索するとリストビ…

V8 の For In の話

V8 blogに話が出ていたが、V8のfor in構文が高速化したらしいので、 コードと共におっていこうと思う。 For In とは for (const key in object) { } このような構文でObjectのキーをイテレーションする機能。 この構文を何故高速化したかというと、Facebook…

「Angular 4 の最新動向と、2017年再注目のDart、そしてAngular Dart」に行ってきた

AngularとDartの勉強会でした。 以下メモ Angular4がやってくる!?新機能ダイジェスト Asai Masahiko Angular 4がやってくる!? 新機能ダイジェスト.pdf - Google ドライブ Semantic Versioningの導入 非推奨ポリシーの導入(2つのメジャーリリースを…

Typescript 2.2.0 の Mixin を使ってDIしてみる

表題の通り。 今まではMixinがなかったので、泥臭く型チェックができない方法(文字列とか)でDIしていたが、 typescript 2.2.0からMixinに対応したので、DIを考察する。 Dependency Injectionとは Dependency Injectionとはその名の通り依存性を外から注入す…

jspmでtypescriptの開発をする

jspmからtypescriptの開発をした時の備忘録を書く typescriptコンパイラ + jspm まずはjspmでtypescriptをランタイムコンパイルできるようにするため、 plugin-typescriptをインストールする。 cli jspm install ts jspm.config.js SystemJS.config({ ... pa…

Firebase SDK for javascript

Firebase SDKの使い方・注意点等について書く。 インストール scriptタグで直接CDNから読み込むのが一番かんたん。 <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script> バンドルしてしまう場合は npm install --save firebase でnpmからインストール 準備 Firebase Consoleから新規プロジェクトを作成 コンソ…

HTML5とか勉強会「Webパフォーマンス」に参加してLTしてきた

LTしてきた。 とりあえず、早口すぎたなと思った。 時間を気にしすぎてしまったかも。 以下勉強会メモ 先入観とバイアスを考慮したWebサイトパフォーマンス改善 先入観とバイアスを考慮したWebサイトパフォーマンス改善 from Yoichiro Takehora t.co 竹洞さ…

Typescript 2.2 変更点

Typescript 2.2がでた。 変更点が少々あるので確認しておきたい。 Mixinのサポート 遂にMixinがサポートされた。やり方が少々直感的ではないけども。 公式のサンプルコードで確認する。 class Point { constructor(public x: number, public y: number) {} }…

WebWorker & SharedArrayBuffer & Atomics (2)

二回目です。 前回の記事はWebWorkerとSharedArrayBufferとAtomics(1)です。 Memory Model ES2017のドラフトからMemoryModelという項目が追加された。 これはSharedArrayBufferのDataBlockに適用されるモデルで、プログラムがとりうるメモリの順序を示したも…

WebWorker & SharedArrayBuffer & Atomics (1)

遂にShared Memory and AtomicsがES2017のstage4に JSの世界にマルチスレッド・共有メモリ・排他制御の仕組みが備わることになった。 Javascript/Browserにおけるマルチスレッド・並列実行 Javascriptの世界では長らく協調的スレッドと呼ばれるような仕組み…

LigShip #5に参加した

LIGShipとは 株式会社LIG様が主催のデザイナーイベント 今回のテーマは Web(デザイン) x 何か 発表 Web x インタラクション 最初の発表は LIGのデザイナーの tommy さん netflixを例に良いインタラクションの説明 スペース・時間・アニメーションの3つのキ…

RxjsでもbaconjsのObservable.updateを使いたい

なので実装した rx-observable-update インストール いつものように npm install rx-observable-update jspmの人は jspm install npm:rx-observable -o "{'main': 'system/index.js'}" commonjsがいい人は jspm install npm:rx-observable -o "{'main': 'com…

typescriptでRxjs5を使う

タイトルのとおりです。 現在Rxjsはv4とv5がありますが、今回はv5を取り扱います。 またjspmとnpm両方の場合について記述します。 typescriptのバージョンは2.0以前とv2.0以降の両方で書きます。 typescript 2.0以降 npm npmの場合はmoduleResolutionオプシ…

jspmについて私が知っていること

今更感がありますが、jspmというツールについて私が知っていることです。 jspmとは jspmとはブラウザ向けのモジュール管理システムです。 pros npm、bower等と違いES6で導入されたモジュールのローディングシステムを利用して、 ランタイムでトランスパイル…

reactとbaconjs

相性が悪い気がする。 cyclejsみたいに綺麗に分割できない。 そもそも、viewに相当するcomponentにイベントハンドラを指定するからなのだけども、これ以外の方法(クラス名やid)も筋が悪いしなあ。。。 結局contextからイベントディスパッチャー的なものを共…

またはじめた

今回はどれくらい続くだろうか。。。