12月はなんとなく新しいことをやりたくなる。ということで、elm をやってみた。 大昔に触った気がするけど、文法が Haskell っぽいこと以外、何も覚えてなかった。というか当時触った signal とかがなくなってたので別物になってた。 作ったもの 勉強がてら作った、球拾いゲームみたいな何か コードはここ https://github.com/mizchi-sandbox/elm-playground elm-platform, svg の扱い, キー入力、乱数の副作用の分離などが学べた。乱数は面倒くさくなったので外部(JS)からSeed与える方式にして、気持ち純粋になった。 (自分の)環境構築 Parcel を使った brew install elm # OSに応じて mkdir elm-playground cd elm-playground yarn init -y yarn a

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今勢いのある言語 Elmを始めて4ヶ月も経ったのですが、こんな変化がありました。 質の高いプログラムを書けるようになった 開発のストレスがなくなった 社会人としても成長できちゃった 今回はその話と、自分で作ったアプリの紹介をしてみます。 Elm自体の解説や入門する方法は書かないことにします。Elmを始めるには上記事にある**公式ガイドを読むのが一番**だと考えているからです。(日本語版も) なぜこれを書くか 私は未経験からSIerに就職してJavaとかJavaScriptとかを2年くらいやったのち、Web系に転職してElmを使

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 高品質なウェブフロントエンドを作るための言語 Elm の有用性が徐々に広まり、今年も採用事例が増えました。 利用者数が増えることは良いことではありますが、一方で悪気なく誤解を招く情報が生まれてしまう機会も増えてきます。 そこで、本記事はこれからElmをはじめる人やはじめて間もない人1が遠回りしないで Elm をモノにできるように、Elm を学ぶ上で落とし穴となる注意事項とその回避方法をまとめます。 なお、本記事で対象にするのは「実際に Elm を使って実用的なアプリケーションを作りたい」と考えている方です。 Elm をマウンティングのた

