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
790
[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
780
[tamarubykaigi01]こわくないDSL
ken3ypa
5
3.2k
[tama.rb#13]Hash#to_procについて
ken3ypa
0
85
[正規表現]メタ文字をはじめから丁寧に
ken3ypa
2
310
Other Decks in Programming
See All in Programming
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
400
Agent Rules as Domain Parser
yodakeisuke
1
440
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
140
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.8k
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
150
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
330
コンポーネントライブラリで実現する、アクセシビリティの正しい実装パターン
schktjm
1
710
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
130
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
1k
事業戦略を理解してソフトウェアを設計する
masuda220
PRO
18
5.4k
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.7k
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6.1k
Site-Speed That Sticks
csswizardry
9
610
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
A better future with KSS
kneath
239
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Embracing the Ebb and Flow
colly
85
4.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Agile that works and the tools we love
rasmusluckow
329
21k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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ͳϑϨʔϜϫʔΫͰ͢ ؾʹͳΔํͥͻ͓ࢼ͍ͩ͘͠͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