bouzuya/purescript-react-basic-timer の 1.0.0 をつくった。mockmock.dev #200 における w010 の成果物。

timer はタイマー。 7 GUIs からお題をもらった。

0.1.0 から 1.0.0 ではスタイルの微調整くらいしかしていない。

プログラミング言語は PureScript 。パッケージマネージャーに spago と npm 。 npm initializer に bouzuya/create-purescript-react-basic 。 purescript-react-basic 経由で react や react-dom を使っている。今回は oreshinya/purescript-pure-style を使っている。

前回 (2019-01-29) の CSS Modules と違って今回は oreshinya/purescript-pure-style を使っている。 Twitter でもサポートしてもらった 。参考: purescript-pure-styleをつくりなおした - oreshinyaのブログ 。

CSS Modules と pure-style では単純な比較はできないのだけどせっかくなので方針の違いを見るためにも軽く比較する。ちなみに CSS Modules は〜と書いている箇所は前回のぼくのプロジェクトの設定に固有のものもある。

• CSS Modules だと拡張した CSS を CSS ファイルに書く。 pure-style だと拡張した CSS を文字列として PureScript ファイルに書く。
• CSS Modules だと CSS ←→ PureScript の変数の共有が面倒。 pure-style だと容易。
• CSS Modules だと CSS の文法に composes :global :local が追加される。 pure-style は CSS の文法に & が追加される。
• CSS Modules だと CSS 関連のツール (PostCSS) が必要。 pure-style だと不要。
• CSS Modules だと別ファイル (*.css) への事前の書き出しが容易。 style 要素への埋め込みは面倒そう。 pure-style だと別ファイル (*.css) への事前の書き出しはやったことないが難しそう。 style 要素への埋め込みは容易。

pure-style の気になる点。副作用があるのに Effect がついていない点。文字列での指定は開発者ツールからのコピペができるのは良い。裏返しだけど下手すると内部で CSS を parse しないといけなくなりそう……。文字列の埋め込みが (<>) でやや読みづらそう。あとは最終的な JavaScript に CSS が文字列として埋め込まれてしまう。これは別ファイルへ書き出す方針をとるときに厳しそう。

PureScript で完結させたいのはわかる。それは↑にも書いたように変数の共有に便利な点やツールセット的にもなるべく身軽で居たい点などからだ。

CSS Modules と pure-style 共に気になる点。クラス名が汚くなってしまう点。 Vue.js の Scoped CSS のような .class[data-hash] のような形のほうが好み。

↑でも触れた別ファイルへの書き出し。 CSS はコンポーネントごとに動的に style を追加するアプローチもあるだろうけど link でサイト全体の *.css を読めば良いんじゃないかと思っている。このあたりは速度面の問題があるはずだけど実はあまり詳しくない。

近いうちに自分の納得のいくようなものをつくると思う。

• CSS に相当するものを PureScript で書く
• 事前に CSS および PureScript のモジュール (スコープ名) を生成する

前回も書いたけど今週のどこかで w010 のルールの v3 を考るつもり (覚書) 。 Routing / History API / SSR / CSS / CI 設定 / スクリーンショット / まとめページは次回以降。

育児。子どもが離乳食を自分からぱくぱくと食べてくれた。うれしい。