Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for Yuichi Goto Yuichi Goto
August 14, 2016
Technology
0
240

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

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

Avatar for Yuichi Goto

Yuichi Goto

August 14, 2016
Tweet

More Decks by Yuichi Goto

See All by Yuichi Goto
[Teaser] Type-Safe Lightweight DDD with Effect Schema
Avatar for Yuichi Goto yasaichi
3
490
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
Avatar for Yuichi Goto yasaichi
1
1.6k
[EN] Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
3
420
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
Avatar for Yuichi Goto yasaichi
9
2.4k
あるRailsエンジニアがビジネスリーダーに転身するまで
Avatar for Yuichi Goto yasaichi
9
3.2k
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
480
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
Avatar for Yuichi Goto yasaichi
146
94k

Other Decks in Technology

See All in Technology
AWSの資格って役に立つの？
Avatar for Hiroki Takatsuka tk3fftk
2
340
Abuse report だけじゃない。AWS から緊急連絡が来る状況とは？昨今の攻撃や被害の事例の紹介と備えておきたい考え方について
Avatar for kazzpapa3 kazzpapa3
1
720
今のWordPress の制作手法ってなにがあんねん？(改) / What’s the Deal with WordPress Development These Days?
Avatar for tbshiki tbshiki
0
460
オレ達はAWS管理をやりたいんじゃない！開発の生産性を爆アゲしたいんだ！！
Avatar for wkm2 wkm2
4
530
プラットフォームエンジニアリングはAI時代の開発者をどう救うのか
Avatar for Kazuto Kusama jacopen
5
2.9k
OCI技術資料 : コンピュート・サービス 概要
Avatar for Oracle Cloud Infrastructure ソリューション・エンジニア ocise
4
54k
20260311 技術SWG活動報告（デジタルアイデンティティ人材育成推進WG Ph2 活動報告会）
Avatar for OpenID Foundation Japan oidfj
0
350
わからなくて良いなら、わからなきゃだめなの？
Avatar for kota oue kotaoue
1
360
AIエージェント、 社内展開の前に知っておきたいこと
Avatar for oracle4engineer oracle4engineer
PRO
2
140
Claude Codeが爆速進化してプラグイン追従がつらいので半自動化した話 ver.2
Avatar for ryu rfdnxbro
0
540
非情報系研究者へ送る Transformer入門
Avatar for Ryo Ishiyama rishiyama
11
7.5k
AI実装による「レビューボトルネック」を解消する仕様駆動開発（SDD）/ ai-sdd-review-bottleneck
Avatar for Rakus_Dev rakus_dev
0
140

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
290
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
290
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
320
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.2k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k

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. ͓ർΕ͞·Ͱͨ͠ʂ