Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
keyframes of Vue&TSX with CSS in JS
Search
did0es
January 11, 2020
Technology
1
780
keyframes of Vue&TSX with CSS in JS
did0es
January 11, 2020
Tweet
Share
More Decks by did0es
See All by did0es
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
92
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
410
codemodとうまく付き合うには
shuta13
0
740
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
830
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
150
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.2k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
100
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
690
Other Decks in Technology
See All in Technology
効果的なオンコール対応と障害対応
ryuichi1208
5
2.6k
The XZ Backdoor Story
fr0gger
0
3.2k
Analytics-Backed App Widget Development - Served with Jetpack Glance
miyabigouji
0
210
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
450
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
160
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
23
6.8k
技術ブログや登壇資料を秒で作るコツ伝授します
minorun365
PRO
23
5.4k
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
2
830
ナレッジグラフとLLMの相互利用
koujikozaki
0
300
Agile in Automotive Industry, puzzles and lights.
hiranabe
2
280
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
550
Featured
See All Featured
Side Projects
sachag
451
42k
Docker and Python
trallard
39
3k
How STYLIGHT went responsive
nonsquared
93
5.1k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Fireside Chat
paigeccino
31
2.9k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Web development in the modern age
philhawksworth
204
10k
Documentation Writing (for coders)
carmenintech
65
4.3k
Git: the NoSQL Database
bkeepers
PRO
425
64k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Designing the Hi-DPI Web
ddemaree
278
34k
Transcript
Vue + TSX でもCSS in JSしたい話 #Kyoto.js @did0es
About Me 平井 柊太 ( shuta, @did0es ) 立命館大学 情報理工学部
2年 Web Front-end Engineer, Designer @ ElevenBack LLC. & tambourine.inc
https://github.com/shuta13/vue-tsx-sample サンプルコード
VueをTSXで書く こういうのはご存じですか?
.vueを.tsxで書きかえる つまるところ…
手順 Vue CLIで環境を作る vue-tsx-support の追加 あとは書くだけ
こんな感じに書けます
Reactみたいな味がするVue みなさん是非お試しを…
このときCSS(scss)は外部ファイル
VueならCSS in JSがいい…??? 賛否というか否がありそうですが
CSS in JSを、します
styled or emotion 検証 1
宣言ファイルないので本家使います
styledいれる さっそく書いてみる
styledつかう あ〜〜
hoverしてエラー確認 とりあえず型で終わってそう…
うーん すんなりやりたい
emotionいれる
???
react が無いと怒られた 了解!
react いれた カオスでいいね!
エラーなくて良さそう emotionつかう
色ついてない…
おそるおそるターミナルを見ると…
ギェ~~~
うーん
emotionいれる(奥義)
emotionつかう
グエー
厳しい
JSXに props で渡す 検証 2
とりあえず書く
いけてますね
ハイ、完了!...じゃなくて
Q. keyframes どうするん?
ここからが本題です
オレオレCSS in JSしたい話 #Kyoto.js @did0es
styledやemotionには @keyframes相当のものがあり㽂 はじめに
styledとemotionの keyframes実装見てパクる その 1
emotion/packages/core/src/keyframes.js
styled-components/src/constructors/keyframes.js
styled-components/src/models/Keyframes.js
わかるけどわからん ^o^ めっちゃflowtype使うやん
困ったときのMDN頼み その 2
いい感じのWeb APIありました CSSStyleSheet.insertRule() : https://developer.mozilla.org/ja/ docs/Web/API/CSSStyleSheet/insertRule
やりたいこと説明 htmlファイルのheadに insertRuleでstyleをぶち込む
example等参考にtsで関数作成 型アップキャストがちょっとつらい
こんな感じでつかう
☆成★功☆
まとめ - vue + tsx でCSS in JSはちょっと面倒 - Web
APIはえらかった
余談ですが… 暇を持て余してこれをライブラリ化しました https://www.npmjs.com/package/vue-tsx-keyframes ご興味あればお試しを!
ありがとうございました! Thank you for listening !