Runner in the High

技術のことをかくこころみ

Elm

Elmをローカルインストールしているとelm-language-serverのDiagnosticsが動かなくなるバグを修正するPRを投げた

github.com 仕事で開発しているElmアプリケーションとElmLSの相性が悪いのかDiagnosticsが動かないことが多かった。動くときもあるが、動かない時の方が多いレベル。もう諦めてWebpackでのビルド結果を見ながら作業をしていたが、非常に生産が悪かったのでこ…

vim-lspでelm-language-serverを使うとリファクタリング系のCodeActionが動かない件を修正するPRを投げた

github.com 仕事柄vim-lspでelm-language-serverを用いてElmを書くことが多いのだが、なぜかVimだとリファクタリング系のCodeActionが動かないことが多かった。中でも関数のexpose/unexposeが動かないのはまあまあストレスだったので、この機会に腰を据えて…

なぜElmは0.19のままか、変化すること/しないこと

discourse.elm-lang.org つい先日、数か月ぶりにElmのupdate話がでてきた。 Elmは0.19からほとんどメジャーバージョンアップしていない。最後のリリースは約9か月前にもなる。 この事実だけを知ると「Elmはもう終わったのか」「Evan*1は開発のモチベーション…

フロントエンドアプリケーションにおいて状態をどこに置くべきか論

後学のために自分の考えていることをまとめてみる。 考えられるパターン これまでの経験から以下4つのパターンがある。 ローカルStateでprop-drillingする ローカルStateかつイベント経由でデータ交換をする グローバルStoreとローカルStateを併用する グロ…

Elmにおける比較処理の高速化テクニック

ここで触れられてた話がおもしろいかったのでざっくり紹介 discourse.elm-lang.org 文字列比較はcase文のほうが早い(ことがある) これは遅い ensureNonBreakingSpace : Char -> Char ensureNonBreakingSpace char = if char == ' ' then nonBreakingSpace …

Elmにおけるビルダパターンには後方互換性というメリットがある

Elmにおけるビルダパターンというのは以下のようなインターフェイスを指す。 -- setXxxのような関数をパイプでつないでいく雰囲気のやつ Button.new |> setPadding 10 |> setBackground "blue" |> setLabel "next" |> view このインターフェイスの優れた点は…

elm-firestoreにおける型安全なパス組み立ての設計

elm-firestoreのパス組み立て周りの実装を型安全な設計にしてみたのでその話。 github.com Firestoreにおけるパスの仕様 まず大前提としてFirestoreにはリソースの場所を示すパスという概念があり、ざっくりパスは以下のようなルールに基づいている。 ルート…

elm-firestore v10.0.0をリリースした

引き続きチビチビと作り続けていたelm-firestoreだが、とうとうv10をリリースした。 I finally have just rolled out elm-firestore v10.0.0! It has Query opertion support and fixes interface of transaction-related functions. Plus, integration test…

elm-typedパッケージを使えばもっと型で仕様を表現できるかも

elm-typedというパッケージを作った。詳しくは以下のGithubのREADMEに書いている。 github.com パッケージ自体が根本的に実現したいことはPunie/elm-idとかjoneshf/elm-taggedあたりとほぼほぼ同じ。プリミティブ型をそのまま使わず型エイリアスでもなく、プ…

Elmアプリケーションにおけるモジュールレベルでの詳細設計

Elmアプリケーションで比較的モジュール多めなアプリケーションの機能開発をするときに同僚とトライしている手法について。 言語的なElmのテクニックみたいな話ではなく、どちらかといえばもっと抽象的なハナシ。 1. 画面からざっくりとモジュールを見つけ出…

elm-firestoreでJSを1行も書かずにElmアプリケーションでFirestoreを使う

この記事はElm Advent Calendar 2020の8日目の記事です 今年の春頃からコツコツと個人開発のアプリケーションで使うためのElm用Firestoreライブラリのパッケージを作っていたので、その紹介をします。 github.com できることはREADMEに書いてあるとおりで、…

ElmでCodecを用いてエンコーダ・デコーダの実装をケチる

この記事はFringe81 Advent Calendar 1日目の記事です。 Elmでアプリケーション開発をしているとほぼ100%出現するのがエンコーダ・デコーダの実装。 基本的に両方セットで実装することが多いが、データ構造が共通であればCodecと呼ばれる類の機能を提供する…

ElmでサードパーティーなUI系モジュールを使う際にはTEAを前提にしたインターフェースでラップする

Elm Packagesで公開されているモジュールの中にはTEAでいうところのviewやmodelしか提供されていないものがあったりする。 これがコレクション系モジュールだとか関数単位での機能提供が目的のモジュールであればまだ問題ないが、UIを提供するタイプのモジュ…

Elmアプリケーションにおける型と抽象化手法

Elmは機能を絞った言語であるためScalaやHaskellのような高度な抽象化は言語機能上できないが、使う使わないに関わらず知識として「やれること」「やれないこと」を知っておくと、コード表現に幅が出る。 Extensible Record ざっくり言うとレコードのプロパ…

Interpreter Pattern in Elm: 副作用をテスタブルにする

Elmは純粋関数型プログラミング言語なので基本的にはアプリケーションを構成するすべての関数はテスタブルであるが、唯一Cmd型だけはテストすることができない。 たとえば以下のようなupdate関数においてPersistToStorageのメッセージが渡された際に必ずスト…

