この記事は Elm アドベントカレンダー2022 に投稿しています。 はじめに Elm Meetup で話したネタです。イベントでは5分間でかいつまんで発表したので、この記事でそれぞれの要素についてもう少し詳しく説明します。 当日の発表資料です 作ったもの ブラウザで動くルービックキューブを作成しました。下のリンクから実際に動かしていただけます。 動いている様子 使用した言語は Elm (v0.19.1) です。その他ライブラリとバージョンはこちらを参照してください。 注意 ルービックキューブのデータ構造は、ルービックキューブをソフトウェアで表現するための具体的な方法について述べています。 Elm を使った 3D オブジェクトの表現やアニメーションの実装方法などを知りたい場合は、3D オブジェクトの実装から読んでください。 コードは雰囲気を感じてもらうために掲載しています。厳密な定義をして

https://opt.connpass.com/event/222709/

(タイトル字余り) この記事は筆者が社内勉強会で発表した内容を(個人的に出来が良いと思ったので)外部向けに再構成したものです。(大変長くなってしまった) 状況その1 いきなり以下のコードをご覧ください。 type Contact = { Name: PersonalName; EmailContactInfo: EmailContactInfo option; PostalContactInfo: PostalContactInfo option; } そして以下の仕様をご確認ください。 Business Rule: “A contact must have an email or a postal address” 出典と動機、課題 上掲コード及び仕様はDesigning with types: Making illegal states unrepresentable | F# for

こんにちは、delyでクラシルiOSアプリ開発を担当している稲見 (@inamiy)です。 この記事は「dely #2 Advent Calendar 2020」の25日目の記事です。 dely #1 Advent Calendar 2020 dely #2 Advent Calendar 2020 昨日は、delyのSREチームのjoooee0000(高山)さんによる delyのSREチームがオンコールトレーニングを導入する3つの理由 の記事でした。 オンコール対応できるエンジニア、強くてカッコいい・・・ 私の方からは、メリークリスマス🎄🎅🔔 にふさわしい Elm Architecture による unidirectional なプレゼントをお届けします🎁 (2020/12/26 EDIT: タイトルを「なぜ MVVM は Elm Architecture に勝てないのか」から「

Vanilla JS（ES6）で書かれたTodoMVCアプリケーションをまず先に解説し、その次に純粋関数型言語Elmで書いていくにはどのような考え方が必要かを丁寧に解説をしていきます。Elmの入門はもちろんJavaScriptの入門や関数型のエッセンスを学びたいあなたへピッタリの一冊です！

一般的にElmでルーティングを行うSPAを作る場合にはBrowser.applicationを使って、組み込みのルーティングの機構を使うことになる*1。しかし、一方でルーティングの仕組みを持たないBrower.elementやBrowser.documentでも、ルーティングをJavaScriptサイドで自前実装する方法がある。 elementを使いつつルーティングを自作したいユースケースとして、ReactやVue.jsと統合してElmを使いたいケースが挙げられる。applicationやdocumentを使うと特定のDOMのみにElmアプリケーションをマウントすることができないため、他のフレームワークと共存させることができない。 なお、elm/browserのリポジトリにも「Browser.elementでルーティングをするにはどうすればよいか」を説明した詳しいドキュメントがある。 gi

このTEAは、関数型FluxライブラリであるReduxの思想に影響を与えたことで知られています。 TEAは現代のフロントエンド・アプリケーションを開発するにあたってのベストプラクティスを踏襲しており、「Elmまかせ」でアプリケーションを作ることでが、スケールするアプリケーションを開発するための最短ルートととなるように作られているのです。 ECサイトの商品カート機能をElmで作ってみよう さて、ここからは手を動かしながら、Elmのエッセンスをお伝えしていきたいと思います。ElmによるTODOアプリやカウンタアプリのサンプルは、Elmの公式ページやさまざまなブログ、書籍などで比較的よく見られますが、もう少し大きな規模でのElmのアプリケーションのコードを見る機会は多くはありません。 最も実践的なアプリケーションのサンプルとしては、NoRedInk社のリチャード・フェルドマンによるmediumの

elm-roadmap.md Elmロードマップ (なんでロードマップが必要なのか書く) Elm Guideをさらっと一周 Elm Guideをさらっと一周しましょう。 Elm Syntaxを読む Elm Syntaxで文法を学びましょう。JSに慣れている人は、Syntax vs JSを見ても良いかも。 文法がなんとなく抑えられたら、Elm Coreを見てREPLやElm Reactorでいじってみましょう。特にBasic, Listパッケージなどを触っておくと良い。 HTMLをガチャガチャ組んでみる とにかくElmをやっていく上で、Htmlと仲良くする必要がある。ネストさせたり分岐させたり、関数に分けたり感覚を掴んで。直前に学んだCoreの簡単な関数を使ってみると良いかも。Listを使えるようになっておくと後々楽。 Exampleをいじってみる ExamplesはPlayGround上で

