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
870
keyframes of Vue&TSX with CSS in JS
did0es
January 11, 2020
Tweet
Share
More Decks by did0es
See All by did0es
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
7
690
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2.4k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
200
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
700
codemodとうまく付き合うには
shuta13
0
2.6k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
950
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
260
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.6k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
170
Other Decks in Technology
See All in Technology
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Node.js 2025: What's new and what's next
ruyadorno
0
510
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
110
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
450
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
1
120
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
500
dbtとBigQuery MLで実現する リクルートの営業支援基盤のモデル開発と保守運用
recruitengineers
PRO
3
120
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
440
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
140
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Gamification - CAS2011
davidbonilla
81
5.5k
Automating Front-end Workflow
addyosmani
1371
200k
Optimizing for Happiness
mojombo
379
70k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Rails Girls Zürich Keynote
gr2m
95
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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 !