Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
elm-ui CSSができなくても安心！elm-uiで簡単レイアウト！ もう上下左右中央揃えでググらない！elm-uiで簡単レイアウト！ 要素の検証はもういらない！？elm-uiで簡単UIデバッグ！ 「CSSﾜｶﾝﾅｲ...」「CSSフレームワークでうまくレイアウトできない...」 CSSわかんないですか？CSSフレームワーク使ってみても結局思い通りにレイアウトできなくて辛くないですか？どうですか？ elm-uiはそんなあなたの救世主、次世代レイアウトシステムです（誇大広告です、適当に言ってます） AltJS的にJSはバイトコードみたいなもので直接触るものじゃないはずです。elm-uiではCSSをバイトコードとして扱うことができます。他人の作った抽象にのっかろう 「そのなんとかuiで何ができるの？」 レイアウトできるよ とりあえず楽天のこのページを見てきてくれ。適当なところで要素の検証をし
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 をマウンティングのた
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処理が失敗した際
長いだけで中身は単なる雑なメモなので、結論や主張はないです。 起こりうる問題 Elm で、サーバーがおかしな JSON を返してきた時にエラーが発生してアプリが止まることがある。一般的にはシステム境界でエラーが分かるのは嬉しいのだが、不寛容すぎると問題を起こしうる。 これは JavaScript とかだと起こらない問題で、 Elm とかだと起こりうる。例えば、{ name: string } みたいな API だとして {} が来た時に 「nameがない！」とエラーになる可能性がある。これを デコードエラー と呼ぶ。それが本番で運用した時に問題にならないか、という話。確率は低そうだが考えておいて損はなさそう。 Elm 以外も含めて言語別に見ると、 JS の場合、プロパティが null や undefined でも構わず処理を続け、運悪く当たるとぬるぽになる。型が違った場合は適当に処理される
これまで 例えば、elm make src/Main.elmとするとindex.htmlを生成してくれて、これをブラウザで開けば結果が表示されます。 また、elm reactorとすれば、開発用のサーバーを立ち上げてくれて、そこからElmのコードの実行が出来ます。 CssフレームワークやJavaScriptライブラリの導入 ただ、やっぱportsやflagsを利用したり、何らかのjsライブラリやcssフレームワークを取り入れたくなってきます。これを実現するには、エントリーポイントとなるindex.htmlを用意し、 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Main</title> <link rel="stylesheet" href="whatever-you-want.css"> <script src="
はじめに 先日、Elm v0.19 がリリースされました。公式ライブラリのリポジトリが elm-lang から elm に変更され、その中身も大きく再構成されています。 本記事では、これらの変更のうち特に時刻や日付の扱いに関する部分について、新しい API の使い方を含めて簡単に解説します。 v0.18 における時刻の扱い v0.18 では、時刻を扱う機能は標準パッケージ elm-lang/core の中で提供されていました。時刻を扱う Time モジュールと日付を扱う Date モジュールで、それぞれデータ型や関数が定義されているのが特徴です。 なお、旧バージョンのライブラリは現在 Elm Packages の検索にはヒットしない ので、中身を確認するためには直接 URL にアクセスする必要があります。 旧 Time モジュール Time - core 5.1.1 時刻を扱う Time
フロントエンド特化型 フレームワーク内包言語 Elmが先日(2018/8/23) バージョン0.19 にアップデートされました。 アップデートの内容ですが、特に衝撃的だったのが、アセットサイズの縮小です。言語とフレームワークを内包しているにも関わらず、今主流のフレームワークたちを差し置いて29kbとかなり軽量になりました。 それだけでなく、 227モジュール、49,315行のコードに対して2秒を切る速度でコンパイルできるほどコンパイル速度が改善しています！ 今まで実用的とは言えなかったElmの公式ドキュメントがElm Guideとしてアップデートされました。Elm-JPのコミュニティにも今回のアップデートには火が付いて、少数ながらも精鋭部隊で翻訳プロジェクトがとんでもない勢いで動いています！翻訳やElmに関する質問は是非コミュニティへ！ Elm Guide (日本語訳) 私自身もElmを簡
In 2015, I spent some of my spare time trying out Elm, to render something simple in the browser and also to run some programs in Node. During those times, there were very few restrictions on what the main function could be, so writing a Node program was very simple, especially given the Stream type that allowed for programming in a simple reactive way. I quit using Elm after a while of being cons
先日行われた We Are JavaScripters! @23rd で、Elm のテストフレームワーク elm-test に搭載されている Fuzzing 機能について発表してきました。 Fuzzing を利用するとテストデータを自動で生成することができるため、例えば「encode と decode を行うと元に戻る」といった、入力に依存しない 関数の性質に関するテスト をより簡単かつ効率的に実装することができます。 さらに、後で詳しく解説する通り、elm-test の Fuzzer にはバグが起こりやすいエッジケースを集中的に生成してくれるというメリットもあります。 elm-test の使い方は、すでに偉大なる先達によって大部分が解説済みです。普通にテストする上では、これらの内容を押さえておけば困ることはないでしょう。 [Elm] Fuzzer でテストデータを量産しよう (by ji
祝 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 コンパイルが速くなった タプルで大量にパターンマッチした時に遅くなる件も改
We Are JavaScripters! @23rd で使用したスライドです。Elm のプログラムに対してproperty-based test を行うためのライブラリ elm-test を紹介しました。特に、提供されているコンビネータを利用して、自作のデータ型のための Fuzzer を自在に組み立て…
I recently joined a company using Elm for a new project, and it has been awesome, Elm is a great platform for front-end development and it has been a joy to work with. Unfortunately, as the project grew, so did our compile times, and eventually it frustrated us enough that we set aside some time to work on it. First, I made a script to loop through every file in the project, touch it, and time how
社内LTの資料(ほぼ)そのままなので雑な記事です elmのコンパイラがめっちゃ遅かったから速くした 大筋 これをやってみたというわけです-> https://medium.com/@antewcode/faster-elm-builds-e0669580ee67 めっちゃelmを書いていたらビルドに260秒くらいかかってた 解決するためにコンパイラのメトリクスをとった GCに問題があったのでヒープサイズ変更した ビルドは40秒くらいになった。嬉しい。 elmを書いていたらビルドに260秒くらいかかってた 差分ビルドは変更するモジュールによるが、5秒 ~ 1分 変更モジュールの参照が多いほど時間は伸びる LOC2万5千くらい elmのコンパイラーにはバグがあってビルドが長くなるケースある 複雑なパターンマッチ (ex. タプル)があるとコンパイラがCPU100%食いつぶす -> 複雑なパター
最近 Elm-jp 界隈で、Vue.js の Tree View Example のようなものをどうやって実現するかで盛り上がっていました。 この機会に以前からほしいと思っていた機能を提供する elm-reference を作成しました。 この記事では、View 上のイベントで List を更新する際に生じる課題を取り上げ、elm-reference による解決方法をご紹介します。 一覧の View にまつわる課題 世の中には一覧を表示して操作するようなアプリケーションが多く存在します。 例えば、よくあるTODOアプリもTODOのリストを追加したり削除したり内容を編集したりします。 他にも管理画面などではユーザー一覧ページや記事一覧ページなどはよくあるパターンです。 このようにモデルに List を含み、その List を描画した各要素について何らかの操作を行うような UI の例として、以
はじめに 高品質なWebフロントエンド開発を可能にするためのプログラミング言語Elm。その長所を上げればキリがありません。 強い型制約によって実行時エラーをほぼゼロにできること リリースごとに言語機能が減るというどこまでも考えつくされたシンプルな設計 それでいて実用的なアプリケーション開発にとことん貪欲な機能たち まともなパッケージマネージャー テストしやすさ ...... 一方で、そういった強力な武器たちの切れ味を保つために他の言語とは異なる事情を抱えています。 本記事では、その特有な性質がゆえに誤解されてしまうことも多い Elm というプログラミング言語について、誤解を解きながら、唯一無二の魅力をお伝えしていきます。 この記事を書いた当時は Elm 0.18 の時代でしたが、Elm 0.19 が出た今でも変わらない内容です。 Elm の根幹部分について言及した記事なので、今後 Elm
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
