ポエムです。 自分の今の立場としては「Elm の人」ということになってるんだけど、どういう変遷でここまできて今どういうスタンスなのかっていうのはあんまり話す機会がない。だから整理のために考えてることを書いていくよ、というのがこの記事の趣旨。 非 Web の立場から そもそも自分は「Web 系」の出身ではない。新卒入社したワークスでは ERP パッケージを提供するのに画面を Web 技術で作ってるというだけで、別に SEO の順位を競ったり広告をどうという話ではないし、瞬時に画面が表示されないと離脱率が〜という話でもない。ただ、画面はとにかく複雑で設定項目とががうじゃうじゃある。 あと、学生時代に PC に触れたのが Windows で「黒画面なにそれ美味しいの？」くらいに GUI に染まりきってたというのがある。工学系の研究を効率化するために C# で GUI を作ってたら、なんかソフトウ

こんにちは。鳥居 @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.

モジュールを作るとき youtu.be いきなりですがこの動画を見てください。この動画はElmの作者のEvanさんによる発表です。 まず見て驚くのはElmの場合、一つのファイルに対してプログラムを育てていくことではないでしょうか。通常システムを作るときには責務を切り分けて責務ごとにモジュールを作成することが結果的にファイル分割につながっていました。 Elmでも同様にElm ArchitectureによりModel, Update, Subscribe, Viewにシステムが分割されています。しかし単一の責務ごとにモジュールを作成することなく一つのファイルにアプリケーションを構築していきます。 この発表いわく通常それは400から1000行くらいのコードまで成長するそうです。そのあたりからモジュール作成の兆しが訪れることが述べられています。 Modelの構築の仕方に習っていくと新しいCusto

TDD という用語を使うとテストおじさんがやってきて、それはそうじゃないとか色々言い出すと思うんだけど、それが趣旨ではないので勘弁して欲しい。予防線ここまで。 Puppeteer でテスト Puppeteer が世間的にも個人的にもブームだ。ヘッドレス Chrome を操ってクローリングしたりスクリーンショットを撮ったり色々出来る。 github.com で、あれこれと遊んでいるうちにテストに使えるんじゃね？ということに気づいたので実践してみたら快適だったという話。ブラウザ操作してテストというのは昔から Selenium というのがあり、こちらはクロスブラウザで出来たりするんだけどまあ大掛かりでだるさを感じてしまう。メリットデメリットの比較はさておき、どうせならナウいやつを使ってみたい。よし使おう。 何をテストするか 普段から画面を見ながら開発しているので、どこに何が表示されているべきとい

by marissa anderson コンピュータープログラムを記述するプログラミング言語には、C++・Java・Python・Rubyといったメジャーな言語の他にも数多くのマイナー言語が存在します。そんなマイナー言語の一つ「Elm」を使ってみたWEBエンジニアのアレキサンダー・キャンベルさんが、「Elmを使ってみてマイナーな不人気言語に対する考えが変わった」と語っています。 Elm changed my mind about unpopular languages – Real Kinetic Blog https://blog.realkinetic.com/elm-changed-my-mind-about-unpopular-languages-190a23f4a834 キャンベルさんはプログラマーとして働くにあたって、何よりも完成品を納品することを大事にしてきたとのこと。「私は

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに Elm2 Advent Calendarの11日目の記事です。 1文字もコードが出てこない上、主観的なことを書いたポエムです。 Elmを一時期触ってた者として感じていたことを思いつきで書きたくなったので書きます。 Elmの売りポイントと解釈しうるもの （Elm好きな人からすると色々あるのかもしれないけど、）端的に言うと、やっぱり、Elm Architectureという決まったアーキテクチャを強制されることなんじゃないかなーと思います。 ウェブサービスでリッチさが求められる頻度が増えてきたのはここ数年で始まった潮流だと勝手に思っているので、ウェブエンジニアにGUIアーキテクチャに強い人は割と少ないという主観的な所感をもっています。 いわゆるウェブエンジニアという人たちの多くの主戦場はサーバーサイドの人が多いと感じていて（私の観測範囲が偏っているかも？）、そのようなエンジニアにGUI

CSS in JS(Elm)したら想像以上に良かった という記事をずいぶん前に出して結構ブクマを貰えたんだけど、今は「なんだかなー」と思っているので整理する。冷静に考えると、そもそもこのエントリで書いていることのほとんどが「良かった」ではなく「悪くなかった」としか言ってない。 class が無いのでどのスタイルを直せば良いのか分からない これが一番大きい。このビューのスタイルを直したい、と思った時に class が書いてないのでどこを直しにいけば良いのか分からない。 DevTools であれこれ試す時に同じスタイルが一気に変わらない class でやれば同じところが変わってくれっる DevTools からコピペできない あれこれ試した後「これだ」と思ったらそこからコピペした後、 Elm のコードに直さないといけない。 スタイルを変えるのにコンパイルが必要 Sass とか Post CSS

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 高品質なWebフロントエンド開発を可能にするためのプログラミング言語Elm。その長所を上げればキリがありません。 強い型制約によって実行時エラーをほぼゼロにできること リリースごとに言語機能が減るというどこまでも考えつくされたシンプルな設計 それでいて実用的なアプリケーション開発にとことん貪欲な機能たち まともなパッケージマネージャー テストしやすさ ...... 一方で、そういった強力な武器たちの切れ味を保つために他の言語とは異なる事情を抱えています。 本記事では、その特有な性質がゆえに誤解されてしまうことも多い Elm と

Elm 界隈で「コンポーネントをどう作るべきか」みたいな話がよく出る。日本に限った話ではなくメーリングリストとか Slack でも頻出の話題で、その度に熟練者が説明するのだが、すんなり理解されることもあれば喧嘩になることもある。 ちょうど昨日 Twitter で盛り上がってたので、可能な限りわかりやすく現状を説明してみる。 @nobkz @m2ym （言っている意味が分かってしまった…多分かつての推しアーキテクチャで今は基本的に避けるべきだけど場合によってはやっても良い的な位置付けのやつです…割り込み失礼）— Yosuke Torii / ジンジャー (@jinjor) 2017年5月11日 TL;DR 出来る限りコンポーネントを作らずにビューの関数で済まそう。 コンポーネントとは何か 最初に言ってしまうと、 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 のパイプを使う場合、その制

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

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

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