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
860
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.3k
5分でわかるPreactのVDOMで作るWebエディタ
shuta13
0
180
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
660
codemodとうまく付き合うには
shuta13
0
2.4k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
930
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
240
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.6k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
150
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
800
Other Decks in Technology
See All in Technology
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
380
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
4
1.8k
Wasmで社内ツールを作って配布しよう
askua
0
150
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
160
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
190
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
210
クマ×共生 HACKATHON - 熊対策を『特別な行動」から「生活の一部」に -
pharaohkj
0
210
ファインディにおける Dataform ブランチ戦略
hiracky16
0
220
VLMサービスを用いた請求書データ化検証 / SaaSxML_Session_1
sansan_randd
0
130
今日からあなたもGeminiを好きになる
subaruhello
1
660
AIエージェントを支える設計
tkikuchi1002
11
2.4k
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
710
Featured
See All Featured
KATA
mclloyd
30
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Fireside Chat
paigeccino
37
3.5k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Experiences People Love
moore
142
24k
What's in a price? How to price your products and services
michaelherold
246
12k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
Unsuck your backbone
ammeep
671
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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 !