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をプロダクトで一年書き続けた感想 - Runner in the High
この記事はElm Advent Calendar 2019最終日の記事です。 去年末あたりから現職のチームでElmを書き始めたので、大体1年程度はプロダクションでElmのコードを書き続けたことになる。学生時代はRubyとJavaScriptばっかりだったので、関数型プログラミングとかそういうバックグラウンドは一切なかった。その観点から、改めて率直な感想を申し上げておく。 なお、弊社フロントエンドチームとElmに関するはなしは、私の書いたFringe81アドベントカレンダーの記事を参照のこと。 fringeneer.hatenablog.com Elmには中毒性がある Elmを触ったことのない方からすると「？」になるかもしれない（というか、昔の自分がそうだった）が、率直に言ってElmには中毒性がある。一度Elmを知ると、Elm以外の言語を触るたびに「これ、Elmだったら〇〇なのにな〜」と思う
なぜReactでもVueでもなくElmを使っているのか - Qiita
Functional-Static-Strong-Managed −0.25 (0.04) ∗∗∗ Functional-Dynamic-Strong-Managed −0.17 (0.04) ∗∗∗ Proc-Static-Strong-Managed − 0.06 (0.03) ∗ Script-Dynamic-Strong-Managed 0.001 (0.03) Script-Dynamic-Weak-Managed 0.04 (0.02) ∗ Proc-Static-Weak-Unmanaged 0.14 (0.02) ∗∗∗ 各カテゴリに属する言語は以下のとおりです。 Functional-Static-Strong-Managed： Haskell、Scala Functional-Dynamic-Strong-Managed： Clojure、Erlang Proc-Sta
Elmの歩き方（入門者向けブックマーク集） - Qiita
今年からElmを始めた私が、自分用にブックマーク集を作りました。 Elmのコミュニティは日々拡大しているので、誰かの役に立つかもしれないと思い公開します。 Elmを習得するにあたって自分が実際に参考にした記事を集めました。 少し上級者向けだなと感じた記事や、作ってみた系の記事は除外しています。 気になったら普段通りに検索するなどしてください。 Elm - A delightful language for reliable webapps どんな言語？ はじめに · An Introduction to Elm → Elm の公式ガイドを、日本コミュニティの皆さんが日本語訳してくださいました。 Elmの開発者：Evan Czaplickiによるオリジナル版（英語） わざわざ学ばなくてもいいプログラミング言語一位Elm - @ababup1192 | Qiita 親切過ぎるエラーメッセージを
複数ページのSPAをElmで書くときのボイラープレート部分をalchelmyで自動的に†錬成†する - Qiita
Elmのようなフレームワークに接すると、そのうちウェブサイト全体をElmで書き直したいという衝動に駆られる人も多いと思います。でも、The Elm Architectureで複数ページからなるシングルページアプリケーション1を作ろうとすると、ルーティングでもupdateでもviewでも、とにかく大量の分岐を書かされるの地味につらいですよね。ひとつページを追加するだけでも、複数のファイルに散らばったコードのあちこちをちょっとづつ修正しなくてはならなくて、とにかく面倒です2。 ElmでSPAを実現する仕組みについては、今回のアドベントカレンダーでkawausoさんがちょうど記事にしてくれているので、そちらもご覧になるといいと思います。The Elm ArchitectureでSPAを実現するためには、この「ページを切り替える仕組み」のパターンを覚えなくてはならず、これを理解するまでは少々大変で
ヤギと振り返る恥ずかしいコード -- 次のレベルに上がるために - Qiita
これまで未婚の父として娘のヤギさくらちゃんを育ててきましたが、2日後に命を奪う決断をしました。 (12/3(火) 14:22 さくらちゃんは旅立ちました) ある日、突然目が見えなくなり、次の日には立つことができなくなっていました。 自由にならない体にもどかしさを感じ、目が見えない恐怖にのたうち回りながら 体をぶつけ、顔をぶつけ、歯も折れてぼろぼろになってしまいました。 信頼できる獣医さんの愛にあふれた治療の結果、危篤状態は免れたものの 根本的な回復にはいたらず、2週間の介護を経て安楽死の判断をしました。 1月生まれで間もなく3歳でしたが、その日を迎えることはありません。 人間で言えば18歳くらいでしょうか。 人間の都合で親や兄弟と引き離し、最後は自分の意志とは関係ない第三者によって命を奪われる。 死後は一面のきれいなお花畑で、仲間たちとお花を片っ端からむしゃむしゃ根こそぎ貪り食って過ごして
Elm2のカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
2019年 Elmをはじめる人が最初に読むページ - Qiita
高品質なウェブフロントエンドを作るための言語 Elm の有用性が徐々に広まり、今年も採用事例が増えました。 利用者数が増えることは良いことではありますが、一方で悪気なく誤解を招く情報が生まれてしまう機会も増えてきます。 そこで、本記事はこれからElmをはじめる人やはじめて間もない人1が遠回りしないで Elm をモノにできるように、Elm を学ぶ上で落とし穴となる注意事項とその回避方法をまとめます。 なお、本記事で対象にするのは「実際に Elm を使って実用的なアプリケーションを作りたい」と考えている方です。 Elm をマウンティングのために使いたいマウンティングゴリラの方や、「プログラミング言語全部完全マスターした」と言うためにハローワールドやTODOアプリだけ書いて満足したい方は、別にそういう生き方も否定はしませんが本記事の対象外です。 そういう手っ取り早く形あるものを作ること自体に最大
elm-form-decoderでフォームプログラミングにこんにちはする。 - Qiita
Elmでフォームを組むときの素晴らしいライブラリとして、@arowMさんのelm-form-decoderがあります(このライブラリの考えは次の記事をご参照ください。フォームバリデーションからフォームデコーディングの時代へ)。このライブラリはとても単純な例でも大きな効果を発揮するため、紹介していきたいと思います。例では数字を２つ入力し、足し算をするという簡単なアプリです。 デモ & コード elm-form-decoderを使わずに考えてみる まずは、form-decoderを使わずにやってみましょう。Model、update、viewの入力部分は使う場合でも共通です。 Formのinputは常に文字列を返します。そのためModelの定義もStringとして左と右の入力を定義します。 type alias Model = { left : String , right : String }
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 }
"Elm Meetup in Summer" を開催して登壇した - Runner in the High
elm-jp.connpass.com 前回Elmのミートアップが最後に行われたのは１年以上前で、運営や会場の関係で長らくこのようなElmを愛する者達の交流会は開かれていなかったが、急遽弊社オヒスの大広間（？）を貸してElmエンジニアたちを集めてワイワイしようという運びとなった。CTOが食事を出す件も快諾してくれ、とても豪華なイベントになったのではないかなと思う。 このイベントに自分は開催前から当日まで大きく関わらせてもらったものの、人がたくさんあつまるイベントをオーガナイズするというのは人生で初めてと言ってもいい経験だった。参加者の方や、登壇者、運営のお手伝いをしてくれた方々には本当に感謝しかない。次回もこのようなミートアップを開催する折には、Elmコミュニティを盛り上げるようなすばらしいイベントにしたいという意気込みがある。 また、当日の盛り上がりはABさんの作ってくれたこのToget
Kibela キベラ｜自律的な組織になるナレッジ共有ツール
インポート～情報蓄積 ・他のツールから簡単にインポート ・みんなでリアルタイム共同編集 ・文中にインラインコメント（リリース予定） ・編集履歴の確認とロールバック ・下書きレビューでワークフロー ・Markdown、リッチテキストエディタ、PlantUML ・Excel、CSV、スプレッドシートをコピー＆ペーストで表作成 ・画像、動画をコピー＆ペーストで貼り付け ・よく使う情報をテンプレート化 構造化～活用 ・グループでアクセスコントロール、フォルダで構造化 ・複数条件に対応した高度な検索 ・プレゼンテーション機能 ・記事を外部共有 ・いいね！でレスポンス、コメントで議論 ・迅速なチャットサポート ・API、Webhook、Zapierなど外部ツール連携 高度なセキュリティ ・SAML 2.0認証 SSO（Google Workspace、OneLogin、Azure Active Dir
Elm のパイプ |> の良さ - ジンジャー研究室
小ネタ。 JavaScript の [1,2,3].map(a => a + 1) が、 Elm だと [1,2,3] |> List.map (\a -> a + 1) で、両方とも左から右に読めるからそんなに変わらないなーと思ってたんだけど、一つ違う点に気づいた。JavaScript で Promise を気持ちよく連鎖してて書いてて、いざ並列実行しようとなった時に const promises = [1,2,3].map(a => a + 1).map(toPromise) Promise.all(promises) のように少し回りくどくなり、なぜ promises.all() と書けないのかと考えたら「配列にメソッドを追加するのが微妙だから」と気づいた（prototype 拡張で不可能ではない）。一般的に言うと既存の型に何か関数を追加できない。 Elm のパイプを使う場合、その制
Elmを書くなら見ておきたいRichard Feldmanのトーク4選 - Runner in the High
弊社では「筋肉の人」*1として知られるRichard FeldmanはElmの創造神ことEvan擁するNoRedInkに所属するエンジニア。 Evanが比較的キーノート的なElmの未来やらビジョンを語るトークをする一方で、RichardはどちらかといえばElmをプロダクションで使うにあたって、どのように書くことでスケーラブルにできるか、のようなはなしをメインに据えている感じがある。 彼はアメリカで開催されているelm-confや、ヨーロッパのelm Europeなどで割と長尺のトークを務めることが多く、その内容もElm中上級者になるにはうってつけの内容ばかり。どのトークもElmの基礎的な文法や紹介は完全に端折られていて、Elmを使うこと前提でどのようにうまく使うかにフォーカスしている。 彼の動画は会社のElmメンの会（？）の中で一気に集中して見たことがあり、僕含めみんなにとって非常に学びが
ビンゴカード作成問題をお題に Elm で TDD の練習1.5：マスの値を生成する(改) - Qiita
おれの使命はこの世からList Listのビンゴカードを廃滅することだ — 猫背ステッチ（みやも） (@miyamo_madoka) 2019年6月30日 やられる前にやらないと… (殺伐) 。 みやもさん (@miyamo_madoka) の案を基に ビンゴカード作成問題をお題に Elm で TDD の練習1：マスの値を生成する の設計と実装をもりっと変更します。 マスの値生成に関する仕様 (再掲) B、I、N、G、O の 5列が存在する。 各列には 5個のマスが存在する。 各列の各マスに次の範囲の値がランダムに設定される。 B列：1-15 I列：16-30 N列：31-45 G列：46-60 O列：61-75 同じ値のマスは複数存在しない。 中央のマス (N列の 3段目) 常に FREEマス、それ以外は数字マス 。 ビンゴカードの型 ビンゴカードは 5個のマスからなる列が 5個あるので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jinjor/elm-teapp
Elm Meetup in Summer - 資料一覧 - connpass
Elmでの開発用テンプレート elm-starfighter を作った - Qiita
Elmを書くなら見ておきたいRichard Feldmanのトーク4選 - Runner in the High
https://package.elm-lang.org/packages/yumlonne/elm-japanese-calendar/1.0.0/