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
React勉強会.pdf
Search
kaminchu
August 07, 2019
Programming
0
320
React勉強会.pdf
kaminchu
August 07, 2019
Tweet
Share
More Decks by kaminchu
See All by kaminchu
jawsug_niigata_20220115
kaminchu
0
340
yarnの話.pdf
kaminchu
1
160
Web_アプリ_勉強会_FE_BE_.pdf
kaminchu
0
990
ルーターの選び方その2.pdf
kaminchu
0
790
ルーターの選び方
kaminchu
0
1.2k
NDS56.pdf
kaminchu
0
110
nds54
kaminchu
0
220
internet
kaminchu
0
3k
Other Decks in Programming
See All in Programming
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
iOS開発スターターキットの作り方
akidon0000
0
210
Comparing decimals in Swift Testing
417_72ki
0
100
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
AIともっと楽するE2Eテスト
myohei
9
3.2k
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
660
リッチエディターを安全に開発・運用するために
unachang113
1
270
What's new in Adaptive Android development
fornewid
0
120
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
310
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
140
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Music & Morning Musume
bryan
46
6.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.2k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Why Our Code Smells
bkeepers
PRO
337
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
これからにStyling はemotion でキマリ☆ 2019/08/07 React 勉強会 #1 1
⾃⼰紹介 Twitter @kam1nchu 職種 インフラエンジニア フロントエンドエンジニア 歴 Javascript 歴 3
年 React 歴 3 年 AWS 歴 半年 2
React のStyling は何使ってますか? 3
emotion が盛り上がってきています 4
他のに⽐べて何がいいのか 5
CSS Modules sass とか書けたりはする。CSS とJS の間での定数の共有ができない。 import styles from "./styles.css";
export const StyledButton = () => ( <button className={styles.button}> Styled! </button> ); 6
Inline Styles ⼿軽なので好きだけど、hover とかできないことがある。 css のサンプルのコピペとかし難い。 const styles = {
background: "#fff", padding: "20px", borderRadius: "5px", border: "none", }; export const StyledButton = (props) => ( <button style={props.selected ? styles : {...styles, background: "#ed3330"}}> Styled! </button> ); 7
Styled-Components ⼀⾒便利そうだけど... import styled from "styled-components"; export const StyledButton =
styled.button` background: ${props => props.selected ? "#fff" : "#ed3330"}; padding: 20px; border-radius: 5px; border: none; `; 8
Styled-Components 毎回Component 作らされるの、⾯倒くさくないですか? import styled from "styled-components"; const StyledTable =
styled.table``; const StyledTh = styled.th``; const StykedTr = styled.tr``; export const Table = () => ( <StyledTable> <StyledTh><td> カラム</td><td> カラム</td></StyledTh> <StykedTr><td> 値</td><td> 値</td></StykedTr> </StyledTable> ); 9
そこで 10
emotion 11
inline な感じで書ける /** @jsx jsx */ import { jsx }
from "@emotion/core"; export const StyledComponent = (props) => { return (<div css={{ color: "hotpink" }} {...props}></div>); }; 12
Styled-Components みたいなこともできる import styled from "@emotion/styled"; export const StyledButton =
styled.button` color: turquoise; `; 13
AltCSS っぽいこともできる /** @jsx jsx */ import { jsx, css
} from "@emotion/core"; const styled = css` color: blue; header & { color: green; } `; export const StyledComponent = () => ( <div> <header> <p css={styled}>Green Text</p> </header> <p css={styled}>Blue Text</p> </div> ); 14
emotion(+typescript+parcel) の導⼊の 仕⽅ 15
⾊々⼊れる # ビルド yarn add -D typescript parcel-bundler # react
yarn add -D @types/react @types/react-dom yarn add react react-dom # emotion yarn add @emotion/core @emotion/styled 16
tsconfig.json ( 当然react なので) 、jsx 記法でReact.createElement になるように設定 npx tsc --init
// 略 "jsx": "react" // 略 17
基本的なもの揃える ファイル構成はこんな感じ │ ├ node_modules ├ src ├ index.html ├
App.tsx # ReactDOM.render とかする └ components └ SomeComponent.tsx # emotion で作る ├ package.json ├ yarn.lock └ tsconfig.json 18
component を作る 実は、emotion のcomponent だけはReact.createElement を使わず、 JSX Pragma でempotion の関数を指定する。
/** @jsx jsx */ // ↑これをemotion 使うcomponent のファイルに毎回書く import { jsx, css } from "@emotion/core"; export const SomeComponent = () => ( <div css={css`color: blue;`}></div> ); 19
確認する typescript+parcel なら特に設定はいらない parcel src/index.html 20
おわり 21