読者です 読者をやめる 読者になる 読者になる

kitak.blog

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

JavaScript

RxJS を使って、Vuex のようなものを書いた

散歩していたときにふと思いついたので書いてみた。 Vuex のゲッター、Vue の算出プロパティの実装は Observer パターンが適用されているので、Observer パターンが根底にある Rx で上手く実装できるんじゃないかな、という思いつきだったんですが、思いの外…

Vue.js のリストレンダリング( Virtual DOM 実装 )と相性の悪いデータの変更

この間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [</script>…

date-fns に乗り換えて、スクリプトのファイルサイズを削減した

題の通り。 Browserify を使ったプロジェクトでファイルサイズを大きくしているライブラリを探す - kitak.blog で moment がけっこうな割合を占めているということを書いたのだけど、少し前に moment から date-fns に乗り換えて、ファイルサイズを削減でき…

Vue.js v2 で揮発性の現象を扱う(ダイアログ等を実装する)

同僚に題の相談を受けていたんですが、そのときに「あんまりこの話、ググっても見かけないね」という話になったのでブログに書いておきます。 SPA でダイアログを実装する機会があると思うんですが、よくある事前にコンポーネントツリーのルート直下にダイア…

BroadcastChannel API を使ってみた

BroadcastChannel API を使ってみた。 同一オリジンのタブ・ウィンドウ・フレーム間でデータを送受信できる API。API の詳しい説明は BroadcastChannel API: A Message Bus for the Web | Web | Google Developers に譲ります。コードは、パッと見、Cross-Do…

Vue v1.x から v2.x へアップデートした

Vue v1.0.15 から最新の v2.2.4 へアップデートしたのでメモ。かかった時間は2日程度だった(ついでにやった Browserify から Webpack への移行も含む)。 全体を通して、内部実装は大きく変わったが API 自体は v1 とある程度互換性があるので、vue-migration…

Vuex でのエラーの扱いについての個人的な考え

最新の dex.fm — Development at Mercari US で、Redux でのエラーの扱いについての言及があって、自分は Vuex (Redux インスパイアな Vue の状態管理ライブラリ)でどうやっていたっけな、というのを文章で簡単に書いておきます。あくまで個人の考えです。 …

Browserify が生成したファイルを webpack で扱おうとしてハマった

webpack で Browserify で生成されたファイル( shim library )を import して生成されたファイルを実行したら、require を呼び出しているところで実行時エラーになった。 ファイルに require が含まれていて、それを webpack がパース(依存関係を解決)しよう…

TypeScript で書いている Node.js サーバーをファイルが変更されたときに自動で再起動したい

題の通り。 TypeScript に慣れるために、TypeScript でちょっとした Node.js サーバーを書いていたときのメモ。 GitHub - TypeStrong/ts-node: TypeScript execution environment for node で TypeScript のコードを直接 Node.js で動かすことができるのだけ…

2016年に使った&来年使いそうな JavaScript 関連のものと所感

2016年に使った&来年使いそうな JavaScript 関連のもの 以下のカテゴリでなんとなく書いてみます。去年と比べて大きく変わらないかんじです。動きの早かった 2, 3年前から、年々、動きはゆっくりになってきているというのが個人的な印象。 トランスパイラ ビ…

JavaScript のサイズを減らすことと効率良くキャッシュさせるためのメモ

題について、頭に浮かんだ考えや、手を動かして試したことのメモ。試行錯誤中なので、都度追記するか、そのときの考えを別途書く。 背景 モジュールバンドラに Browserify や Webpack を利用して一枚岩の bundle.js を生成している 機能追加を繰り返したこと…

Vue.js 2.0 の算出プロパティ周辺のコードリーディング

この記事は Vue.js Advent Calendar 2016 の21日目です。 https://skyronic.com/blog/vuejs-internals-computed-properties の記事に算出プロパティのミニマムな実装例が示されているのですが、実際に Vue のコードでどのように実装されているか調べました(…

vue-templatify という Browserify プラグインを作った

2016/2/1 追記: 単一ファイルコンポーネントでも、JSとテンプレートを分けて書くこと自体はできるので(refs: https://jp.vuejs.org/v2/guide/single-file-components.html#関心の分離について)、このプラグインは基本的に不要かもしれません。 作った。 gith…

依存する npm パッケージのバージョンを上げ続けるために ci-npm-update を導入した

題の通りなんですが、導入。 プロジェクトが依存する npm パッケージのバージョンを上げるのを、忙しさにかまけてサボりがちになっていた。意識が低くてもいいかんじにできないかなぁ、と思っていたところ、ci-npm-update を見つけた。 GitHub - bitjourney/…

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の…

bowerで入れるパッケージのバージョンが競合して依存解決できないとき

こんにちは。常夜鍋をたべました。きたけーです。 bowerで入れるパッケージのバージョンが競合して依存解決できないときに、please choose oneのようなメッセージが表示されて、どうやって解決するのか尋ねられます。 開発に携わっている各人が適当に解決方…

CreditCard.js のUIとJSの実装の説明がよかった

こんにちは。最後のそうめんをたべました。きたけーです。 creditcardjs というクレジットカードの入力フォームを提供してくれるJavaScriptライブラリがあるのですが、ライブラリのサイトに、 「カードの種類の識別をこういうふうにJavaScriptを書いたらいい…

JSON.stringifyで生成するJSONを読みやすくする

こんにちは。ピザを食べてビールを飲んで、ふらふらしています。きたけーです。 JSON.stringifyって、第二引数と第三引数を渡せるんですね... JSON.stringify(obj, null, 2); で、空白2つでインデントしてくれるので読みやすくなります。

esmorphでJSの関数の処理開始と終了時に処理を挟む

こんにちは。天下一品をたべました、きたけーです。 esmorphというライブラリをつかうと、既存のJSのコードの関数の処理の開始時と終了時をハンドリングして、自分のしたい処理を挟むことができます。こんなかんじです。 ここでは、関数の名前と定義開始・終…

JSのASTを扱うライブラリをつかって、不要なeval呼び出しを除くコードを書いてみた

こんばんは。寿司とサンドイッチとケーキをたべました、きたけーです。 今日は 東京Node学園祭2014 に参加しました。 個人的にt-wadaさんのセッションが面白くて( power-assert, mechanism and philosophy )、自分が思っていたよりもJSでASTを扱うことがカジ…

DOM要素のsubmitメソッドを呼んでも、onsubmitハンドラはトリガーされない

こんにちは。そうめん大好き、きたけーです。 DOM要素のsubmitメソッドを実行しても、onsubmitハンドラは呼ばれないんですね (一時間くらい潰しました...) コードで書くと、 document.forms["myform"].submit(); とかやっても、