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
770
[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
740
[tamarubykaigi01]こわくないDSL
ken3ypa
5
2.9k
[tama.rb#13]Hash#to_procについて
ken3ypa
0
63
[正規表現]メタ文字をはじめから丁寧に
ken3ypa
2
290
Other Decks in Programming
See All in Programming
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
CSC307 Lecture 05
javiergs
PRO
0
210
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
유연한 Composable 설계
l2hyunwoo
0
380
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
The Cult of Friendly URLs
andyhume
75
5.9k
Building Applications with DynamoDB
mza
89
5.8k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Faster Mobile Websites
deanohume
303
30k
Practical Orchestrator
shlominoach
185
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
A designer walks into a library…
pauljervisheath
201
24k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Design by the Numbers
sachag
277
18k
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ͳϑϨʔϜϫʔΫͰ͢ ؾʹͳΔํͥͻ͓ࢼ͍ͩ͘͠͞ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