こんにちは。鳥居 @jinjor です。 Actcast のフロントエンド開発（デザイン以外全て）を担当しています。 この記事ではフロントエンド開発でどんなことをしているのかをざっと紹介します。 Elm を書いていますActcast はフロントエンドの実装に Elm 言語を採用しています。 Elm はフロントエンド用のシンプルでイケてる関数型言語です。 何がイケイケで素晴らしいのかを紹介していきましょう。 テンプレートやマクロなしで型付き Virtual DOM が使えるElm では HTML をこんな風に書きます。 content : Html msg content = div [ id "content" ] [ ul [ class "links" ] [ link "https://elm-lang.org" "Homepage" , link "https://package.

Elm0.19になって、Elm0.18時代の elm-tools/parser も elm/parserとして新しく生まれ変わりました。 基本文法は Elm0.18時代 とほぼ同じなので、去年@jinjorさんが書いた Elm0.18の elm-tools/parser に関する記事の「基本文法」までを読めば理解できますが、Elm0.19から新たに加わった変更がいくつかあります。 そんな変更の1つ "backtrackable" は、elm/parser からリンクが貼られているドキュメントに説明がありますが、あまり親切とは言えません。 そこでこの記事ではより詳しく「そもそも backtrackable とはなにか」「どうやったらうまく使えるか」などをまとめました。 backtrackable とは ざっくり説明すると「ひとかたまりのParse処理において、途中でParse処理が失敗した際

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

Elmハンズオン! そんなわけでElm入門ハンズオンに参加してきました。 elm-jp.connpass.com Elmという言語はご存知でしょうか？関数型で記述できるフロントエンド言語です。 と、まるでElmを触ってきたかのように語っていますが全然触っていません。受け売りです。 Elm Architecture はFlux Architechreの元となる考え方らしく、現在React+Reduxで死にそうになっている私としてはとても気になる言語です。 楽しみー!とか言いながら40分ほど遅刻したのは内緒です。 Elmハンズオン! ハンズオン 演習 LT Elmでライフゲーム by matherさん(@mather314) StoryBookを作った by の人生は刺繍をするには短すぎるさん(@miyamo_madoka) Elmでユーザーストーリーマッピングのツールを作ってみた by ジン

Elm版Storybook, Bibliopolaを作りました！ Storybookは使ったことありますか？残念ながらわたしはStorybook自体を使ったことはないんですが、Elmで似たようなツールを使ってUI駆動で開発を進めるのが結構いい感じだったので自分用にツールを作ってみました。 viewを書いたファイルにBibliopolaのmainを書くとその1ファイルだけで使えるツールです document 特徴 pure Elm elm install miyamoen/bibliopola Elmソースコードに直接Bibliopola用のmain書いてelm reactorで開くだけ 1ファイルで始めれる elm-uiを使っている Bibliopolaを使う人がelm-uiを使う必要はないんですが、ちょっとAPI足りない 使い方 See examples. module Hello ex

祝 Elm 0.19 リリース！ https://elm-lang.org/blog/small-assets-without-the-headache New version of @elmlang out today! Compiler generates small assets by default. Just add the --optimize flag!https://t.co/N1Mkbv0OzC pic.twitter.com/PXyQMlYY31— Evan Czaplicki (@czaplic) 2018年8月21日 １年半ウォッチしていたので覚えている範囲で書いてみる。 追記 ↓ここに全部書いてあるじゃん。というか上の記事からリンクされてたし、この記事いらないじゃん。 github.com コンパイルが速くなった タプルで大量にパターンマッチした時に遅くなる件も改

本エントリは 翻訳リクエスト より投稿いただきました。 ありがとうございます！リクエストまだまだお待ちしております！ 現在、私たちが使っているプログラミング言語の数々は、技術分野の巨人たちが時代の流れと共に生み出してきたもので、それぞれが膨大なコードで構成されています。そのため、仮に何らかの修正が必要となった場合、設計者たちは、問題に関係のある箇所のみを、差分的な形で随時マイナーアップデートするという形を採ってきました。C言語やJava、それにJavaScriptといった広く普及している言語において、その改革が遅々として進まないのは、このことに原因があるでしょう。 PythonやRubyといったオープンソースの言語は、バックエンドの問題を解決する手段として、スタートアップの現場で重宝され広く普及しましたが、言語設計者にとっては、レガシーコードの制約や言語関連の委員会による政治的なしがらみも

Web上の視覚的なスタイルを指定するCSSは、あまりにも複雑で、恐らく今までに一度も正確に実装されたことはないだろう。それにもかかわらず、バージョンが上がるにつれて、その複雑さは増すばかりだ。一方で、CSSではできることが限られており、初歩的なデザインでさえ不可能であるか、あるいは法外に難しいことも少なくない。加えて状況依存的（または計算的）な側面を持つものは、すべて外部で対応しなければならないという有様だ。その結果、CSSに関するほとんどの手引きでは、希望する外観に何とか近づけたり、非互換性を回避したりするための頼りないハックに多くの労力が費やされている。 – Bret Victor 私は近年、クライアントサイドの開発技術を数多く見てきました。そして、その中でも特に興味深いと思ったのが Elm です。関数型のプログラミング言語としては、Elmはそれほどワクワクするようなものではありません

新たな elm-html ライブラリでは、HTMLとCSSをElmで直接使用できます。FlexBoxも使ってみたいし、既存のスタイルシートも使い続けたいですか？　Elmは使いやすくなり、処理が 速く なりました。例えば、 TodoMVC アプリを再作成する場合、Elmの コード はとても単純で、 事前のベンチマーク でも、他の人気ライブラリに比べ処理速度が極端に速いという結果が出ています。 elm-html とMercuryは、どちらも virtual-dom プロジェクトを基にしているので、パフォーマンスが優れています。この記事では、前半で“仮想DOM”とは何か、 純粋性 と 不変性 によっていかに処理速度が上がるかということについて詳しく検証します。この検証によって、なぜOm、Mercury、Elmがベンチマークでこのような素晴らしい数字を出したかが分かるでしょう。 パフォーマンスは人

読み時間の目安：10分以内 JavaScriptで強固なコードを書くのは大変なことです。なぜならJavaScriptには、整合性のある強力な型システムなど、昨今のプログラマが期待するような多くのツールがないからです。 そんなわけで、私たちはJavaScriptにコンパイルするための、いくつもの新しい方法を研究しています。この記事では、 Elm に注目したいと思います。この言語の雰囲気をつかむために、簡単なゲームを実装してみました。 デモで遊んでみてください（デスクトップのみです） 。 しかし、なぜJavaScriptは難しいのでしょうか？　次のようなケースを考えてみましょう。 有名なWatの動画 では、Rubyについて簡単に触れた後に、より多くの例を挙げています。 もちろん問題点に気付いた人々は、これを解決するためにJavaScriptにトランスコンパイルする新しい言語の開発を始めました。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 最近気になっている、これから盛り上がる、もしくは盛り上がり始めている２つの言語でミニマルなCRUDをするデモを作ってみました。全体を説明しようとすると非常に長くなってしまうため、かいつまみながら言語やコードの説明をしていきたいと思います。Elmは一年近く触り続けていますが、Elixirは今回始めて触ったため、誤った説明がありましたらご指摘お願いします。 バックエンドコード フロントエンドコード 環境 今回使用した環境を以下に列挙します。今回選んだ言語の特徴として、何かに特化したDSLに近い特徴を持つ言語を選択しました。特化した

はじめに 高品質なWebフロントエンド開発を可能にするためのプログラミング言語Elm。その長所を上げればキリがありません。 強い型制約によって実行時エラーをほぼゼロにできること リリースごとに言語機能が減るというどこまでも考えつくされたシンプルな設計 それでいて実用的なアプリケーション開発にとことん貪欲な機能たち まともなパッケージマネージャー テストしやすさ ...... 一方で、そういった強力な武器たちの切れ味を保つために他の言語とは異なる事情を抱えています。 本記事では、その特有な性質がゆえに誤解されてしまうことも多い Elm というプログラミング言語について、誤解を解きながら、唯一無二の魅力をお伝えしていきます。 この記事を書いた当時は Elm 0.18 の時代でしたが、Elm 0.19 が出た今でも変わらない内容です。 Elm の根幹部分について言及した記事なので、今後 Elm

この記事はElm Advent Calendar 2016 の4日目です。 会社で書かせてもらってるElm製アプリが10000行を超えたので、現時点で個人的にこれはと思うベストプラクティスを実際のソース付きで書いてみる。 github.com （アプリについての情報は機会があれば） 1.必ずスタイルガイドに従う 行数が増える傾向にあるが、かなり読みやすくなるので絶対に従った方が良い。 Style Guide 関連コミット （let...in中に空行を挿入している） 2.データ構造にタプルを使わない 例えばマウスの位置などをタプルで(Int, Int)のように書きたくなる。しかし後悔するのでやめた方が良い。 -- 微妙 calculateX : Model -> Int calculateX model = let (x, y) = model.position in max 0 x --