Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

CSS in JS、React モダンフロントエンドのデザイン課題

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for A_ito A_ito
January 03, 2022
Programming
120
1

CSS in JS、React モダンフロントエンドのデザイン課題

主にReactのデザインまわりの課題と対策、Exampleを紹介する

デザイナーなど少しだけフロントを書く人向け

Avatar for A_ito

A_ito

January 03, 2022

Other Decks in Programming

See All in Programming
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
28
33k
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
140
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
570
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.6k
phperだってパンチカードでコーディングしたい
Avatar for hideki kinjyo o0h
PRO
0
350
Performance Optimization With LLMs
Avatar for xLeitix xleitix
0
150
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
280
Workers Cache を知る
Avatar for syumai syumai
0
370
[2026-10-14](C)Re:ゼロから始める異世界生活〜始まりの終わりと終わりの始まり〜
Avatar for tosite tosite
0
110
C#の現在地 進化の歴史と、AI時代の.NET Everywhere
Avatar for Yoshifumi Kawai neuecc
5
5.2k
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
Avatar for Ryo Shindo rshindo
0
190
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
800

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Music & Morning Musume
Avatar for Bryan Veloso bryan
48
7.4k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
600
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.4k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
400
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
10
1.2k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
1
400
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
2.2k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
3
3.9k

Transcript

  1. React Design KEY / INTRO Front-End Design on JS ENJIN

    LT

  2. Design Ops KEY / THEME ENJIN LT 現在のフロントエンドの デザイン手法

  3. I AM KEY / WHO ENJIN LT 
 デザインエンジニア
 伊東アツシ

    
 朝霧デザイン
 Twi: AsagiriDesign


  4. WORKS KEY / Job ENJIN LT 
 主にフロントエンドとデザインの架け 橋、または両立を設計/実装
 


  5. HOW KEY / HOW ENJIN LT React環境のデザイン開発って どうやってるの？

  6. RESULT KEY / HOW ENJIN LT あの手この手で何とかやってます 一言では表せない

  7. BUT KEY / ISSUE ENJIN LT 解決したい課題と 意図は一貫していつでも同じ

  8. BUT KEY / CSS ENJIN LT なんでCSSすぐに...

  9. BUT KEY / WANT ENJIN LT CSSもJSみたいになってほしい

  10. BUT KEY / WANT ENJIN LT お兄ちゃん うちJSでCSS書いてみてん

  11. CSS in JS KEY / CSS-IN-JS ENJIN LT CSS in

    JSの基本的な書き方 各ライブラリの違いを紹介します

  12. Code </> KEY / CSS-IN-JS ENJIN LT 実演/ライブコーディング URL https:/

    /codesandbox.io/s/agit ated-voice-ol9hg

  13. Core KEY / POINT ENJIN LT 属人化させない書き方 運用性の考慮 導入前に捨て方も考えておく