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
1.3k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
89
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
390
codemodとうまく付き合うには
shuta13
0
730
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
830
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
140
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.1k
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
バックログを導入し やっぱやめた話
ota42y
0
170
[RSJ24] Object Retrieval in Large-Scale Indoor Environments Using Dense Text with a Multi-Modal Large Language Model
keio_smilab
PRO
0
220
Oracle Database Backup Service:サービス概要のご紹介
oracle4engineer
PRO
0
4k
疎通2024
sadnessojisan
4
490
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
140
Discover Your Tailored Platform Strategy with Real-World Practice
hhiroshell
1
130
React Aria で実現する次世代のアクセシビリティ
ryo_manba
3
290
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
1
750
「名前解決」から振り返るAmazon VPC
yuki_ink
0
320
分野に潜むツールの紹介
pojiro
1
330
AWS版GitHub?Amazon CodeCatalystの全体像をまとめてみた
oshanqq
1
3.2k
エンジニア採用ノウハウ0から継続的な採用に至るまで / Try recruiting engineers
ohageeq
0
130
Featured
See All Featured
Gamification - CAS2011
davidbonilla
79
4.9k
Fireside Chat
paigeccino
31
2.9k
Code Reviewing Like a Champion
maltzj
518
39k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Raft: Consensus for Rubyists
vanstee
135
6.5k
The Invisible Customer
myddelton
119
13k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Navigating Team Friction
lara
183
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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 !