Meguro.css#2でDart Sassをブラウザで動かす話をしてきた

デモとソースはこちら

Demo
https://dart-sass-bootstrap-demo.netlify.com/ (その3)

Source
https://github.com/terrierscript/dartystrap/

Soruce (parcel-plugin)
https://github.com/terrierscript/parcel-plugin-darty

その1だけの簡素版もあったので貼っておく（こっちの方がさっくり動いている感がある）
https://dart-sass-browser-sample.netlify.com/ https://github.com/terrierscript/dart-sass-browser

ソースはアレな具合なところ多いがご勘弁願いたい。

本当は元々Bootstrap4のカスタムビルド的な話をしようと思って練っていたら色々転がってこんな感じのスライドになった。結果実用性がほとんど無くなっている。

アイスブレイク的に「みなさんSass嫌いかと思いますが」と言ってみたが意外とみんなに嫌われてないようだった。

（個人的にはnode-sassがインストール遅いし壊れるしでdart-sassに早く置き換われという気持ちとか変数とかもうcss variables使おうぜという気持ちとかReactとかVueでSass使われてるの見ると「いやそれコンポーネント設計見直すべきでは？」というパターンがわりとあるとか思うとか色々な気持ちがある）

あとは色々雑感などを書いていく

Sass関連

• dart-sassのソースコードは割と読める。個人的にはGoっぽい感じだと思った。（パーサー周りまでは潜ってないけど・・・）
• パフォーマンス測定を見ると、node上で走らせるとdart-sassはやっぱりそれほど夢がない程度のスピードのようだが、インストールの事など考えるとそれでもdart-sass使いたいなーと思っている。
• sassのimporter関数はnode-sass-magic-importerの実装を見ながら自前した。unpkgからボリボリ落としてくる感じにしているが、うまいことマッピングみたいなのを持ってないと相対パスを解決出来ないとかぼちぼち面倒なとこはあった。

Parcel関連

• うっかりparcelを触ってしまったが、感想としてはparcel最高に尽きる。
• 本体コードもasync/await使ってたりモダンでクリーンだし、plugin作成もwebpackやgruntのプラグインよりずっと簡単に思える。
• プラグインとかはawesome-parcelからplugin探って色々参考にしてた
• Parcelへの気持ちはこちらの記事にも書いたが、configを徹底して書かせないという思想はアリだ。
• ビルド大好きおじさんなので「Webpackで消耗」という気持ちがあまりわからなくなっていたが、parcelの消耗しなさを知ってしまって今後はWebpackで消耗するという概念を知ってしまいそうで怖い。
• たまにキャッシュが悪さするのでno-cacheしたりするとよい
• WebWorkerも使ったけどビルド周りはparcelが勝手にパースしてくれてまじで最高だった。拡張子書かないといけないってとこだけハマった。
• parcelのWebWorkerビルドが入ったばっかでこんなバグにあたったけどメンテナさんが速攻で直してくれて勢いある！って感じだった
• スライド中で紹介してるparcelのrequireを騙す手法は既に防がれているっぽい。素早い。
• どうでもいいけどnpmでgithubから引っ張ってくるときgithub:username/repositoryで指定出来るのに気づいて超便利だった

React関連

• 最初デモとかlit-htmlとかでやろうとしたけどあまりに慣れずにあきらめてReact使う事にした。
• react-shadowでShadowDOM使ったら感動した（しかしShadowが親からのCSSの影響受けててウッてなった）
• デモにはFunction as Child Componentをふんだんに使ってみたけど謎のリレンダが走ったり結局ステート散らしてしまって最終的に「グローバルなステート欲しい・・・」みたいな気持ちになって、ステート散らかしアンチパターンを再学習した
• デモでreakitも使ってこれもなかなか良い感じだった。早くTypeScript対応してほしいので期待している
• 途中から手作業確認だるくなってpuppeteerでちょっとだけintegrationテスト書いた。seleniumの10倍ぐらい楽に感じてはいる。

配信関連

• 最初CodeSandboxでデモ作っていたが、CodeSandboxの処理はどうも裏側にいるnodeがSSRっぽくやっている挙動していたので、今回の趣旨としてこれでは駄目だなとなった。気をつけないとハマるかも。
• 相変わらずnetlifyは僕らの味方。
• unpkgも直で毎回取ってくるの申し訳ねえなみたいな気持ちでnetlify側にキャッシュするように設定出来た。すぐ出来る。
• 設定系GUIにまとめるの面倒だったり、_redirectファイルとかだとだるいことが起きるので全部netlify.tomlで完結したほうが良い。
• 一応Functionsでbootstrapコンパイル出来るバージョンも作ってたが、結果別に面白くないのでボツにした

発表関連

• なんだかんだでオープンな外部勉強会でLTやったのは初めてだった。まあ及第点ではないかと思う
• 得意としてるのがスライド枚数多めでスパスパ進んでいくスタイルなのでメモ取りづらいですよねすいませんって気持ちはあります
• デモが勉強会開始20分前に動いてないことが発覚して脳汁出しまくって直せた。危なかった
• なんでこれ気づいてなかったのかと思ったがおそらくキャッシュされていたときこのコード通って無くて、数日放置してキャッシュ消えてから動かしたら死んだとかそんな感じだと睨んでいる
• 本番でネットワーク不調でデモが動かなくて更に焦った。やはりデモは動画のほうが良いんだなと学習（少なくとも動画を用意しておくべきだとは思った）