Why I'm leaving Elm
Over the past year or so, I've reluctantly come to the conclusion I need to leave Elm and migrate to some other language (most likely Bucklescript via philip2), and I definitely cannot recommend it to anyone else. This post is about my reasons for that, which are mostly about the way in which the leadership behave. I'm not going to talk about the good points of Elm as a technology. You can read th
ElmでPhantom TypeとExtensible Recordを用いて型安全な状態遷移パターンを実装する - Runner in the High
このDiscourseスレッドがかなり面白かった。 OPは「幽霊型（Phantom Type）を使うと特定の順序でしか型安全に状態遷移できないように実装できると思うんだけど、どうしたらいいかな？」と質問している。 discourse.elm-lang.org 実装してみる 回答者からのアイデアによると、Phantom TypeとExtensible Recordを組み合わせて実装することで型安全な状態遷移が作れる。 たとえば、以下のようなゲーム上での状態遷移のパターンが仕様としてあるとしよう。 これを実際に今回のパターンで表現すると、このようになる。 type Transition a = Transition type Allowed = Allowed type Game = Loading (Transition { ready : Allowed }) -- ロード中 | Read
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
皆さんはプログラミング言語を学びはじめのときはどんなふうに勉強をしていますか？ いろんな勉強方法があるとは思いますが、競技プログラミングで問題を解くことで言語の書き味を確かめて行くのが効率の良い勉強方法の一つとして挙げられると思います。中でも有名な競技プログラミングのコンテストサイトがAtCoderになります。 それでは早速問題を解いてElmで言語提出・・・あれ？ 無い・・・😇 そうです。ElmはWEB開発に特化した言語のため競技プログラミングサービスではサポートされていないのでした・・・。 しかし、安心してください！ElmはAltJSな言語なので、コンパイルすることでJavaScript(Node.js)として提出が可能なのです！色々小細工する必要があるのですが、なんとすぐに競技プログラミングが始められる環境を用意しておきました。 こちらがElmによる競技プログラミング環境になります。
ElmとWebAssemblyで迷路生成Webアプリを作った話 はじめに 東京大学計数工学科は毎年物理工学科と一緒に五月祭で工学博覧会という企画を行っています。 今回、「アルゴリズム」を紹介するということで迷路生成アルゴリズムを展示しました。 そのためのwebアプリをElmとWebAssemblyで作って公開したので紹介します。 機能 お絵かきをして 格子グラフを作って（頂点をタップすると格子グラフが編集できます） Submitすると迷路が出来ます。 そしてこの迷路にはスタートからゴールに至るルートが一つだけあって、 この迷路の答えは元の絵となります！ いろんな迷路を作ってみてください！ 採用理由 Elm ElmはUI作成に特化した言語、アーキテクチャです。 今まで自分はWebフロントを書いたことが全くありませんでした。ブラウザで実行できる以外に良い点が無さそうなJavaScript（偏見
↓次の記事もよろしくやで！ 4歳娘「パパ、20歳以上のユーザーを抽出して？」 忘れ物を取りに久々に出社したワイ ワイ「おはようさん」 ハスケル子「おはようございます」 ワイ「なんや、ハスケル子ちゃんしかおらんのかいな」 ハスケル子「はい」 ハスケル子「みなさんリモートワークです」 ワイ「コロナウィルスのせいで基本出社禁止やもんなぁ」 ワイ「通勤せんでいいのは楽チンやけど」 ワイ「みんなに会ってバカ話ができなくて寂しいわぁ・・・」 ハスケル子「やめ太郎さん、あんまり近づかないでください」 ハスケル子「こっち向いて喋るのもやめてください」 ワイ「おお、失礼失礼」 ワイ「もしウィルス感染してたら、うつってまうもんな」 ハスケル子「いえ、単純に口が臭いんです」 ワイ「Oh...」 ワイ「ごめんやで...」 リモートだと、井戸端会議が聞けなくて困る ワイ「なんか、リモートって結構やりにくくない？」
Freeモナドのしくみ - Qiita
Freeは、Functorを受け取ってMonadをつくることができるモナドです。 Freeのデータ型の定義は以下です。 よくわからない再帰的な定義がされていますね。初見で読めたらすごいと思います。 この記事では、上の定義のようなFreeがどのようにMonadをつくるかを見ていきます。 次のような順で説明していきます。 PureScriptの予備知識と用語説明 ListについてFunctor / Monadを実装する Free fについて、同じようにFunctor / Monadを実装する Free fだけでなく、Freeそれ自体もモナドではあるんですが、1つ高いレイヤー(誤魔化した言い方)でのモナドなのでこの記事では触れません。 PureScriptの型システムでは表現できないですしね。 忙しい人のためのFree この記事で説明したいことをひとことで言うと、 Pureがpure、Freeが
BacklogチームのLeoです。一昨年、フロントエンド開発を楽しくする関数型プログラミング言語 Elm を使って Typetalk クライアントアプリを開発した記事を書いたのですが、Elmがパージョン0.19になって多少変わった分があって、TypetalkのAPIも少しだけ変わったので、記事も更新したいと思って、その結果はこちらの改良バージョンです。（ただし内容自体は多く変わらないのでご了承ください） さて、 Elm とは英語でニレ（楡）属の樹木の総称、ハルニレの通称です。そしてプログラミング言語でもあります。そんなプログラミング言語の Elm を使った開発、気になりませんか？ 目次 Elm言語 Elmは何が美味しい？ こんにちは世界樹 Hello WorldでElmの構文とElmアーキテクチャー入門 Elmは関数で出来ている ElmでHTMLを植える Elmアーキテクチャー降臨 世界樹
はじめに 近年徐々に複雑になるwebフロントエンドの状態管理の仕組みとして、ReactやVue.jsといったwebフロントエンドフレームワークのお供にReduxやVuexと言ったライブラリを組み合わせて使うことが多いと思います。 それら二つのライブラリは、Elmという高品質webフロントエンド構築のための関数型AltJSが用いているThe Elm Architectureと呼ばれるアーキテクチャに影響を受けて作られました。 追記: ReduxとElmの時系列はReduxの方が先であり、しかしながら状態のimmutableなどは影響を受けていることから、 現在の形のReduxはElmに影響を受けている所がある。 という表現が正しかったようです。 コメントありがとうございます。 参考 Vuexとは何か？｜Vuex reduxjs / redux Elmの型システムや見た目は非常にリーダブルであ
はじめに The Elm Architecture は、コードの再利用性・テストのしやすさに優れた設計パターンです。 しかし、Elm に慣れていない人にとっては、The Elm Architecture がどのような流れで実行されていくのか、想像しづらいかもしれません。 本記事では、 The Elm Architecture の処理の流れを、Elm Guide(日本語訳版) の例に沿って説明していきます。 先に以下の記事で、The Elm Architecture を触っておくとより理解が進むかもしれません フワッとわかった気になるElm入門 The Elm Architecture の処理の流れ 上記の図だけではわかりにくいので、Elm Guide ボタンの例に沿って具体的に説明していきます。 例: ボタン ボタンとカウンターに 0 と画面に表示されてから、ユーザーが [+] ボタンを押
Zipperとは - Qiita
Zipperというデータ構造について、図を使ってわかりやすく解説したいと思います。 この記事ではZipperがどういったものかは説明しますが、それがどう応用されうるかは紹介しません。 応用例については、少し長いですが以下の記事がわかりやすかったです。 Haskell/Zippers - Wikibooks また、ComonadとしてのZipperの応用例は、以下の記事がとてもわかりやすかったです。 コモナドを使った抽象化の威力をライフゲームで試してみた - Qiita ただ、Haskellは遅延評価で、PureScriptは正格評価なので、この記事とは実装がところどころ異なります。 サンプルコードはPureScriptですが読めなくても図さえ見れば理解に大きな支障はないと思います。 これは余談ですが、シンタックスハイライトの関係で```haskell ... ```でコードブロック書いてる
At the beginning of this decade (2010), a few of us Haskellers were exploring how best to do client-side web programming. We didn’t want to write JavaScript. There’s a surprising number of techniques we tried to avoid doing so. There was work coming from academia and industry. Here’s a history of my own experience in this problem space. In 2008, Joel Bjornson and Niklas Broberg published HJScript,
とある休日の朝 娘（4歳）「パパ、最近はお仕事でどんなWebサイトを作ってるの？」 ワイ「ん？詳しくは言えへんけど、技術記事投稿サイトや」 娘「Qiitaのパクリみたいなやつ？」 ワイ「ハッキリ言うなや」 娘ちゃんはなぞなぞがしたい 娘「それよりパパ、なぞなぞしよ」 ワイ「ええで」 娘「じゃあ行くよー」 娘「実行時エラーの出ないフロントエンド言語ってなーんだ？」 ワイ「いやどんななぞなぞやねん」 ワイ「っていうか、どんな言語でも実行時エラーは出るやろ」 ワイ「例えばさっきの技術投稿サイトで」 ワイ「最新記事を1件表示しようとした場合...」
これまで未婚の父として娘のヤギさくらちゃんを育ててきましたが、2日後に命を奪う決断をしました。 (12/3(火) 14:22 さくらちゃんは旅立ちました) ある日、突然目が見えなくなり、次の日には立つことができなくなっていました。 自由にならない体にもどかしさを感じ、目が見えない恐怖にのたうち回りながら 体をぶつけ、顔をぶつけ、歯も折れてぼろぼろになってしまいました。 信頼できる獣医さんの愛にあふれた治療の結果、危篤状態は免れたものの 根本的な回復にはいたらず、2週間の介護を経て安楽死の判断をしました。 1月生まれで間もなく3歳でしたが、その日を迎えることはありません。 人間で言えば18歳くらいでしょうか。 人間の都合で親や兄弟と引き離し、最後は自分の意志とは関係ない第三者によって命を奪われる。 死後は一面のきれいなお花畑で、仲間たちとお花を片っ端からむしゃむしゃ根こそぎ貪り食って過ごして
Elm記事執筆と、社内Elmチームにワクワクさせられている話 - Unipos engineer blog
Fringe81エンジニアの関です。 Elm記事執筆 6/24(月)に発売されたWEB+DB PRESS vol.111にて、同僚の海老原くんとElm記事の共同執筆を行いました。 今回は読者の方に素早くElmアプリケーション構築を体験してもらうことを目指しまして、８ページと短い記事の利点を活かすことができればという思いがあります。 網羅性という意味では盛り込みきれなかった内容も多々ありますが、Elmはとても優れた言語設計がなされているので、一度さわれば虜になってどんどん独学が進んでいくのではないかと思っています😊 世の中のプログラマーがステキ言語Elmに出会うキッカケになればとても嬉しいです。 そして、執筆のはなしをツラツラ書こうかなとも思ったんですが、この機会に書き残したいなと思ったことが他にもありまして。 Elm記事執筆以外にも、僕の周りでいろんなElmワクワクが生まれているんです。
elmコミュニティの方々からSPAのベストプラクティスの提案・ご指摘を受けたので、時間が空いたタイミングで大きく更新をしようと思います。改めて思い直すことで結論などが変わると思われますので少々お待ち下さい (6/10現在) こちらは、elmによるSPA手法を解説していく記事になります。が、以下の記事をまだ読んでいない方は必ず目を通してください。 あなたはelmでSPAをわかってしまいたいのか？ ※ 本記事はelmのコードの読み書きにほぼ不自由が無い中級者向けの内容になります。それぐらい、ちゃんとしたSPAの難易度は高いです(私自身もわからないことが多いです。間違いがあれば指摘よろしくお願いします)。ただし、elmに限らず どんなフレームワーク・言語を利用していても役立つ情報かと思われます。 仕様 SPAを説明するにあたって、簡易的な宿泊施設の予約サイト(デモ)を作っていこうと思います。リポ
平日ワイ ワイ「優秀な若者たちが高速で仕事を終わらせてもうたから、ワイのやる事なくなってもうたで」 ワイ「弊社の10%ルール1を使って新しい言語のお勉強でもしてみよか」 ワイ「こないだ何かのランキングでナンバーワンやったあの言語、なんやったっけな」 ワイ「・・・せや、Elmや」 ワイ「純粋関数型言語いうやつやな」 ワイ「ちょっとそのElmちゃんでも勉強してみよか」 とりあえずググる ワイ「Elm、日本語・・・検索っと」 ワイ「おお、なんかとっても親切そうなサイトが見つかったで」 ワイ「・・・なるほどな〜」 ワイ「ElmいうんはJavaScriptにコンパイルできる言語なんやな」 ワイ「フロントエンドなワイにピッタリやないか」 ワイ「しかも、環境構築とかせんでも」 ワイ「Ellieいうサイト上で動かしてみることも出来るみたいや」 とりあえずHello World ワイ「まずElmではどうやっ
Elmアプリケーションで比較的モジュール多めなアプリケーションの機能開発をするときに同僚とトライしている手法について。 言語的なElmのテクニックみたいな話ではなく、どちらかといえばもっと抽象的なハナシ。 1. 画面からざっくりとモジュールを見つけ出す 基本的に新しく機能を設計するときには画面設計みたいなものがデザインレベルで上がってきているはずなので、それを元に画面を構成するモジュールを分解する。この時点では画面ベースでやる。 自分がエンジニアHubで寄稿したElm記事でも、まずは画面をベースにして主要なモジュールを見つけ出している。 2. モジュールを分類する 見つけ出したElmのモジュールを"TEAなモジュール"と"そうでないモジュール"で分類する。依存関係も見つける。 "TEAなモジュール"とはMsg型とupdate関数を持つTEA的なライフサイクルに乗るモジュール。"そうでないモ
Runner in the High
前提としてクリエイティブな仕事は再現性が低い。しかし逆に言えば再現性があってはいけないものがクリエイティブであり、再現性がないからこそクリエイティブであると言える。アートのように非再現的なものはクリエイティブであり、再現性が低く刹那的な成果物であることに意味がある。 ソフトウェア開発にもまたアート的なクリエイティビティが求められつつも、ビジネスとしての利益追求では再現性が同時に求められることが多い。従って、多くの現場ではソフトウェア開発を再現性の高い労働集約的な仕事に転換しようとする。むしろ、そうしなければ開発組織の規模をスケールさせることができない。 ここで言うクリエイティビティの有無とは本質的に技術力とイコールであり、その具体性の表出はフレームワークやプログラミング言語を使うことではなく、逆にそれらを生み出す側にある。このレベルの技術力を持つ人材を集め続けるのは無理があるが、一方で技術
集合としての型 これまでBoolやInt、Stringのような型を見てきました。 そしてカスタム型を以下のように定義しました。 type Color = Red | Yellow | Green Elmにおけるプログラミングの中で最も重要なテクニックのひとつは、コード中で可能な値を現実世界での正当な値に完全に一致させることです。これにより不正なデータの入り込む余地がなくなるため、私はカスタム型とデータ構造に注力するようにみんなに勧めています。 この目的を追求するにあたっては、私は型と集合の関係を理解することが役に立つということに気づきました。少し難しく聞こえるかもしれませんが、これは本当にマインドセットを開発するのに役立ちます！ 集合 型は値の集合だとみなすことが出来ます Bool は { True, False } のなす集合 Color は { Red, Yellow, Green }
未知のプログラミング言語を導入してでも、成したかったエンジニア組織づくりへの挑戦｜Fringe81 『Be an Explorer～探検家たれ～』
こんにちは。Fringe81 note チームの横山です。 今回は、Fringeのエンジニア組織づくりのお話です。 Fringeの技術開発本部長である関が挑んだ「壁のないエンジニア組織づくり」について、関に振り返ってもらいました。ぜひ、ご覧ください！ （関の紹介は以下の記事をご覧ください） ＋＋＋ プログラミング言語が境界性となり「技術の壁」が生まれるこんにちは。Fringe81の関です。 僕は最近、技術開発本部長として、組織の目標管理や制度整備などを仕事としていますが、これまでの数年はフロントエンドのスペシャリストという役割を担ってきました。 スペシャリストというと「技術の細かいことがわかる専門家」という風に見られることが多くて、それは間違っていないのですが、僕が意識していたのは「組織をよくする」ことでした。つまり、技術開発本部長であったり、スペシャリストであったりと役割は変わっても、大
data-interchange.md A vision for data interchange in Elm How do you send information between clients and servers? What format should that information be in? What happens when the server changes the format, but the client has not been updated yet? What happens when the server changes the format, but the database cannot be updated? These are difficult questions. It is not just about picking a format
Elmstatic allows you to write the HTML layouts and the styles for the pages of your site in Elm. It’s fairly unopinionated: you can generate whatever HTML you want, however you want — all you need to do is define a suitable main function in each layout. A summary of current features: Pages are generated from Elm code (you can use elm-ui, html or any other package that generates Html msg values) CS
一般的にElmでルーティングを行うSPAを作る場合にはBrowser.applicationを使って、組み込みのルーティングの機構を使うことになる*1。しかし、一方でルーティングの仕組みを持たないBrower.elementやBrowser.documentでも、ルーティングをJavaScriptサイドで自前実装する方法がある。 elementを使いつつルーティングを自作したいユースケースとして、ReactやVue.jsと統合してElmを使いたいケースが挙げられる。applicationやdocumentを使うと特定のDOMのみにElmアプリケーションをマウントすることができないため、他のフレームワークと共存させることができない。 なお、elm/browserのリポジトリにも「Browser.elementでルーティングをするにはどうすればよいか」を説明した詳しいドキュメントがある。 gi
PureScript 入門 のそのまえ - エフアンダーバー
QiitaでPureScriptを始めるのに苦戦している記事を読んで、 自分もこの前すごく苦労したことを思い出したので、 まだ感覚が残っているうちにいろいろ書いておくことにしました。 PureScriptの紹介が目的ではないので、 「PureScriptとは何か」とか「どんなコードを書くか」みたいな話は特にしません。 PureScriptを学ぶ上で知っておくと役に立つかもしれない知識について雑多に書くだけです。 PureScriptを始めるその前に PureScriptは比較的新しい言語で、かつ今のところ非常にマイナーな言語です。 そのため、現在資料がとても乏しく、いくらかき集めても、 関数型言語を何も知らない人間が理解するのは困難な状況です。 そこで、まず最初にやるべきはPureScriptの類似言語を学ぶことだと思います。 遠回りに感じるかもしれませんが、おそらくこちらの方が近道です。
実例によるPureScript
目次に戻る 第1章 はじめに1.1 関数型JavaScript関数型プログラミングの手法は、かねてよりJavaScriptでも用いられてきました。 UnderscoreJSなどのライブラリは、 mapや filter、 reduceといったよく知られた関数を活用して、小さいプログラムを組み合わせて大きなプログラムを作れるようにします。 var sumOfPrimes = _.chain(_.range(1000)) .filter(isPrime) .reduce(function(x, y) { return x + y; }) .value(); NodeJSにおける非同期プログラミングでは、第一級の値としての関数をコールバックを定義するために多用しています。 require('fs').readFile(sourceFile, function (error, data) { if
elm-firestoreでJSを1行も書かずにElmアプリケーションでFirestoreを使う - Runner in the High
この記事はElm Advent Calendar 2020の8日目の記事です 今年の春頃からコツコツと個人開発のアプリケーションで使うためのElm用Firestoreライブラリのパッケージを作っていたので、その紹介をします。 github.com できることはREADMEに書いてあるとおりで、基本的なCRUDオペレーションが一通りサポートされているのと、たぶんトランザクションもかけられます。 また、このelm-firestoreは独自のエンコーダ／デコーダをパッケージのモジュールとして提供しており、Firestoreとの通信で使用される特別なJSONのデータ構造をパッケージの利用者が意識しなくてもよい作りになっています。 READMEにおいて "A type-safe Firestore integration for Elm." と謳っているのは、JSを書かずにFirestoreとの連携
If you have been programming for a while, you must have heard about recursion at one point or another. If you work with Elm or other functional programming languages, chances are high you use it regularly (even though you may prefer alternatives). A recursive function is a function that calls itself anywhere in its implementation. Here’s a textbook example of recursion, implementing the factorial
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Elm Architecture (TEA) animation
Elmで競技プログラミング(AtCoder)を解いてみよう！(簡単に始められる環境アリ!)
ElmとWebAssemblyで迷路生成Webアプリを作った話 - Qiita
コロナウィルス対策でリモートワークしてみたらReduxやVuexのメリットが分かった - Qiita
How to Write PureScript React Components to Replace JavaScript
Elm 言語 がバージョン0.19でも楽しすぎて Typetalk のクライアントアプリを作りました。 | 株式会社ヌーラボ(Nulab inc.)
Elmの型で読むReduxやVuexのアーキテクチャ - Qiita
図解 The Elm Architecture の流れ - Qiita
Amazon.co.jp: プログラミングElm ~安全でメンテナンスしやすいフロントエンドアプリケーション開発入門: Jeremy Fairbank (著), ヤギのさくらちゃん (翻訳): 本
Client-side web programming in Haskell: A retrospective
4歳娘「パパ、実行時エラーの出ないフロントエンド言語ってなーんだ？」 - Qiita
ヤギと振り返る恥ずかしいコード -- 次のレベルに上がるために - Qiita
elmでSPAをわかってしまおう - Qiita
わざわざ学ばなくてもいい言語ランキング1位の「Elm」をわざわざ学んでみる - Qiita
Elmアプリケーションにおけるモジュールレベルでの詳細設計 - Runner in the High
集合としての型 · An Introduction to Elm
Why do I have to write JSON decoders in Elm?
Elmstatic: an Elm-to-HTML static site generator | Korban.net
ElmでBrowser.elementを使いつつルーティングを自前で作る - Runner in the High
Tail recursion, but modulo cons