keyframes of Vue&TSX with CSS in JS

Transcript

1. Vue + TSX でもCSS in JSしたい話 #Kyoto.js @did0es
2. About Me 平井 柊太 ( shuta, 　@did0es ) 立命館大学 情報理工学部 2年 Web Front-end Engineer, Designer @ ElevenBack LLC. & tambourine.inc
3. https://github.com/shuta13/vue-tsx-sample サンプルコード
4. VueをTSXで書く こういうのはご存じですか?
5. .vueを.tsxで書きかえる つまるところ…
6. 手順 Vue CLIで環境を作る vue-tsx-support の追加 あとは書くだけ
7. こんな感じに書けます
8. Reactみたいな味がするVue みなさん是非お試しを…
9. このときCSS(scss)は外部ファイル
10. VueならCSS in JSがいい…？？？ 賛否というか否がありそうですが
11. CSS in JSを、します
12. styled or emotion 検証 1
13. 宣言ファイルないので本家使います
14. styledいれる さっそく書いてみる
15. styledつかう あ〜〜
16. hoverしてエラー確認 とりあえず型で終わってそう…
17. うーん すんなりやりたい
18. emotionいれる
19. ？？？
20. react が無いと怒られた 了解！
21. react いれた カオスでいいね！
22. エラーなくて良さそう emotionつかう
23. 色ついてない…
24. おそるおそるターミナルを見ると…
25. ギェ~~~
26. うーん
27. emotionいれる(奥義)
28. emotionつかう
29. グエー
30. 厳しい
31. JSXに props で渡す 検証 2
32. とりあえず書く
33. いけてますね
34. ハイ、完了！...じゃなくて
35. Q. keyframes どうするん？
36. ここからが本題です
37. オレオレCSS in JSしたい話 #Kyoto.js @did0es
38. styledやemotionには @keyframes相当のものがあり㽂 はじめに
39. styledとemotionの keyframes実装見てパクる その 1
40. emotion/packages/core/src/keyframes.js
41. styled-components/src/constructors/keyframes.js
42. styled-components/src/models/Keyframes.js
43. わかるけどわからん ^o^ めっちゃflowtype使うやん
44. 困ったときのMDN頼み その 2
45. いい感じのWeb APIありました CSSStyleSheet.insertRule() : https://developer.mozilla.org/ja/ docs/Web/API/CSSStyleSheet/insertRule
46. やりたいこと説明 htmlファイルのheadに insertRuleでstyleをぶち込む
47. example等参考にtsで関数作成 型アップキャストがちょっとつらい
48. こんな感じでつかう
49. ☆成★功☆
50. まとめ - vue + tsx でCSS in JSはちょっと面倒 - Web APIはえらかった
51. 余談ですが… 暇を持て余してこれをライブラリ化しました https://www.npmjs.com/package/vue-tsx-keyframes ご興味あればお試しを！
52. ありがとうございました！ Thank you for listening !