keyframes of Vue&TSX with CSS in JS

Transcript

1. Vue + TSX でもCSS in JSしたい話
   #Kyoto.js @did0es
   

   View Slide

2. About Me
   平井 柊太 ( shuta, 　@did0es )
   立命館大学 情報理工学部 2年
   Web Front-end Engineer, Designer
   @ ElevenBack LLC. & tambourine.inc
   

   View Slide

3. https://github.com/shuta13/vue-tsx-sample
   サンプルコード
   

   View Slide

4. VueをTSXで書く
   こういうのはご存じですか?
   

   View Slide

5. .vueを.tsxで書きかえる
   つまるところ…
   

   View Slide

6. 手順
   Vue CLIで環境を作る
   vue-tsx-support の追加
   あとは書くだけ
   

   View Slide

7. こんな感じに書けます
   

   View Slide

8. Reactみたいな味がするVue
   みなさん是非お試しを…
   

   View Slide

9. このときCSS(scss)は外部ファイル
   

   View Slide

10. VueならCSS in JSがいい…？？？
    賛否というか否がありそうですが
    

    View Slide

11. CSS in JSを、します
    

    View Slide

12. styled or emotion
    検証 1
    

    View Slide

13. 宣言ファイルないので本家使います
    

    View Slide

14. styledいれる
    さっそく書いてみる
    

    View Slide

15. styledつかう
    あ〜〜
    

    View Slide

16. hoverしてエラー確認
    とりあえず型で終わってそう…
    

    View Slide

17. うーん
    すんなりやりたい
    

    View Slide

18. emotionいれる
    

    View Slide

19. ？？？
    

    View Slide

20. react が無いと怒られた
    了解！
    

    View Slide

21. react いれた
    カオスでいいね！
    

    View Slide

22. エラーなくて良さそう
    emotionつかう
    

    View Slide

23. 
    色ついてない…
    

    View Slide

24. おそるおそるターミナルを見ると…
    

    View Slide

25. ギェ~~~
    

    View Slide

26. うーん
    

    View Slide

27. emotionいれる(奥義)
    

    View Slide

28. emotionつかう
    
    

    View Slide

29. グエー
    

    View Slide

30. 厳しい
    

    View Slide

31. JSXに props で渡す
    検証 2
    

    View Slide

32. とりあえず書く
    

    View Slide

33. いけてますね
    

    View Slide

34. ハイ、完了！...じゃなくて
    

    View Slide

35. Q. keyframes どうするん？
    

    View Slide

36. ここからが本題です
    

    View Slide

37. オレオレCSS in JSしたい話
    #Kyoto.js @did0es
    

    View Slide

38. styledやemotionには
    @keyframes相当のものがあり㽂
    はじめに
    

    View Slide

39. styledとemotionの
    keyframes実装見てパクる
    その 1
    

    View Slide

40. emotion/packages/core/src/keyframes.js
    

    View Slide

41. styled-components/src/constructors/keyframes.js
    

    View Slide

42. styled-components/src/models/Keyframes.js
    

    View Slide

43. わかるけどわからん ^o^
    めっちゃflowtype使うやん
    

    View Slide

44. 困ったときのMDN頼み
    その 2
    

    View Slide

45. いい感じのWeb APIありました
    CSSStyleSheet.insertRule() : https://developer.mozilla.org/ja/
    docs/Web/API/CSSStyleSheet/insertRule
    

    View Slide

46. やりたいこと説明
    htmlファイルのheadに
    insertRuleでstyleをぶち込む
    

    View Slide

47. example等参考にtsで関数作成
    型アップキャストがちょっとつらい
    

    View Slide

48. こんな感じでつかう
    

    View Slide

49. ☆成★功☆
    

    View Slide

50. まとめ
    - vue + tsx でCSS in JSはちょっと面倒
    - Web APIはえらかった
    

    View Slide

51. 余談ですが…
    暇を持て余してこれをライブラリ化しました
    https://www.npmjs.com/package/vue-tsx-keyframes
    ご興味あればお試しを！
    

    View Slide

52. ありがとうございました！
    Thank you for listening !
    

    View Slide