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