はじめに The Elm Architecture は、コードの再利用性・テストのしやすさに優れた設計パターンです。 しかし、Elm に慣れていない人にとっては、The Elm Architecture がどのような流れで実行されていくのか、想像しづらいかもしれません。 本記事では、 The Elm Architecture の処理の流れを、Elm Guide(日本語訳版) の例に沿って説明していきます。 先に以下の記事で、The Elm Architecture を触っておくとより理解が進むかもしれません フワッとわかった気になるElm入門 The Elm Architecture の処理の流れ 上記の図だけではわかりにくいので、Elm Guide ボタンの例に沿って具体的に説明していきます。 例: ボタン ボタンとカウンターに 0 と画面に表示されてから、ユーザーが [+] ボタンを押

どうも、今年の夏に初めてElmをさわったので、記念としてElmアドベントカレンダーに参加しています🎄 普段はサーバーサイドエンジニア兼 ワロタグマの育成を生業としているものです。 今回は、このワロタグマがどうも小さいお子さんにウケが良い（n=1）とのことで、幼稚園においては何かと必須アイテムであった「おなまえシール」のめーかーを作ってみることにしました。 ちなみにコードは こちら です。 成果物 最近、お肌を労るために、髪にも顔にも身体にも使えるナチュナルな石鹸 を使い始めました。 これを手を洗うために使われたら辛い（手はキレイキレイで十分やろ）ので、ラベリングするためにつくりました。 つまり、おなまえシールは大人でも意味のある形で使えます。 おなまえシールのつくりかた おなまえシールめーかーをひらく おなまえシールをいい感じにデザインする （よしなにスクショかなんかして）マスキングテー

過去に「NoRedInk*1の筋肉の人」としておなじみリチャード・フェルドマンをフィーチャーする記事を書いたので、今度は自分をフィーチャーしようと思う。 www.izumisy.work おすすめはやはり一番最後の「jQueryからElmまで」だが、正直このスライドはElmに関する説明成分が少なかったと反省しているところがある。なので、個人的にはこの記事で並べている順番に見てもらうほうが、Elmに対するわかりが生じやすいと思う。 Elm, the functional frontend Elmの基本的な部分をざっくり説明するスライド。このスライドは関数型プログラミングカンファレンス2019で使った。Elm意外にもRustやElixirなどの関数型プログラミングのエッセンスを持つ言語の人たちとコラボレーションするタイプのイベントだったので、関数型的な部分に言及するのは少なめでElmの良さをア

This is the backbone of a web application written in the Elm language (https://elm-lang.org/). This loop happens every time something happen. The “something” is converted to a message (Msg) and sent to the update function (the controller) together with the Model. The model contains the entire state of the application (the “single source of true”). The update function, based solely on the model and

実は同じネタを @miyamo_madoka さんが書いているのですが、同じ記事があっても書きたかった そして自分の意見も書きたかったので書きます。 ネストしたRecordを更新したい Elmではアプリケーションの状態(Model)はシングルステートで扱うため、以下のようにネストしたRecordを定義することはよくあります。他の言語でもEntityなどを定義する際には同じような状況になるかと思います。 type alias Model = { character : Character } type alias Character = { name : String, point : Point } type alias Point = { x : Int, y : Int }

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

先日業務で1からElmアプリケーションを作りきったのでそのときの学びをメモっておく。 1. Model / Msg / View のような分割をしない Rails などのフレームワークからきた人がやりがち。 Elm でファイル分割をするのはモジュール単位でのカプセル化をするときだけでよい。 なので基本的に1画面につき1モジュールとして、その中に Model / Msg / View / Update などを書いていく。 ここからさらにデータ構造として抽出できるものがあれば後述の Opaque Type として切り出す。 2. コンポーネント指向と混同しない Elm は React や Vue.js のようなコンポーネント指向フレームワークではない。 基本的に1画面につき1モジュールとして作る。 再利用したい画面のパーツは関数として作ればよい。 3. Opaque Type の活用 Elmに

ElmのStreamライブラリを試した Elm Advent Calender 19日目です。 Elmのアドカレは活発ですね！ 去年のelm Advent Calenderではlm-native-uiでiosアプリ作ってました -> 記事 stream github Elm package elmにはlazy listを扱う標準ライブラリがないから作ったぜ 他にも似たような機能を実現するライブラリはあるけどstack over flowに対して脆弱だ stack over flowしない lazy listライブラリだぜ ほかにもStreamライブラリはたくさんありますが、これのみ試します どんな時に使えるだろうか？ ドキュメントにもある通り無限に流れるデータに対してどうこうする時につかえそうだ elmがクライアントアプリケーションを作るのに使われるものだったら無限スクロールに表示されるよ

こうすることによって、生の文字列よりもプログラムで扱うことが簡単になります。 しかし、どうすればこの構造を得ることができるのでしょうか？少し考えてみましょう。 split と trim で頑張る 正規表現で頑張る ループで頑張る 全部つらそうですね。 Elm の構文解析器（パーサー） elm-tools/parser は、そんな構文解析を超シンプルな記述で実現してしまうライブラリです。Elm の作者である Evan 氏自身によって書かれています。 例として公式のサンプルを引用してみます。ここでは ( 3, 4 ) のような文字列を２次元の座標として解釈するパーサー point を定義しています。 import Parser exposing (Parser, (|.), (|=), succeed, symbol, float, ignore, zeroOrMore) type alias