elm-multi-waitableで非同期処理の完了待ちをModelに表現する

Elmアプリケーションにおいて非同期処理の完了待ち実装をいい感じにするelm-multi-waitableというモジュールを公開した github.com 内部的には状態遷移のタイミングでデータを受け取って保持するステートマシンのようなものだが、これを使うことでフロントエ…

vim-lspでElm用のVim環境を構築する

ElmCast/elm-vimをやめてvim-lspとasyncompleteを使ってelm-language-serverに対応したVim環境を整えたのでメモ。 github.com プラグイン導入 vim-plugでvim-lspとasyncomplete系のプラグインを一気に導入する。すでに導入していれば不要。 Plug 'prabirshre…

shelm: 脱法Elmパッケージマネージャー

elm/core などのカーネルモジュールにバグがあるとき、公式のバグ修正を待っていられないことがある。物によってはアプリケーションの動作に大きな影響があったりして早急な修正が必要になる場合もある。 そのような場合にはshelmを使うことで、自分たちで野…

Elmのモジュール分割における区分軸の観点

Elmアプリケーションにおいてモジュールを作る際に、モジュールへ機能をどう凝集させるかに関して。 機能による区分 かつてElmにおいて一般的だった分割方針。グレーの部分がひとつのモジュールを表している。 ModelとUpdate, Viewなどをすべて別のモジュー…

DEVでフォームにおけるOpaque Typeの設計に関するシリーズを書いた

DEVにシリーズ機能というものがあることを知って試してみた。全2作。 dev.to dev.to elmbitsでも取り上げられた Issue #14: This week ElmLove, PET stack, calculator project, webapp in func languages, opaque types, new podcast, and more. By @luca_m…

ElmでPromise.all的なことをしたいときに便利なelm-task-parallel

github.com 背景 JavaScriptだと「起動時にサーバーへA, B, Cのデータの取得を問い合わせて全てデータがそろったら次の処理へ移る」というような実装をPromise.allで作ることがよくある。 これをElmで雑にやろうとすると以下のようなMaybeまみれのコードが生…

ElmでBrowser.elementを使いつつルーティングを自前で作る

一般的にElmでルーティングを行うSPAを作る場合にはBrowser.applicationを使って、組み込みのルーティングの機構を使うことになる*1。しかし、一方でルーティングの仕組みを持たないBrower.elementやBrowser.documentでも、ルーティングをJavaScriptサイドで…

Elmアプリケーションにおける多言語対応パターン

特段テクい話ではないが最近話す機会があったのでこちらでもメモ。 まず、以下のように対応している言語のパターンを表現した型を全画面共通で使える型として用意しておく。 type Lang = Ja | En あとは各ページごとに画面で表示するラベルのインターフェイ…

Elmでコンシステント・ハッシュ法を扱うパッケージを作って得たモジュール設計の学び

数ヶ月前にElmでコンシステント・ハッシュ法を扱うためのelm-consistent-hashingというモジュールを公開した。 github.com こんな感じで使える。詳しくはテストを見るといいと思う。 let ch = ConsistentHashing.new Replica.default (Node.new "node1") |> …

エンジニアHubで「Elm入門と実践」を寄稿した

エンジニアHubさんというあの全日本的に有名なWebメディアでElmの記事を執筆しました。 employment.en-japan.com これまでにTypeScriptの記事とかはあったものの、関数型AltJSの記事はたぶん今回のElmが初めてです。 なんだかんだ国内でも少しづついろんな盛…

渡米してDeveloperWeek 2020で登壇した

アメリカのDeveloperWeek2020というイベントに参加して登壇発表した。 izumisy.work 改めて考えると、社会人になってから初の渡米&初のアメリカでの登壇。 ヨーロッパもいいけど、やはりテックカンファレンスといえばアメリカだよね。 DeveloperWeekとはな…

Elmにおける依存性逆転(DIP)の表現

この記事を読んでなるほどな〜と思ったので記事にしてみる。 medium.com 依存性逆転とは 雑にいうと実装ではなくインターフェイスに依存させ、モジュール間の依存関係を疎結合にする手法。英語ではDependency-Inversion Principleと呼ばれ、頭文字をとってDI…

Elmにおける「型によるルールづけ」の考え方

Elmは静的型付言語なので、型のチカラを活かすことでコンパイラに「あっては行けない状態や組み合わせ」をチェックさせることができる。 高度な例としては前回書いた以下の幽霊型(Phantom Type)の記事があるが、もう少し簡単な例を紹介しようと思う。 izum…

ElmでPhantom TypeとExtensible Recordを用いて型安全な状態遷移パターンを実装する

このDiscourseスレッドがかなり面白かった。 OPは「幽霊型(Phantom Type)を使うと特定の順序でしか型安全に状態遷移できないように実装できると思うんだけど、どうしたらいいかな?」と質問している。 discourse.elm-lang.org 実装してみる 回答者からのア…

Elmで再帰構造を使って特定の順序でなければ状態を更新できない型を作る

a, b, c, dという型がある状況でaがなければbが更新できないし、bがなければcが更新できない、のような流れを再帰構造の型で表現する実装。使いどころは謎だが思いついたのでメモしておく。 type Data a b c d = Data (Maybe (a, Maybe (b, Maybe (c, Maybe …