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
760
keyframes of Vue&TSX with CSS in JS
did0es
January 11, 2020
Tweet
Share
More Decks by did0es
See All by did0es
codemodとうまく付き合うには
shuta13
0
310
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
720
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
62
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
1.8k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
80
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
600
天下一 静的サイトホスティング 武道会 / World Static Site Hosting Tournament
shuta13
0
290
Other Decks in Technology
See All in Technology
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
web-application-security
matsuihidetoshi
0
170
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
900
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
210
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
100
MLOpsの「壁」を乗り越える、LINEヤフーの Data Quality as Code
lycorptech_jp
PRO
5
530
アクセス制御にまつわる改善 / Improving access control
itkq
0
550
Databricks における 『MLOps』
databricksjapan
2
170
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.8k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
17
6.4k
A better future with KSS
kneath
231
16k
Infographics Made Easy
chrislema
238
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
What's new in Ruby 2.0
geeforr
337
31k
RailsConf 2023
tenderlove
4
540
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
How to train your dragon (web standard)
notwaldorf
73
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
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 !