kitak blog

Kみたいなエンジニアになりたいブログ

JavaScript

JavaScript のメモリや GC を扱った記事のメモ

JavaScript のメモリ や GC を意識したプログラミングに関する記事をふたつばかり読んだので、個人用のメモ。 www.html5rocks.com V8 が minor GC を実行するときは 10ms オーダーの時間がかかる。 60fps を実現する場合の 1フレームは 16ms であるから、GC …

JavaScriptでfpsを計測する

Chrome DevToolsにFPS Meterというのがあって、FPSの推移をプロットしてくれるのだけど、他のブラウザや環境によってはプロットできない、あるいは、FPSの値だけ欲しくてプロットは自分でやりたいということもあるので、簡単に計測用のコードを書いてみた。…

hls.js の tsdemuxer.js のコードを読む

個人用メモ。 hls.jsがやっていることをかなり大雑把に書いておくと、JavaScriptでプレイリスト(.m3u8)を取得・パースし、プレイリストに書かれたセグメントファイル(.ts、MPEG2-TS)を取得・パースし、画像と音声のデータ(コーデックは MPEG-4 AVCだったり、…

色々なプロジェクトの utils のコードを読む

最近、時間のあるときに Vue.js や hls.js のソースコードを読んでいるのだけど、この2つのプロジェクトには utils というディレクトリがあって、ロガーやポリフィルのコードが置かれている(utils って名前はどうなんだ、とか、そこに色々置かれているのはど…

console.timeStampのメモ

Console APIにtimeStampというのがあって、実行すると、DevToolsのTimelineパネルにイベントを記録してくれる。 console.timeStamp('foo'); 分かりづらいが、オレンジのバーが出ているのが、console.timeStamp が実行されたとき。 gyazo.com Event Logにも記…

webpagetest-api を使おうとしたときのメモ

個人用メモ。 ウェブサイトのパフォーマンス計測ができる WebPagetest - Website Performance and Optimization Test というサイトがあって、Speed Indexという独自の指標( アルゴリズムは webpagetest-doc-ja/index.md at master · t32k/webpagetest-doc-ja…

ES2015のarrow functionsはargumentsを束縛しない

題の通りで、何かのES2015の紹介記事に書いてあった気がするんだが、いざコードを書く時にすっかり忘れていた。 () => { console.log(typeof arguments) // undefined } MDNの記事を読んだら( アロー関数 - JavaScript | MDN )、ES2015のrest parametersで代…

ES2015の配列のパラメータハンドリングが便利だった

ES2015の分割代入やパラメータハンドリング、便利そうではあるんだけど、他人がそれを使ったコードを読むと一見なにをやっているのか分からなくて(単純に慣れていないだけな気もする)、これまでの惰性もあって多用するのを避けていた。 で、今日、コードを書…

Vuex のドキュメントを翻訳した

Vuex は、Redux インスパイアの Vue.js の周辺ライブラリ。各言語の翻訳があるんですが ( http://vuex.vuejs.org/ )、日本語のドキュメントが v0.8 から更新されていなかったので、v1.0.0-rc.2 を対象に @ktsn さんとドキュメントを翻訳し直しました。読みづ…

knex.js: NodeのSQL Query Builder

最近、趣味と仕事両方で使うNodeで動くちょっとしたウェブアプリを書いている。 おそらくRailsの方が素早くできそう、あるいは普段書かないPythonとかGoみたいな言語で書いてみたかったんだけど、仕事で同じ部署の人に使ったり、手を入れてもらうことを考え…

npm installのときのプログレスバーを非表示にする

表示が崩れたり(既に修正はされている npm@3のプログレスバーの表示崩れについて - Qiita)、非表示にすると早くなるというissueを見かけたので( https://github.com/npm/npm/issues/11283 )、非表示にするようにした。 プロジェクトレベルで設定をおこなう場…

Vue.js 2.0+Spring Bootでサーバーサイドレンダリングを実現するサンプルを書いた

Vue.js 2.0+Spring Bootでサーバーサイドレンダリングを実現するサンプルを書いた github.com Vue.js 2.0がサーバーサイドレンダリングに対応した話は Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog に書いた通り…

Rx.jsのControlled observableを試した

ObservableのsubscribeOnNextに渡した関数(あるいはsubscribeの第一引数として渡した関数)でおこなう副作用の伴う処理、非同期処理が終わるまでの間、値の発行を止めたくなった。 受け取ったデータを蓄えつつ、受け取った順にひとつずつ一定時間表示するよう…

async/awaitをつかった非同期処理の直列実行

最近、非同期処理を直列に実行するプログラムを書く機会が多くあったのでメモ。 この間、自分が書いたのは、以下の様なもの。 ユーザーは複数のデータを選択できる ユーザーが確定ボタンを押したら、選択した最初のデータについて、Web APIを呼び出して、そ…

Vue.js Tokyo v-meetup="#1"でLTしてきた、と発表からカットしたMVVMのあれこれ

Vue.js Tokyo v-meetup="#1" - connpassでLTしてきました。発表資料はこちら。 speakerdeck.com イベント全体を通した内容や感想については以下の記事があります。 Vue.js Tokyo v-meetup="#1" に行ってきた - チラシ裏日記上等!!新館 Vue.js Tokyo v-meet…

既存のコードの理解が捗るChrome DevToolsの使い方

jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れよ…

Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした

数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書い…

Nashorn(Nasven)でJavaのライブラリをカジュアルにJavaScriptで試す

Apache commons とか Apache HttpClient みたいなJavaのライブラリをちょっと試してみたい時に、IDEでプロジェクトをいちいち用意して、Javaのコードを書くのが面倒だったりする。 Java SE 8には、Nashorn (なすほーん) というJavaScriptエンジンが搭載され…

Vue.jsで filterBy フィルタの結果の件数を取得したくなったら

filterBy フィルタで絞り込んだ結果の件数を表示したり、0件の時にメッセージを表示したいということはままある。が、以下のように普通にfilterBy フィルタを使っても、絞りこまれた結果の件数は取得できない。 <div v-for="item in items | filterBy 'hello'"> 似たようなことを考える人はいるもので、issu</div>…

高頻度で発生するブラウザイベントのイベントリスナー呼び出し最適化

ページのスクロールやウィンドウのリサイズによって、JavaScriptで表示を変える、という話はちょくちょくある。例えば、パララックスみたいなやつをイメージしてもらえばいいだろう。 ウェブフロントエンドエンジニアが「ううっ...」となる瞬間だ。スクロー…

Node.js v4 のちょっとした疑問の調査

先週、東京Node学園 18時限目に参加してきました。 「Node.js v4 の話」を聞いて、個人的に便利だと思ったところと疑問に思ったことをまとめています。 以下、@yosuke_furukawa さんのスライドです。 個人的にうれしいと感じたところ Buffer#indexOf の追加 …

jQuery非依存の画像の遅延読み込みライブラリまとめ

画像の遅延読み込みといえば、jQueryプラグインのjquery.lazyloadが有名だが、最近はプロジェクトでjQueryやjQuery互換のライブラリを使わないことが多い。 そういったプロジェクトで使うためにjQuery非依存のライブラリをいくつか見つけたのでまとめておく…

WEB+DB PRESS vol.88 を読んだ

買った後にしばらく放置してしまってたんだけど、読んだ。 WEB+DB PRESS Vol.88作者: 佐々木拓郎,高柳怜士,鶴原翔夢,小野侑一,中村俊介,佐藤春旗,長野雅広,佐々木健一,久保達彦,若山史郎,佐藤太一,伊藤直也,道井俊介,佐藤歩,泉水翔吾,坪内佑樹,海野弘成,西尾…

JavaScriptのプロパティの上書きを検知する

必要になった状況の説明は割愛するのだが、オブジェクトのプロパティの上書きを検知したくなった。 コードで説明すると、事前に次のように書いておいたものが window.Foo = { alpha: function () { } }; 後からこうされる。 window.Foo = { beta: function (…

MobileSafariでテキストボックスを全選択させる

小さいんですが、1年に1回くらい同じことでハマっている気がするのでメモ。 よくテキストボックスを全選択させるためにJSでこんなコードを書いたりする。 var content = document.getElementById('content'); content.focus(); content.selectionStart = 0; …

ProtractorでE2Eテストを実行するときのクリーンな状態の準備と後始末について

E2Eのテストを走らせて手元だと通るけど、CIだと通らない、みたいなことがあって、原因を調べたら、cookieまわりが原因だった。 cookie や LocalStorage を利用しているアプリで、事前に「ページのcookieが発行されているか」「LocalStorageにデータが書き込…

Jasmineのspyでメソッドが呼ばれた回数をテストする術

こんにちは。タイ料理が食べたいです。きたけーです。 今日、JavaScriptのコードのテストをJasmineで書いていて、spy(Jasmineのテストダブル)が呼ばれた回数のテストの書き方を調べたのでメモ。 ドキュメントにありますが( http://jasmine.github.io/2.1/int…

npm, browserify(reactify)をつかって、reactの開発環境を整える(jsxを事前に変換するようにする)

こんにちは。バナナを三本食べました。きたけーです。 前回、React.js をとりあえず触ってみた - きたけーTechブログ の記事でreactを試してみましたが、 実際のアプリケーションでは、ページを表示する度に毎回jsxを変換するわけにはいかないので、 今回はb…

ES6のPromiseでキューを書いてみた

こんにちは。鍋を食べました、きたけーです。 最近、JavaScript Promiseの本 を読んでいるのですが、ES6のPromiseでキューを実装してみたくなったのでメモ。 投げられたジョブをひとつひとつ実行(解決)していく、キュー。 var Queue = function () { var que…

node-webkitでデフォルトに設定しているブラウザでURLのウィンドウを開く術

こんにちは。柿ピーを食べました、きたけーす。 node-webkitでアプリをつくるときに単純にaタグをクリックさせると、node-webkitのアプリでそのURLを開いてしまうので、一工夫必要になります。 次のように書くと、デフォルトに設定されているブラウザでURLの…