ジンジャー研究室

長めのつぶやき。難しいことは書きません。

proxyquireでNode.jsのrequireをモックする

発端 React+Fluxのアプリのテストをするのに、requireのモックが必要だった。 だけどJest使いたくない。 そこでこれを使う。 thlorenz/proxyquiregithub.com 簡単な使い方 something.js module.exports = 'music'; love.js var something = require('./somet…

DOM要素のidはグローバル変数

DOM: element IDs are global variables 知らなかった…orz とはいえ普段は使わないほうがよさそう。 既に定義されているグローバル変数と被っていると上書きされない。 <div id="a">Hello!</div> <script>console.log(a);//<div id="a">Hello!</div></script> <script>var b;</script> <div id="b">Hello!</div> <script>console.log(b);//un</script>…

HTTP/2で再帰的にPUSH_PROMISEする場合の注意点

タイトルの通りで、今ぶち当たっている問題を共有するのが目的。 図のように、あるHTMLを起点にして依存しているすべてのリソースに対して、再帰的にPUSH_PROMISEしたい。 PUSH_PROMISEはPROMISEであるため、サブリソース本体が起点となるリソースよりも早く…

シングルトンモジュールのテスト

シングルトン(singleton.js)。 module.exports = { value: 0 }; その値をインクリメントするやつ(incr.js)。 var singleton = require('./singleton.js'); module.exports = function incr() { singleton.value++; }; incr()を呼んだら値が増えますとい…

HTTP/2のサーバープッシュを自動化するNode.jsライブラリを作った

そろそろRFCとして公表されるHTTP/2ですが、GoogleがHTTP/2を使ったRPCフレームワークを出してみたりとか、その界隈は大盛り上がりですね! HTTP/2の目玉機能と言ったら、やっぱりPUSH_PROMISE! PUSH_PROMISEと言えば、「index.htmlが必要だったらapp.jsと…

副作用って何だっけ

関数型界隈で、「状態がある=副作用」みたいな話を何度か聴いてちょっと違和感があった。 副作用とは、主たる目的の他に外部に悪影響を与えることだと思っていたのだが。 つまり「Hello, World」を表示することは、あまり副作用と呼びたくない。(主作用?…

HTTP/2でHello Worldしてみた

アドベントカレンダー26日目。嘘です。 jinjor/node-simple-http2 Node.jsで簡単なHTTP/2サーバを作ってみた。Hello, Worldしかできない。 説明のために誰でも読める風にしたかったので、ストリームもオブジェクト指向もなく、決めうちの多いシンプル実装。…

脱PolymerなWeb Componentsデザパタ

はじめに 今朝話題になっていたWeb Componentsの基本的な使い方・まとめ に触発されてみる。 すごい…!私にはこんな緻密な資料は書けないorz だけど何か書きたい。書くぞ。 そろそろWeb Componentsしたい Web開発に革命をもたらすと噂のWeb Componentsだが、…

Object.observe() のコールバック実行タイミング

ざっくり分かるスクリプト 下のスクリプトを実行すると、どのようにalertが表示されるでしょう。 var obj = {}; setTimeout(function() { alert('D'); }); Object.observe(obj, function() { alert(obj.a); obj.a = 3; }); alert('A'); obj.a = 1; alert('B'…

Haskellでコードゴルフするためのメモ

明日プロダクションコードで使える無駄知識。 変数を1文字にする 基本ですね。 空白を入れない なるべく隣接させる 各種記号 $ . + - * / : ++ !! | クォーテーションの類 '' "" `` () [] {} 数字の次 2in 改行しない ;で改行できます 型を書かない 型推論…

Polymerで個人のホームページを構築してみた

Web ComponentsでWebサイトの作り方が変わる ブログやSNSの登場以来ずっと放置していた自分のサイトを復活させてみた。(祝!) 一応このブログは技術ブログのような顔をしているので、コンテンツの中身についてはあまり言及しない代わりにアーキテクチャに…

JavaScriptでバグが消えるまで

動的型付け言語は実行時にエラーが出るから嫌だよね、と良く言うけれども、実際にどんなエラーがどのくらい出ているのかを遊びがてら試してみた。 作ったものと条件(ざっくり) HTML中でSVGを一定時間アニメーションさせる ライブラリとしてRaphael.jsとBac…

上司を説得して新技術をなんとか導入する方法

頭の固い上司(プロマネ)が新しい技術を導入することに対して消極的だったとする。曰く「一体それに何のメリットがあるんだ。リスクを考えたのか。やたらめったら怪しげなものを投入するんじゃない!」 しかしあなたはこの上司をなんとか説得して、素晴らし…

GUIをツリーにする話(新篇)

English 前置き この記事は以下の記事からの続きである。GUIをツリーにする話(前篇) - ジンジャー研究室 GUIをツリーにする話(後篇) - ジンジャー研究室前回の話をざっくりまとめると、 リストと追加ボタンを扱うコンポーネント 合計を表示するコンポー…

GUIをツリーにする話(後篇)

English 前置き この記事はGUIをツリーにする話(前篇)の続きである。ざっと振り返ると、GUIにおいてViewをツリー状に配置する際、複数のViewに同じModelをそれぞれ別個に管理させると、イベント発生時に同期を取るのがつらいという話だった。 というわけで…

GUIをツリーにする話(前篇)

English 前置き 「JavaScriptでリッチクライアントを作りましょう」等という無茶を皆がこぞってやり始めるようになってしまったのは、どう考えてもGoogle様のせいという気がしてならないのだが、もう後戻りできないしどうせなら流行に乗って一発当てよう。と…

演算の順序を逆ポーランド記法で整理するメモ

括弧の入れ方のパターン テンパズルの解答生成のロジックを考えるときに、中置記法で式を書いてevalするというロジックを考えたわけだが、括弧の挿入位置を考えるのが面倒で別の方法を考えていた次第。以下の表は、中置記法での括弧の入れ方のパターンを逆ポ…

非同期処理の完了を待って次のコードに移る

いつ終わるか分からん非同期処理 どうしても逐次実行したいんだYo! というわけで、強引に逐次実行するメソッドを作ってみた(荒削り) var sequence = function(functions){ var _setTimeout = setTimeout; var asyncCount = 0; var next = function(){}; wi…

JavaScriptでGUIエディタを作ろうとしてみた

JavaScriptでGUIエディタ DelphiとかVisual StudioとかによくあるGUIエディタってJavaScriptにないの?⇒ 検索して見つからなかった。⇒ 作ろう。Minamaki(GitHub)Demoボタンを押してRunすれば、とりあえず動きます。ネタなので本気で作る気があまりありません…

jQueryでグループの仕切りをドラッグする

jQuery UI Sortable (+ Something) ついかっとなってやった。順番の固定されているグループと、これまた順番の固定されているアイテムに対して「ここからここまでがこのグループなんじゃー」という風に指定するUIを書いてみた。 ドラッグできるのはグループ…

DOMがビューである理由

JavaScriptでMVCをやってると、「そもそもDOMってモデルだよね」って思うことがあって、いやいやそれは違うんだと言い聞かせているうちに、謎の4コマ完成。 DOMはモデルだよ DOM = Document Object Model という名の通り、DOMはモデルだよ。 これをイベント…

Angular.jsとBackbone.jsのDOM依存を図解する

果敢にもMVCフレームワークの図解を試みたので、どうぞ! MVCの動機 MVCという言葉が初めて登場してから30年以上たった今、最早なんだったのか分からないほどMVCの定義は混迷をきたしているわけだが、どれがMVCでMVVMでMVPであるという定義についてあれこれ…

HaxeとTypeScriptを両方使ってみた感想

型付きAltJSとして名高いHaxeとTypeScriptですが、両方使ってみたので比較しながら感想でも書こうかなということで。あくまで自分の使ってみた範囲でしか話せないのでご容赦を。執筆時点での両者のバージョンは、Haxe2.1/TypeScript0.8で、もうすぐHaxe3.0/T…

pegjs で Reactive Programming な Alt.js を作ってみた。

Rea10 たとえBackbone.jsのような優れたライブラリを使っていたとしても、Observerを実装しようと思ったらそれなりに面倒な記述をしなければなりません。怠惰な私にはそれが耐えられません。 なので、そういう事をする前提のAlt.jsを作ってしまえばいいんじ…

JavaScriptのテンプレートエンジンを作ってみた

Gyotoku.js 行徳という場所で作ったので、Gyotoku.jsです。Backbone.jsとかそれに近いMVCを構築していて、やっぱりViewはテンプレート使って書きたいなーって思うわけですが、イベントハンドリングするのにidとか色々埋め込んでセレクタで取ってくるのが面倒…

Haxemine 0.2 リリース

Haxemine 0.2 こつこつと作っているHaxeエディタのバージョンが上がったので、一応記事にしてみます。(npm登録はまた今度でいいや…) 主な機能追加 4月中に消化した33issuesのうちenhancementタグが付いているもの。 #52 検索時にその行に移動する(Win) #42…

Haxeエディタ作ってみた。

Haxemine 0.1 Haxemine(ヘクスミン)っていいます。 とりあえず動いたくらいのノリです。 特徴 ブラウザで動きます。 起動時と保存時にコンパイルが走ります。 普通のエディタっぽい機能があります。 Haxeで書かれています。 動作確認 Win7のみ。MacとかLin…

HerokuでNodeJSアプリを動かすときの備忘録

自分用のメモなので解説はないです。 インストールからアプリ登録まで 忘れた。 ログイン heroku login アプリの確認 heroku apps リネームしたらリモートのパスが通らなくなった myappにした場合、次のように修正。 /.git/config [remote "heroku"] url = g…

Eclipseの「メソッドの抽出」機能で遊んでみた(Java)。

目新しいこと何もなし。 ちょっと挙動が気になったので。 まずは普通に。 public static void main(String[] args) { int a = 1;//ここを抽出 } public static void main(String[] args) { hoge(); } private static void hoge() { int a = 1; } 変数aは戻っ…

JavaScriptでMVC実装してみた その4

リスナ登録 ちょっと方針を変えました。 今まで「一部のModelが更新されたら全体のViewを更新」みたいな感じでやってたのですが、本当に細かな変更でも拾ってしまってコストが高そうなので必要な分だけ描画してもらうように変更してみます。 var Model = fun…