タグ

ブックマーク / jinjor-labo.hatenablog.com (6)

  • 10000行超のElmを書いて見つけたベストプラクティス - ジンジャー研究室

    この記事はElm Advent Calendar 2016 の4日目です。 会社で書かせてもらってるElm製アプリが10000行を超えたので、現時点で個人的にこれはと思うベストプラクティスを実際のソース付きで書いてみる。 github.com (アプリについての情報は機会があれば) 1.必ずスタイルガイドに従う 行数が増える傾向にあるが、かなり読みやすくなるので絶対に従った方が良い。 Style Guide 関連コミット (let...in中に空行を挿入している) 2.データ構造にタプルを使わない 例えばマウスの位置などをタプルで(Int, Int)のように書きたくなる。しかし後悔するのでやめた方が良い。 -- 微妙 calculateX : Model -> Int calculateX model = let (x, y) = model.position in max 0 x --

    10000行超のElmを書いて見つけたベストプラクティス - ジンジャー研究室
  • ElmでHTMLパーサを作って公開するまでの手順 - ジンジャー研究室

    ElmHTMLパーサを作った。 github.com せっかくなので、ライブラリ制作に着手してから公開するまでのプロセスを書いてみる。Elm 開発の雰囲気を伝えるのが目的なので、特定のトピックが知りたい方はQiitaへどうぞ。(コードが沢山あるけど試してないので動かないかも。あと、途中でテストライブラリをアップデートしたりして実際に踏んだプロセスと違うし、コードも所々違うんだけど、それは無視して最短・最適のパスを踏んだことにする。) 経緯 Excel(とか他の表計算ソフト)からクリップボードにコピーしてWebアプリに貼り付けようとしたところ、フォーマットがHTMLだったのでパースしてデータを取り出したかった。ここで問題発生。 ElmHTMLパーサが無いだと。。— Yosuke Torii / ジンジャー (@jinjor) August 30, 2016 別にJSでパースしてElm側に

    ElmでHTMLパーサを作って公開するまでの手順 - ジンジャー研究室
  • CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室

    追記 最新の感想も合わせてご覧ください。 jinjor-labo.hatenablog.com React界隈では結構前から「CSS in JS」と言って、雑に言うと「CSSはイケてないからJSでインラインスタイルを書いてしまえ」という話がある。(ちゃんと知りたい人はこちら) 自分も前々からCSSは変数が使えないとか名前が被るとか諸々イケてないのは同意してたんだけど、じゃあJSで書くのが良いかと言われたら「いや流石にロジック汚れるんじゃね?」とか「CSSの便利機能を捨てて平気なの?」とか色々と懐疑的だったんだけど、1~2か月書いてみたら想像以上に良かったので感想を書くことにした。 まず一番に主張したい部分を先に言うと、こう。 (誤解)JSのコードがスタイル記述で汚れる (正解)JSのコードがスタイル記述から解放される 前提 実際に書いたのはJavaScriptではなくElmなので以下は全て

    CSS in JS(Elm)したら想像以上に良かった - ジンジャー研究室
  • 関数型言語Elmでオブジェクト指向する - ジンジャー研究室

    (4/23 追記:はてブのコメントで指摘をいただいた箇所を直しました。ありがとうございます!) 最近またElmを触り始めているので小ネタを書きます。 このエントリで主張したいこと。 関数型言語でもオブジェクト指向の考え方は使える オブジェクト指向とは? オブジェクト指向と言うと色んな意味を含んでいて、解釈の違いで論争になるのでまずは整理します。だいたい特徴として挙げられるのは以下でしょう。 カプセル化 継承 メッセージング どのオブジェクト指向に馴染んでいるかは開発者のバックグラウンドによって異なると思いますが、私はオブジェクト指向と言ったら圧倒的に「カプセル化」であって「役割分担」です。というわけで、以降はカプセル化の話です。 関数型言語とオブジェクト指向の代表としては、ElmJavaScriptを例として取り上げます。Elmに馴染みのない方でも雰囲気は掴めると思います。 関数型言語は

    関数型言語Elmでオブジェクト指向する - ジンジャー研究室
    BigFatCat
    BigFatCat 2016/04/20
    "関数型言語だからと言って肩肘張る必要はありません。同じようにやれば良いのです。"
  • React.js+Fluxをやるなら今すぐElmを使うべき理由 - ジンジャー研究室

    皆さん、そろそろElmやりましょう。 Elmって何なの? Webブラウザで動くFRP(Functional Reactive Programming)言語です。 コンパイルするとHTMLJavaScriptを吐き出します。 Elm 公式サイトに動くサンプルが大量にあるので見てみると面白いです。 どうして今やるの? これまでElmと言えば、良くも悪くも理想を追求した言語で、一般的なWebの部品(HTML/CSS/JavaScript)と相性が悪く、「まぁちょっとCanvas使っておもちゃアプリでも作るかー」くらいが関の山だったのですが、最近になってその状況は一変しました。 HTMLライブラリのサポート Ajaxなど非同期タスクのサポート JavaScriptAPIを通じて相互接続可能 エコシステムの登場 順序はちょっと忘れましたが、0.14とか0.15で色々出来るようになりました。 im

    React.js+Fluxをやるなら今すぐElmを使うべき理由 - ジンジャー研究室
  • Angular.jsとBackbone.jsのDOM依存を図解する - ジンジャー研究室

    果敢にもMVCフレームワークの図解を試みたので、どうぞ! MVCの動機 MVCという言葉が初めて登場してから30年以上たった今、最早なんだったのか分からないほどMVCの定義は混迷をきたしているわけだが、どれがMVCでMVVMでMVPであるという定義についてあれこれ考察するのは個人的には好きでなくて、「結局何がしたいのか」という動機がぶれていなければ何でも良いと思っている。 じゃあそれは一体何なのかということを自分なりに考えてみたところ、次の一言に落ち着いた。 「ModelはViewに依存したくない」 世間的には(?)ModelとViewを単に「分ける」と説明されることが多いが、私はそれだけでは納得していなくて、依存の方向こそが重要だと思っている。たとえ分かれているように見えてもModelがViewを参照していたら、情報の取得先や表現方法は固定化されてしまう。 ModelはViewの事情から

    Angular.jsとBackbone.jsのDOM依存を図解する - ジンジャー研究室
  • 1