ジンジャー研究室

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

Elm 用の CSV デコーダーを作った

Elm 界隈では構文解析するライブラリを「パーサー(Parser)」、それを Elm の型に落とし込むものを「デコーダー(Decoder)」と呼び分けることが多い。パーサーは既にあって(lovasoa/elm-csv)、デコーダーで良いものがなかったので作った。 CsvDecode - elm-c…

Chrome 拡張機能「JSON-YAML Toggle」を作った

chrome.google.com これは何? JSON と YAML をページ上で切り替えるツール。最近 AWS を触っていて、設定ファイルを JSON でも YAML でも書けるんだけどサンプルがどっちか片方しかなく、コピペに不便だった。 使い方は、コンテテクストメニューで「Toggle …

Elm を既存の JavaScript と併せて使う N の方法

今月、社外向けに1回、社内向けに1回 Elm の紹介をしたところ、両方とも好評で「ぜひ使ってみたい」という声が多く、良かったと思う一方で、ここは補足すべきだったなーという点があったので書きます。 両者に共通して頻出だったのが、 既存プロジェクトの…

Idris で簡単なゲームを作ってみた

3日ほど前に、↓の記事を読んで「最近 Idris 熱いのかー」と思ったので入門してみた。 takezoe.hatenablog.com 実は以前から Elm コミュニティのエッジな人が Idris すごいと言ってて気になっていて、ちょうどバージョンも最近 1.0 になったばかりというのも…

Elm のコンポーネント論争とは何か

Elm 界隈で「コンポーネントをどう作るべきか」みたいな話がよく出る。日本に限った話ではなくメーリングリストとか Slack でも頻出の話題で、その度に熟練者が説明するのだが、すんなり理解されることもあれば喧嘩になることもある。 ちょうど昨日 Twitter …

Elm で個人ホームページを作ってみた

まず個人ホームページって響きが懐かしいな!という話はさておき。 普段は複雑な GUI 作りたいモチベーションで Elm をやっているんだけど、もちろん普通の Web サイトも普通に作れますよということで、参考になれば。 作ったサイト world-maker.com 高校の…

Elm の update 関数を綺麗に書くための Tips

生活の知恵です。 No more Task.perform identity (Task.succeed Bar) Bad update msg model = case msg of Foo -> ( model , Task.perform identity (Task.succeed Bar) ) 非同期にしたせいで2回レンダリングが走る。 Lazy を使えばある程度緩和できるが、…

DIV ⇒ SVG 移行して気付いたこと

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

複雑な UI を持つ Web アプリの実装課題を洗い出す

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

10000行超のElmを書いて見つけたベストプラクティス

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

Context Menu のデザイン

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

elm-conf 2016に行ってきたメモ

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

ElmでHTMLパーサを作って公開するまでの手順

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

再利用可能なコンポーネントはアンチパターン

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

inline style で :hover を再現した

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

海外エンジニアが話題にしていて「なるほど」と思ったプログラミングに関する考え方3つ

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

「Webアプリ」の解釈が広すぎる話

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

CSS in JS(Elm)したら想像以上に良かった

React界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。(ちゃんと知りたい人はこちら) 自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意して…

関数型言語Elmでオブジェクト指向する

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

Markdown形式で書いた記事やレポートをPDF形式で配布する

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

TOEICのリスニングCDを分割するWebアプリを作った

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

OSS関係で英語を書くときに心がけていること

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

cabal install/build 時に実行時に参照するファイルを含める方法

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

スケーラブルなプログラミングのために何が必要か

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

React.js+Fluxをやるなら今すぐElmを使うべき理由

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

Herokuと同程度に簡単なOpenShift使用メモ(on Windows)

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

HTTP/2で再帰的にPUSH_PROMISEするための最速アルゴリズム

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

権限の委譲と表現の自由度

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

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であるという定義についてあれこれ…