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
810
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
2.2k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
130
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
570
codemodとうまく付き合うには
shuta13
0
1.3k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
900
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
210
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.4k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
120
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
760
Other Decks in Technology
See All in Technology
IAMのマニアックな話2025
nrinetcom
PRO
6
1.3k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.8k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
180
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
270
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
470
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.3k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
200
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
540
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1k
JAWS DAYS 2025 アーキテクチャ道場 事前説明会 / JAWS DAYS 2025 briefing document
naospon
0
2.5k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
170
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Scaling GitHub
holman
459
140k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Rails Girls Zürich Keynote
gr2m
94
13k
Agile that works and the tools we love
rasmusluckow
328
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Six Lessons from altMBA
skipperchong
27
3.6k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Automating Front-end Workflow
addyosmani
1368
200k
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 !