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
[Tama.rb年忘れLT会]レールに乗ったCSSコーディング
Search
ken3ypa
December 27, 2020
Programming
1
800
[Tama.rb年忘れLT会]レールに乗ったCSSコーディング
ken3ypa
December 27, 2020
Tweet
Share
More Decks by ken3ypa
See All by ken3ypa
[Rails Girls Tokyo 13th]株式会社万葉 スポンサーLT
ken3ypa
0
800
[tamarubykaigi01]こわくないDSL
ken3ypa
5
3.2k
[tama.rb#13]Hash#to_procについて
ken3ypa
0
93
[正規表現]メタ文字をはじめから丁寧に
ken3ypa
2
310
Other Decks in Programming
See All in Programming
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
2
1.6k
AIコーディングAgentとの向き合い方
eycjur
0
250
Swift Updates - Learn Languages 2025
koher
1
370
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
100
私の後悔をAWS DMSで解決した話
hiramax
4
180
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
110
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
Namespace and Its Future
tagomoris
6
690
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
690
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
410
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Cult of Friendly URLs
andyhume
79
6.6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
A better future with KSS
kneath
239
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
Ϩʔϧʹͬͨ$44ίʔσΟϯά !LFOZQB 3BJMTʷ5BJMXJOE$44Ͱ !5BNBSCΕ-5ձ
Έͳ͞ΜɺࠓҰ͓ؒർΕ༷Ͱͨ͠ʂ
ͲΜͳҰؒΛա͝͞Ε·͔ͨ͠ʁ
΅͘͜Μͳײ͡Ͱͨ͠
None
ˢ͜ͷลͰ$44ʹ͑Β͍ۤ࿑ͨ͠ͷͰ ࠓ$44ʹ͍͓͍ͭͯͨ͠ͱࢥ͍·͢
࣍ ͖͔͚ͬ 5BJMXJOE$44ͱ 5BJMXJOEʷ3BJMTͰ
4DBGGPMEΞϓϦΛ࡞ͬͨྫ ࠓ͓͢͠Δ͜ͱ
࣍ 5BJMXJOE$44ΛݱͰ͓ͬͨ ʢ͍͔͍͍ͭͨʣ ֓ཁҎ্ͷ5BJMXJOE$44ͷ͓͠ ܥͷࠩͱ͔ɺ1VSHF$44ͱ͔
ࠓ͓͠͠ͳ͍͜ͱ
ͱ͍͏Θ͚Ͱ͍͖ͬͯ·͠ΐ͏ʂ
͖͔͚ͬ w SBJMTOFX͔Β։࢝ɻϑϩϯτͷॳظઃఆɾ࣮αʔόʔαΠυ͕࣮ࢪ w σβΠφʔͷํ$44ॻ͔ͣɺσβΠϯΧϯϓͷ࡞ͷΈ w $44ʹݟͷ͋Δϝϯόʔɺ΄΅օແ w ͍ΘΏΔʮ#PPUTUSBQषʯΛආ͚ΔͨΊɺ$44ϑϨʔϜϫʔΫར༻ͤͣ w
Α͘͏σβΠϯύʔπελΠϧΨΠυΛ࡞ͯ͠ཧ w ϨεϙϯγϒରԠ ͖͔͚ͬɿ$44͍ͬͺ͍͕ΜͬͨϓϩδΣΫτ֓ཁ
͖͔͚ͬ $44ͷॻ͖ํͳΜΘ͔ΒΜʜ #&.ͬͯͳΜ͡Όʜ ϝσΟΞΫΤϦʜ$44ઃܭʜʁ ͦ͏͍͏ͷ͋Δͷ͔ʜ ʙҊ݅ॳظʙ
͖͔͚ͬ 3BJMTͷίʔυҰߦॻ͍ͯͶ͑ʜ ͳΜͳΒελΠϧΨΠυͯ͠Ͷ͑ʜ ͬͱ͏·͘Εͳ͍ͷ͔ʜ ʙҊ݅ʹೖͬͯϲ݄ޙʙ
ʙ·͋ͦΜͳ͜ΜͳͰ৭ʑʙ
͖͔͚ͬ ఆΑΓσβΠϯ·ΘΓʹ͕ ͔͔ͬͯ͠·ͬͨʜ ख͠Կൃੜͨ͠͠ʜ ͬͱɺ͍͍ײ͡ʹ͔͚Δํ๏ ͳ͍ͷ͔ʜ ʙҊ݅ऴྃޙʙ
͖͔͚ͬ ͓ʜ͜Εʜ ʙҊ݅ऴྃޙʙ
None
5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ 5BJMXJOE$44͝ଘͷํɺ৮ͬͨ͜ͱͷ͋Δํ ͲΕ͙Β͍͍Βͬ͠Ό͍·͔͢ʁ
5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ w ϢʔςΟϦςΟϑΝʔετͷ$44ϑϨʔϜϫʔΫ w #PPUTUSBQͷΑ͏ͳίϯϙʔωϯτܥͷΫϥε༻ҙ͞Ε͓ͯΒͣɺͦΕͧΕͷ$44ϓϩύςΟͱ ʹରԠͨ͠ɺϢʔςΟϦςΟΫϥε͕ఏڙ͞Ε͍ͯΔ 5BJMXJOE$44ͱ
5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ
#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ #PPUTUSBQͩͱ
#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ 5BJMXJOE$44ͩͱ
#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ 5BJMXJOE$44ͩͱ
ͪͳΈʹͦͷଞ༗໊ͳ$44ϑϨʔϜϫʔΫͱ ͷൺֱ #PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ ଞͷओཁ$44ϑϨʔϜϫʔΫͱͷൺֱ
#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ w #PPUTUSBQ w طʢίϯϙʔωϯτʣ͕ఏڙ͞Ε͍ͯΔ w ϢʔςΟϦςΟఏڙ͞Ε͍ͯΔ͕ɺ5BJMXJOE$44΄Ͳଟ͘ͳ͍ w ηϚϯςΟοΫͳDMBTTΛϕʔεʹࢦఆ͢Δ
w 5BJMXJOE$44 w ίϯϙʔωϯτఏڙ͞Ε͍ͯͳ͍ w ϢʔςΟϦςΟͷΈ͕ఏڙ͞Ε͓ͯΓɺ΄΅શͯͷ$44ͷϓϩύςΟΛཏ w ΠϯϥΠϯελΠϧͷΑ͏ͳܗࣜͰDMBTTʢϢʔςΟϦςΟʣΛ༩͢Δ
#PPUTUSBQͱͷൺֱ 5BJMXJOE$44ͱ w ֦ுੑ͕ߴ͍ w ࣗલͰελΠϧΛߏங͍ͯͨ͘͠Ίɺ͍ΘΏΔʮ#PPUTUSBQषʯͷ͠ͳ͍ύʔπ͕ ࡞Ͱ͖Δ w ෆཁͳελΠϧ͕༩͞Εͳ͍ͨΊɺελΠϧͷ্ॻ͖Λ͢Δඞཁ͕ͳ͘ͳΔ w
Α͘͏ελΠϧίϯϙʔωϯτͱͯ͠Γग़͢ࣄ͕Ͱ͖ɺ࠶ར༻Ͱ͖Δ w ʢͪ͜Βͷػೳ͋ͱͰ࣮ྫ͓ݟͤ͠·͢ʣ ϢʔςΟϦςΟϑΝʔετͰ͋Δར
ΠϯϥΠϯͱͷൺֱ 5BJMXJOE$44ͱ ͋Εɺ͡Ό͋ΠϯϥΠϯελΠϧͱԿ͕ҧ͏ͷʁ ͪͳΈʹʮΠϯϥΠϯελΠϧʯͬΆ͍ͱݴ͍·͕ͨ͠ʜ
ΠϯϥΠϯͱͷൺֱ 5BJMXJOE$44ͱ w IPWFSɺGPDVTͳͲͷΠϕϯτΛઃఆՄೳ w ϝσΟΞΫΤϦΛઃఆՄೳ w TNQYNEQYMHQYYMQY w ϕϯμʔϓϨϑΟΫεͷࢦఆ͕ෆཁ
ΠϯϥΠϯελΠϧͱͷൺֱ
ΠϯϥΠϯͱͷൺֱ 5BJMXJOE$44ͱ w XJEUI QBEEJOH DPMPSͳͲʹ͍ͭͯ 5BJMXJOEଆͰఏڙ͞Ε͍ͯΔϢʔςΟ ϦςΟΛར༻͠ɺ༩͢Δํࣜ ΠϯϥΠϯελΠϧͱͷൺֱ
5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ w 5BJMXJOE$44ͱϢʔςΟϦςΟϑΝʔετͷ$44ϑϨʔϜϫʔΫ w ϢʔςΟϦςΟͷΈΛఏڙ͠ɺ w Ϩγϙϯγϒʹهड़Ͱ͖ w ΠϯϥΠϯελΠϧͰίʔσΟϯά͕Մೳͳ֦ுੑͷߴ͍ϑϨʔϜϫʔΫ
·ͱΊΔͱ
5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ ʜͰɺ͜Ε͕Ͳ͏ศརͳͷʁ ·ͱΊΔͱ
5BJMXJOE$44ུ֓ 5BJMXJOE$44ͱ ࣮ࡍͷίʔυΛݟͯΈ·͠ΐ͏ ࠓճͷλΠτϧ
Ϩʔϧʹͬͨ$44ίʔσΟϯά 3BJMTʷ5BJMXJOE$44Ͱ
ίʔυ࣮ྫ 5BJMXJOEʷ3BJMT ը໘ڞ༗Λͯ͠ίʔυΛ֬ೝ͍͖ͯ͠·͢ IUUQTHJUIVCDPNLFOZQBSBJMT@PO@UBJMXJOE@DTT
ײ 5BJMXJOEʷ3BJMT w $44ϑΝΠϧΛ࡞ΒͣϏϡʔϑΝΠϧͷΈʹूதͰ͖ΔͨΊૣ࣮͘Ͱ͖Δ w طଘελΠϧͷ্ॻ໊͖લۭؒͷিಥΛߟ͑ͳͯ͘ྑ͍ w $44Λ͍ͬͯΕΠϯϓοτʢଞͷ'8ͱൺʣ࠷খݶͰࡁΉ w ެࣜ)1ͷݕࡧϖʔδ͕༏ल
ίʔσΟϯάͨ͠ࡍͷײ
ײ 5BJMXJOEʷ3BJMT ैདྷ $44ઃܭ ࣮ ࠷ॳʹઃܭ͢Δඞཁ͕͋Γɺ࣮ͦͷޙ
ײ 5BJMXJOEʷ3BJMT 5BJMXJOE$44ͩͱ $44ઃܭ ࣮ $44ઃܭɾ໋໊ͷϑΣʔζΛޙʹ࣋ͬͯ͘Δ͜ͱ͕Ͱ͖Δ
ײ 5BJMXJOEʷ3BJMT w ηϚϯςΟοΫͰͳ͍ w )5.-ͱ$44͕ີ݁߹ɻDMBTTΛݟͨͱ͖ʹʮͦΕ͕Կͳͷ͔ʯͷผࠔ w ϐΫηϧύʔϑΣΫτʹͳΒͳ͍ w 5BJMXJOE͕ఏڙ͍ͯ͠ΔϢʔςΟϦςΟͷ੍Λड͚Δ
w ͦͦ$44͕ॻ͚ͳ͍ͱ࣮Ͱ͖ͳ͍ w ίϯϙʔωϯτϕʔεͷ'8ͱҟͳΓɺ$44ͷࣝ.645Ͱඞཁ σϝϦοτ
ײ 5BJMXJOEʷ3BJMT w ಠࣗͷίϯϙʔωϯτελΠϧ͕ඞཁ w '8Λ֦ு͢ΔΑ͏ͳελΠϧͰؒʹ߹Θͳ͍έʔε w $44ઃܭʹݟɾܦݧͷͳ͍։ൃϝϯόʔ͕ຆͲ w ॳΛग़͍ͨ͠ɺ$44ઃܭޙճ͠ʹ͍ͨ͠
͏·͘ϋϚΓͦ͏ͳॴɿྫ͑ԼهͷΑ͏ͳϓϩδΣΫτ
ײ 5BJMXJOEʷ3BJMT w ཧը໘͚ࣾπʔϧͳͲ#PPUTUSBQषͷ͢ΔσβΠϯͰͳ͍ ߹ίϯϙʔωϯτϑΝʔετͷ'8 w ͦΕҎ֎ͷ߹5BJMXJOE$44Λੵۃతʹ͍͖͍ͬͯͨؾ࣋ͪ ݸਓతʹ
͓ΘΓʹ 5BJMXJOEʷ3BJMT Ϩʔϧʹͬͨ։ൃΛ͢Δ͜ͱͰ ྑ͍ϓϥΫςΟεʹԊͬͨ։ൃ͕ग़དྷɺ ૉૣ͘ՁΛಧ͚Δ͜ͱ͕Ͱ͖Δ'8 ͱ͜ΖͰ 3BJMT$P$ $POWFOUJPO0WFS$POGJHVSBUJPO Λॏࢹͨ͠ϑϨʔϜϫʔΫ IUUQTEIIELSBJMTJTPNBLBTFIUNM
͓ΘΓʹ 5BJMXJOEʷ3BJMT 5BJMXJOE·ͨɺنʹPNBLBTF͢Δ͜ͱͰ Ϩʔϧʹͬͨ։ൃ͕ग़དྷΔͰҰॹ IUUQTEIIELSBJMTJTPNBLBTFIUNM
͓ΘΓʹ 5BJMXJOEʷ3BJMT ʮਓྨʹ$44ૣ͗ͨ͢ʯͱΑ͘ݴΘΕ·͕͢ ਓྨ͕$44ʹ͍ͭͨ͘Ίͷ5BJMXJOE ͍෩ Λ ఏڙͯ͘͠ΕΔͷͰͱʜظ͍ͯ͠·͢
͓ΘΓʹ 5BJMXJOEʷ3BJMT IUUQTUBJMXJOEDTTKBFOUBQBQQ ܥͷϝδϟʔόʔδϣϯΞοϓ ެࣜαΠτͷຊޠԽߦΘΕ͓ͯΓ ࠓͱͯ)PUͳϑϨʔϜϫʔΫͰ͢ ؾʹͳΔํͥͻ͓ࢼ͍ͩ͘͠͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