ジンジャー研究室

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

CSS in Elm 方式を導入してから1年半以上たった感想

CSS in JS(Elm)したら想像以上に良かった という記事をずいぶん前に出して結構ブクマを貰えたんだけど、今は「なんだかなー」と思っているので整理する。冷静に考えると、そもそもこのエントリで書いていることのほとんどが「良かった」ではなく「悪くなかっ…

Promise でリトライや同時実行数の制御をするやつ作った

JavaScript でバッチ実行を少しでも楽にしたいという思いで作ってみた。 www.npmjs.com github.com まだバージョン 0.7.0 だけど、大体のことは出来るはず。 機能 デモ を触ると大体何ができるかわかると思います。 実行間隔の指定 同時実行数の制限 リトラ…

Elm のパイプ |> の良さ

小ネタ。 JavaScript の [1,2,3].map(a => a + 1) が、 Elm だと [1,2,3] |> List.map (\a -> a + 1) で、両方とも左から右に読めるからそんなに変わらないなーと思ってたんだけど、一つ違う点に気づいた。JavaScript で Promise を気持ちよく連鎖してて書い…

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…