Dart Sass であれを作った

2020.7.28 FukuokaJS #11 リモート開催

Transcript

1. Dart Sass であれを作った 2020.7.28 FukuokaJS #11 リモート開催 柳生 祐介 (gyugyu)
2. Dart Sass であれを作った 2 describe(me); const { name, company, department, job } = me; console.log(name); // => 柳生 祐介 (gyugyu) console.log(company); // => GMO ペパボ株式会社 console.log(department); // => デザイン部 console.log(job); // => エンジニア
3. Dart Sass であれを作った 3 最近作ったもの • https://github.com/gyugyu/sassunit • https://github.com/gyugyu/array-map-sass • https://github.com/gyugyu/camelize-sass
4. Dart Sass であれを作った 4 Sass new module system (2019.10-) • Dart Sass のみ • `@use` `@forward` • 比較的まともなモジュールシステム ◦ 開放・閉鎖原則に比較的忠実
5. Dart Sass であれを作った 5 Dart Sass Dart を JS にトランスパイルしてそのまま使ってる
6. Dart Sass であれを作った 6 Sass JavaScript API https://sass-lang.com/documentation/js-api
7. Dart Sass であれを作った 7 Function Plugin • https://sass-lang.com/documentation/js-api#f unctions • 要は未定義の Sass function call に対して JS の世 界で実装できる ◦ 同期だけではなく非同期でもできる（！）
8. つまり JS でサポートすれば Sass でウェブアプリ作れる？ 8
9. Dart Sass であれを作った 9 作った • https://github.com/gyugyu/sass-webapp • Express から全リクエストを Sass にプロクシ • Request/Response アダプタの役割を果たす Sass function を定義
10. Dart Sass であれを作った 10 非同期 API があるので • JS 側で async/await 必要な処理もできる • なので Redis （ DB なんでもいいけど）に値保存でき る • アクセスカウンターができる！
11. デモ 11
12. 何かの役に立つんですか？ 12
13. さあ…？ 13 多分何かに使えるはず