https://opt.connpass.com/event/222709/
Walk around functional web frontend programming
https://opt.connpass.com/event/222709/
「ADT, 直和・直積, State Machine」 - Qiita
(タイトル字余り) この記事は筆者が社内勉強会で発表した内容を(個人的に出来が良いと思ったので)外部向けに再構成したものです。(大変長くなってしまった) 状況その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
なぜ MVVM + FRP は Elm Architecture に勝てないのか - dely Tech Blog
こんにちは、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 に勝てないのか」から「
TodoMVCで手続き型脳から関数型脳へシフトしてみよう!
Vanilla JS（ES6）で書かれたTodoMVCアプリケーションをまず先に解説し、その次に純粋関数型言語Elmで書いていくにはどのような考え方が必要かを丁寧に解説をしていきます。Elmの入門はもちろんJavaScriptの入門や関数型のエッセンスを学びたいあなたへピッタリの一冊です！
ElmでBrowser.elementを使いつつルーティングを自前で作る - Runner in the High
一般的にElmでルーティングを行うSPAを作る場合にはBrowser.applicationを使って、組み込みのルーティングの機構を使うことになる*1。しかし、一方でルーティングの仕組みを持たないBrower.elementやBrowser.documentでも、ルーティングをJavaScriptサイドで自前実装する方法がある。 elementを使いつつルーティングを自作したいユースケースとして、ReactやVue.jsと統合してElmを使いたいケースが挙げられる。applicationやdocumentを使うと特定のDOMのみにElmアプリケーションをマウントすることができないため、他のフレームワークと共存させることができない。 なお、elm/browserのリポジトリにも「Browser.elementでルーティングをするにはどうすればよいか」を説明した詳しいドキュメントがある。 gi
Elm入門と実践 - 買い物カートを作ってアーキテクチャ「TEA」を学ぶ - エンジニアHub｜Webエンジニアのキャリアを考える！
このTEAは、関数型FluxライブラリであるReduxの思想に影響を与えたことで知られています。 TEAは現代のフロントエンド・アプリケーションを開発するにあたってのベストプラクティスを踏襲しており、「Elmまかせ」でアプリケーションを作ることでが、スケールするアプリケーションを開発するための最短ルートととなるように作られているのです。 ECサイトの商品カート機能をElmで作ってみよう さて、ここからは手を動かしながら、Elmのエッセンスをお伝えしていきたいと思います。ElmによるTODOアプリやカウンタアプリのサンプルは、Elmの公式ページやさまざまなブログ、書籍などで比較的よく見られますが、もう少し大きな規模でのElmのアプリケーションのコードを見る機会は多くはありません。 最も実践的なアプリケーションのサンプルとしては、NoRedInk社のリチャード・フェルドマンによるmediumの
elm-roadmap.md
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 の流れ - Qiita
はじめに The Elm Architecture は、コードの再利用性・テストのしやすさに優れた設計パターンです。 しかし、Elm に慣れていない人にとっては、The Elm Architecture がどのような流れで実行されていくのか、想像しづらいかもしれません。 本記事では、 The Elm Architecture の処理の流れを、Elm Guide(日本語訳版) の例に沿って説明していきます。 先に以下の記事で、The Elm Architecture を触っておくとより理解が進むかもしれません フワッとわかった気になるElm入門 The Elm Architecture の処理の流れ 上記の図だけではわかりにくいので、Elm Guide ボタンの例に沿って具体的に説明していきます。 例: ボタン ボタンとカウンターに 0 と画面に表示されてから、ユーザーが [+] ボタンを押
とてもたのしいelm-uiで「おなまえシールめーかー」をつくった🎄 - Qiita
どうも、今年の夏に初めてElmをさわったので、記念としてElmアドベントカレンダーに参加しています🎄 普段はサーバーサイドエンジニア兼 ワロタグマの育成を生業としているものです。 今回は、このワロタグマがどうも小さいお子さんにウケが良い（n=1）とのことで、幼稚園においては何かと必須アイテムであった「おなまえシール」のめーかーを作ってみることにしました。 ちなみにコードは こちら です。 成果物 最近、お肌を労るために、髪にも顔にも身体にも使えるナチュナルな石鹸 を使い始めました。 これを手を洗うために使われたら辛い（手はキレイキレイで十分やろ）ので、ラベリングするためにつくりました。 つまり、おなまえシールは大人でも意味のある形で使えます。 おなまえシールのつくりかた おなまえシールめーかーをひらく おなまえシールをいい感じにデザインする （よしなにスクショかなんかして）マスキングテー
Elmに興味があるなら見ておきたいIzumiSyのスライド3選 - Runner in the High
過去に「NoRedInk*1の筋肉の人」としておなじみリチャード・フェルドマンをフィーチャーする記事を書いたので、今度は自分をフィーチャーしようと思う。 www.izumisy.work おすすめはやはり一番最後の「jQueryからElmまで」だが、正直このスライドはElmに関する説明成分が少なかったと反省しているところがある。なので、個人的にはこの記事で並べている順番に見てもらうほうが、Elmに対するわかりが生じやすいと思う。 Elm, the functional frontend Elmの基本的な部分をざっくり説明するスライド。このスライドは関数型プログラミングカンファレンス2019で使った。Elm意外にもRustやElixirなどの関数型プログラミングのエッセンスを持つ言語の人たちとコラボレーションするタイプのイベントだったので、関数型的な部分に言及するのは少なめでElmの良さをア
The Elm Architecture (TEA) animation
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
ElmでネストしたRecordを更新する - Qiita
実は同じネタを @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 }
CollageとAnimationを使ってElmでアプリを作る
この記事はQiita Elm Adventcalendar 2017に投稿した記事です。 最初に Functional Reactive Programmingを調べていて偶然Elmに出会いました。最新版のElm0.18ではElmはFRPの概念を完全に取り払いFRPとは関係なくなりましたが、 実際にElmを触ってみるとどんどんその面白さに引き込まれて行きました。もっとElmで何か作りたくなったので自分の子供が遊べるようなToy Appを作ることにしました。 このアプリを作る際にはまった点や大事な点をできるだけ丁寧に解説してみたいと思います。 この記事の対象者 この記事ではElmについての基本知識があることを前提としています。Elmにはすでに素晴らしいチュートリアルがあるのでまだElmに触ったことがなければ https://guide.elm-lang.org/ と https://www.
2019年現時点でのElmベストプラクティス6選 - Runner in the High
先日業務で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ライブラリで画面を作るなら - Qiita
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がクライアントアプリケーションを作るのに使われるものだったら無限スクロールに表示されるよ
Elm で構文解析しよう - Qiita
こうすることによって、生の文字列よりもプログラムで扱うことが簡単になります。 しかし、どうすればこの構造を得ることができるのでしょうか？少し考えてみましょう。 split と trim で頑張る 正規表現で頑張る ループで頑張る 全部つらそうですね。 Elm の構文解析器（パーサー） elm-tools/parser は、そんな構文解析を超シンプルな記述で実現してしまうライブラリです。Elm の作者である Evan 氏自身によって書かれています。 例として公式のサンプルを引用してみます。ここでは ( 3, 4 ) のような文字列を２次元の座標として解釈するパーサー point を定義しています。 import Parser exposing (Parser, (|.), (|=), succeed, symbol, float, ignore, zeroOrMore) type alias
詳解 elm/url !!
本記事は Elm Advent Calendar 2018 の11日目の記事です． elm-jp の Discord で突如無茶振りされたので頑張ります． elm/url elm/url は Elm 0.19 で刷新されたパッケージ群にしれっと混ざってきた URL に関するパッケージ． Browser.application でも使われているのでみなさんも頑張って使えるようになりましょう． ちなみに本記事では ver1.0.0 の elm/url を想定している． Url の型 こんな風に定義されている: type alias Url = { protocol : Protocol , host : String , port_ : Maybe Int , path : String , query : Maybe String , fragment : Maybe String } ty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Elmで作るsortable list
GitHub - care0717/dir-tree: Easily write plane text directory structure for mock project
https://package.elm-lang.org/packages/elm-lang/core/latest/Json-Decode