マップ閲覧・編集システムで画面上に DIV で描いていた図形を SVG に移行した。内部に数百のオブジェクトを含む要素の動作が重く、ドラッグしたときにカクカクになる問題を解決したかった。ちなみに Virtual DOM は使っているがすでに最適化は済んでおり、毎…

Virtual DOM でとりあえずレンダリング周りの問題が解決していて、 Elm を使うと型まわりも解決するのだが、その先に課題が山積してきたので、いま考えていることをメモしておく。前提としては、一般的な GUI っぽいアプリをブラウザ上で動かすことを考えて…

この記事はElm Advent Calendar 2016 の4日目です。 会社で書かせてもらってるElm製アプリが10000行を超えたので、現時点で個人的にこれはと思うベストプラクティスを実際のソース付きで書いてみる。 github.com （アプリについての情報は機会があれば） 1.…

ブラウザ上に Context Menu を実装するときに何を参考にすればいいのかわからなかったので、自分用にメモ。 見た目 Win10 - Chrome Win10 - Firefox Win10 - Edge Win10 - Desktop Mac - Browsers/Desktop Google Spreadsheet 位置 クリックした位置からメニ…

elm-conf 2016 アメリカ、セントルイスにて。 以下、終わった後に記憶を頼りに書き起こした雑極まりないメモ。 雰囲気 写真は休憩中だから人少ないけど。 トーク Keynote: Code is the easy part (by Evan Czaplicki) コードを書くのは一番簡単な部分。言語…

ElmでHTMLパーサを作った。 github.com せっかくなので、ライブラリ制作に着手してから公開するまでのプロセスを書いてみる。Elm 開発の雰囲気を伝えるのが目的なので、特定のトピックが知りたい方はQiitaへどうぞ。（コードが沢山あるけど試してないので動…

言いたいこと Webフロントエンド界隈で「コンポーネント」という言葉が蔓延していて、「再利用可能になるように設計すべきだ」という論調があるが、実際には本当に再利用可能である必要性があるまで、極力考えないほうが良い。YAGNIとも言う。 以下、現時点…

CSS in JS(Elm)方式で、:hoverが出来ない問題を解決した。 github.com ElmだけどJavaScriptでもたぶん出来る。 使い方 通常、次のように書いている部分を li [] [ text "Hello" ] 次のように書く。 hover [("background", "#456")] li [] [ text "Hello" ] …

プログラミングに関する格言みたいなのは昔から結構あって、例えばYAGNIみたいに日本でも十分浸透してるのは多いんだけど、やっぱり新しい概念はどんどん生まれていくので追いかけていると面白い。 というわけで、最近知った中でもっと日本でも言及されても…

最近Webフレームワーク周りで無駄に摩擦が生まれてるなー、と思うことを詩的に書いてみる。 そもそも何が作りたいのか 古くはjQueryから始まって、最近だとReact(+Redux)とかAngular2とか色々あるわけだけれども、そもそもそれらを使って作ろうとしてるもの…

追記 最新の感想も合わせてご覧ください。 jinjor-labo.hatenablog.com React界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。（ちゃんと知りたい人はこちら） 自分も前々…

（4/23 追記：はてブのコメントで指摘をいただいた箇所を直しました。ありがとうございます！） 最近またElmを触り始めているので小ネタを書きます。 このエントリで主張したいこと。 関数型言語でもオブジェクト指向の考え方は使える オブジェクト指向とは…

あまりまとまってる記事がないので書いた。 やりたいこと Markdownでさらっと書いた記事を社内に共有したい。 しかしMarkdownだと色々問題がある。 標準的なビュアがない PC環境によって見え方が変わる 画像などを含めるためにZIPなどで共有する必要があり読…

TOEICのリスニング問題集をやっていて「ムキーッ！」となることありませんか？ 私は２つほどあります。１つは「ひとつの問題を繰り返して聞きたいのにファイルが分かれていない」こと、もう１つは「何を言ってるのかさっぱり分からない」ことです。そこで今…

最近、OSS関係でGitHubとかMLとかに顔を出していて、当然ながら会話は全部英語。 というわけで、英語を書くときに心がけていることを簡単に書く。 「英語が下手ですいません」とか前置きしない 読めば下手だって分かるから、わざわざ言う必要ない。これ言っ…

やりたいこと いまいち上手く日本語に出来なかったので図解する。 コマンドラインツール等で、実行時に手元のファイルをテンプレートとして利用したり、静的ファイルをディレクトリごとコピったりしたいことが良くある。でもそのままExecutableにするとファ…

Fluxに関する独自解釈と妄想を、何かの翻訳っぽく書いた。 スケールするアーキテクチャ フレームワークを作る時、我々は「簡単に記述する」ことを第一に考えがちだ。 そして、簡単にするための仕組みはウケる。 逆に記述量が増えるとウケない。 しかし例外が…

皆さん、そろそろElmやりましょう。 Elmって何なの？ Webブラウザで動くFRP(Functional Reactive Programming)言語です。 コンパイルするとHTMLやJavaScriptを吐き出します。 Elm 公式サイトに動くサンプルが大量にあるので見てみると面白いです。 どうして…

Heroku有料化に伴いOpenShiftを試した。その時のメモ。 以下、簡単と言いながら色々躓いているがドキュメントは凄く親切なので、基本的にはこれで足りる。 Getting Started | OpenShift Developersdevelopers.openshift.com アカウントを作る Webページから…

話の発端 サーバプッシュするリソースの関連付けを全部手動で書くのが面倒だから、動的に中身を読んで解決したい。 その時に、依存の深いところにあるものでも、リクエストのストリームを閉じずに待たないといけないという制約があった。 HTTP/2で再帰的にPU…

難しい話ではないが、思考の整理のために書いてみる。 図は、左の人が右の人に「この材料で何か喋って」と頼む様である。 下に行くほど右の人に大きな権限と表現の自由が与えられている。 同じ挨拶でも「Hi」と言わせたい時は、権限の委譲が不十分だと左の人…

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

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

タイトルの通りで、今ぶち当たっている問題を共有するのが目的。 図のように、ある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()を呼んだら値が増えますとい…

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

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

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

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

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