kitak blog

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

JavaScript

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(); とかやっても、

画像データをブラウザのJavaScriptでbase64エンコードする術

こんにちは。おなかが空きました、きたけーです。 ブラウザのJavaScriptで画像データをbase64エンコードする方法を調べてみました。(すんません、コードはCoffeeScriptです) Canvas Canvasを使う方法。こんなかんじ window.onload = -> source = $('#source'…