Elm
ElmDay 6

Style Elementsに対する感想を書くので気になったら使うといいと思う

http://package.elm-lang.org/packages/mdgriffith/style-elements/latest

前書き

Elmはウェブアプリケーションを目的としたDSLです
わたしは0.14から触っていて歴史に詳しいわけではありませんが、evancz/elm-graphicsでは

Elm actually started as a small set of visual elements, not a language. That is partly why I chose the name Elm out of all the nice tree names out there.

と言っているので、もとはGraphicsライブラリでした(断言)
Graphics自体は、今は使われておらずHtmlがViewの中心になっていますが

Elmではhtml, js, cssに特にこだわってなくてウェブアプリケーションをいい感じに作れるためになんかいろいろ考えてるみたいです

その中で最近出てきたStyle ElementsはElmの魔法使いことRichard Feldmanも使ってみてる(参考)新しいviewライブラリです

Style Elementsってどんなだ

Element

Elementはレイアウトが組み込まれたHtmlです
通常レイアウトはたくさんのdiv要素とcssで組むと思うんですが、Elementは最初からrow, columnなどの要素を提供します

Style

Styleはレイアウトやサイズ以外のCSSです
Color、Border、Font、Shadowなどです
ElmコードでClassに対してStyleSheetを書いてElement側でClassを指定する感じになります

CSSを低級言語として扱ってStyleとElementって概念に組みなおしたのがStyle Elementsということになります
CSSフレームワークとやってることは変わらないといえば変わらない感じですね

感想

コードは載せずに使ってみてる感想書きます
割と悪めの感想が多いです(だっていい感想ってむっちゃレイアウト組める!簡単!しかないんだもん・・・
チュートリアルとかまた別途かけたらいいんですが

CSS相当のStyleをElm上で書くことになる

全部ひとりで書いているわたしにとっては問題ないんですけど、この時点で採用できないってなりそう

それなりに適切な型付きでStyle書けます

通常のCSSから機械的に変換できない

CSSを型付きで置き換えよう、を目指してないのでそのまま変換はできません
レイアウト、サイズ、ポジション系がないのもあるんですが、Style.Shadow.simpleみたいにちょっと抽象化してるのもあるので
実際、どういうCSSに変換されるかはコード見に行くか動かしてみてみるしかないです

Style.prop使えばどんなプロパティも書けるので一応移植はできるとは思います

生成したCSSは<style>タグにいれられる

実現方法です
生成されたのをみると<style>タグが一緒にできてて、そこに定義したのが入ってます

これみにいってください
https://miyamoen.github.io/skuld/

人によってはやだそう・・・

Class相当のものを一つしか指定できない

通常だとClassにいっぱい指定してレイアウトとかstyleを付けるんですけど、それはできません
代わりにvariationの仕組みがあって el Button [ vary Primary ] <| text "Primary Button"こんな感じでClass一つ(Button)とvariation(Primary)を指定できます
variationは複数かけます

一つしか指定できないというのはStyle Elements上でのClassの話なので普通のClassは普通に書けます
el Button [ class "danger align-left" ] <| text "Button"

CSS Animationはできない

CSS Transitionはいける
あってもいいような気もするし、要らないような気もする・・・

簡単なアニメーションはできる

CSS Transitionと疑似クラスが使えるので行けます

HtmlとCSSの知識は必要

結局変換されるし、ドキュメントが充実してるわけじゃないので別途知識は要求されます
逆に勉強の指標になるので個人的にはうれしかったんですが(Style ElementsでCSSちょっと覚えました

抜け道は用意されている

Style.propでどんなCSSも書けるし、Element.htmlでHtmlを持ってこれる

CSSフレームワークとの共存もできます。生成されるクラス名は.button__2169476993こんな感じになるので衝突は心配ないはず

レイアウトが楽

div付けてclass名指定するのと変わらないじゃんと言われるかもしれないけど、楽
今までcssフレームワークは使ってみたりしたんですけどdiv・・・class・・・うまく配置できない・・・わけわからんってなってたのが解消されました

横に並べたきゃrowで縦に並べたきゃcolumnでspaceとかpaddingいれたきゃattributesに追加するだけだし楽

Spacing ++ Padding

ドキュメントのここら辺
http://package.elm-lang.org/packages/mdgriffith/style-elements/4.2.1/Element-Attributes#spacing
ドキュメントをみればわかると思うんですがCSSでmargin, paddingをどうしようってなってたのに比べてとても簡単

mediaクエリない

ドキュメントに書かれている方法としては
Modelにwindowサイズを含めて、それを使ってview内で分岐することで実現するみたいです
まだやったことないけどそろそろやってみようと思ってます

CSS Grid

対応されてます。NamedGridも対応
まだ使ったことないです。使う予定はあるので使ったらなんか書きます

APIが固まってない

CSSをそのままマッピングすることを目指していなくて(要出典)独自に抽象化しているんですが、まだ決まり切ってない感じを受けます

ヤギ魔法少女 ピュアファンクショナル(さくらちゃん)さんの感想

https://twitter.com/arowM_/status/937531700971675648

僕は生CSS書いて自分でフレームワークもどき化ちゃうけど、なんだかんだで全体の設計がStyle elementsに似てくるし、flexboxをレイアウトの基本に使う方針とか筋がいいなぁって感じる

まとめ

デザインは自分でしないで他のデザイナの人がやるって人には使うの無理だろって感じです
個人的な話ですがわたしはデザインとかやりたいので(できないけど)Style Elementsを好んで使えるんだと思います

Elmでやりたいことを考えてください。自分でデザインもやってみたいわたしにはStyle Elementsがはまりましたが、人それぞれ目的は違うと思うので目的にあった選択をするといいと思います

大体CSSフレームワークでいいと思うよ、ほんと