Upgrade to Pro — share decks privately, control downloads, hide ads and more …

keyframes of Vue&TSX with CSS in JS

did0es
January 11, 2020

keyframes of Vue&TSX with CSS in JS

did0es

January 11, 2020
Tweet

More Decks by did0es

Other Decks in Technology

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