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

CSSモジュール ― 明るい未来へようこそ / techcamp02

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Yuichi Goto Yuichi Goto
August 14, 2016
Technology
260
0

CSSモジュール ― 明るい未来へようこそ / techcamp02

第2回開発合宿（2016/08/14）

Avatar for Yuichi Goto

Yuichi Goto

August 14, 2016

More Decks by Yuichi Goto

See All by Yuichi Goto
[Teaser] Type-Safe Lightweight DDD with Effect Schema
Avatar for Yuichi Goto yasaichi
3
590
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
Avatar for Yuichi Goto yasaichi
1
1.7k
[EN] Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
3
490
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
9
2.5k
あるRailsエンジニアがビジネスリーダーに転身するまで
Avatar for Yuichi Goto yasaichi
9
3.4k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
Avatar for Yuichi Goto yasaichi
50
23k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
Avatar for Yuichi Goto yasaichi
38
22k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
Avatar for Yuichi Goto yasaichi
1
500
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
Avatar for Yuichi Goto yasaichi
147
96k

Other Decks in Technology

See All in Technology
The Agent Builder Loop from Daily Work to OSS
Avatar for みのるん minorun365
PRO
3
120
【視聴者参加型！】AWSセキュリティアンチパターンクイズ
Avatar for Shun Yoshie syoshie
1
490
AIで仕事のやり方を変える
Avatar for Kentaro Matsumoto matsu7874
3
1k
「重なり」は迎える側がつくる ― 人もAIエージェントも歓迎するプロダクトエンジニアリング ―
Avatar for Go Akazawa go0517go
PRO
0
280
10分で知る最近のOmarchy
Avatar for komagata komagata
0
240
薬剤師（ドメインエキスパート）と一緒に育てる薬局向けAIアシスタント
Avatar for KAKEHASHI kakehashi
PRO
2
140
20260912_スクフェス三河
Avatar for hikari kgnkhkr
0
270
2026-09-10 【Snowflake World Tour Tokyo 2026】dbt Core と Snowflake で実現する多層的なデータガバナンス / Multi-Layered Data Governance Powered by dbt Core and Snowflake
Avatar for civitaspo civitaspo
0
310
GoにおけるFFIのこれまでとこれから
Avatar for Masaaki Goshima goccy
5
2.3k
enechainの内製セルフサービスプラットフォーム
Avatar for Tomoya Usami hiyosi
0
150
『止めない』を設計する — 制約の中で、事業の根幹を支える判断
Avatar for Terry hiroyaterui
0
260
Amazon Quick on DesktopがIAM Identity Centerで動かない理由
Avatar for YukiOgawa yukiogawa
0
150

Featured

See All Featured
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
820
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
232
55k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
840
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
240
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
510
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
570
Fireside Chat
Avatar for paigeccino paigeccino
43
4k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310

Transcript

  1. CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ୈ2ճ։ൃ߹॓੒Ռൃදɹ@yasaichi

  2. ൃදߏ੒ 1. എܠͱ໨త 2. ख๏֓ཁ 3. ࣮ࡍʹ࢖ͬͯΈͨ 4. ॴײ

  3. എܠͱ໨త

  4. എܠ: CSS Modules • ҎԼΛಡΜͰCSS ModulesʹڵຯΛ࣋ͭ • State of React

    and CSS • CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ʢ͜ͷεϥΠυͷλΠτϧͷݩωλʣ • Modular CSS with React

  5. CSSʹରͯ͠ͷΞϯςφ͕
 ߴ·ͬͨঢ়ଶʹ

  6. എܠ: PostCSS • ͞ΒʹҎԼΛಡΜͰPostCSSͱ͍͏ಈ͖͕͋Δ ͜ͱΛ஌Δ • morishitterͷCSSͷॻ͖ํʢ2016೥Նʣ • [ৄղ] ϞμϯCSS:

    ه๏ɼελΠϧͷ؅ཧɼ PostCSSʢWEB+DB PRESS Vol.93ʣ

  7. ࠓճͷ߹॓ͷ໨త • ର৅ɿhttps://github.com/yasaichi/ minesweeper-reactjs • CSS ModulesΛ࢖ͬͯCSSΛॻ͍ͯΈΔ • PostCSSΛ࢖ͬͯCSSͷ "τϥϯεύΠϧ"

    ʢCSS to CSSʣΛମݧ͢Δ

  8. ख๏֓ཁ

  9. CSS Modules • CSSͷ৽͍͠ઃܭ֓೦ or ࢦ਑ • ϧʔϧηοτͷӨڹൣғΛίϯϙʔωϯτ
 ୯ҐͰดͯ͡͠·͓͏ͱ͍͏ͷ͕ओͳߟ͑ •

    BEMͳͲͷઃܭख๏Λ࢖Θͣʹࡶʹॻ͍ͯ΋ ·͋·͋ഁ୼͠ʹ͍͘CSS͕ಘΒΕΔ

  10. αϯϓϧ import React from 'react'; import styles from './style.css'; export

    default class Logo extends React.Component { render() { return <div className={styles.square} />; } }; /* style.css */ .square { width: 200px; height: 200px; }

  11. build͢Δͱ ._1uhuc_qi65HzMlHqmlWStu { width: 200px; height: 200px } <!DOCTYPE html>

    <html> <body> <div id="container"> <div data-reactroot="" class="_1uhuc_qi65HzMlHqmlWStu"></div> </div> </body> </html> React ComponentʹରԠ ͢Δclass͕ద༻͞ΕΔ άϩʔόϧۭؒͰҰҙͳ Ϋϥε໊ʹม׵͞ΕΔ

  12. PostCSS • "PostCSS is a tool for transforming styles with

    JS plugins"ʢGitHubͷϦϙδτϦΑΓʣ • ௒ͬ͘͟Γݴ͏ͱCSSʹ͓͚ΔBabel • Babelͱಉ༷ʹ͞·͟·ͳϓϥάΠϯ͕͋Δ
 ʢe.g. Autoprefixer, cssnext ͳͲʣ

  13. ࣮ࡍʹ࢖ͬͯΈͨ

  14. ߹॓Ҏલͷminesweeper • Ұ೥લ͘Β͍ʹReactͷษڧ͕ͯΒ࡞ͬͨ • React (0.13.3) • Gulp • Browserify

    • Radium

  15. σϞʢͦͷ1ʣ

  16. ߹॓ޙͷminesweeper • 2016೥ͬΆ͍ײ͡ʹΞοϓσʔτ • React (15.3.0) • npm-scripts • webpack

    • CSS Modules + cssnext + PostCSS

  17. σϞʢͦͷ2ʣ

  18. ॴײ

  19. ໌Δ͍ະདྷʁ • CSSͷʢະདྷͷʣඪ४͕ऑ͍ͷͰॻ͍͍ͯͯ
 ਏ͍৔໘͕͋Δʢe.g. eachతͳͷ࢖͍͍ͨʣ • σόοάͷͨΊͷ͍͍࢓૊Έ͕·ͩͳ͍ • ݪ୊͸”CSS Modules:

    Welcome to the Future” -> ະདྷ͕໌Δ͍ͱ͸Ұݴ΋ʢry

  20. ͓ർΕ͞·Ͱͨ͠ʂ