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

Sprockets CSSもやめる なぜ / Why stop using Sprockets...

fsubal
May 15, 2020

Sprockets CSSもやめる なぜ / Why stop using Sprockets for CSS too

2020-05-15のピクシブ社内勉強会の資料です

fsubal

May 15, 2020
Tweet

More Decks by fsubal

Other Decks in Programming

Transcript

  1.  Ɣ 6EMPW䛻䛚䛔䛶䚸'77䜒%WWIXTMTIPMRI䜢䜔䜑䜛䛸ᤖ䜛䛸䛔䛖ヰ ż ⏬ീ䛿䜔䜑䜜䛶䛺䛔䛡䛹䚸ETTEWWIXWWX]PIWLIIXW䜢䜔䜑䛯ヰ䜢䛧䜎䛩 Ɣ 䝁䞁䝫䞊䝛䞁䝖䛸䝔䞁䝥䝺䞊䝖䛜୧᪉䛒䜛䝃䜲䝖䛷䛿䚸ኚᩘ䛾ඹ᭷䛜ၥ㢟䛻䛺䜛 ż ඲㒊;IFTEGO䛻஌䛳䛶䛔䜛䛸䛭䛾䜈䜣䛜⪃䛘䜔䛩䛟䛺䜚䛭䛖 Ɣ

    '77䛾ኚᩘ䜢䛱䜓䜣䛸䛧䛯䛡䜜䜀䚸PMFWEWWWEWWGVEMPW䜒䜔䜑䛯䜋䛖䛜Ⰻ䛔 ż HEVXWEWW䛾䝰䝆䝳䞊䝹䝅䝇䝔䝮䚸'77:EVMEFPIW䚸'77MR.7䛺䛹Ə ż ௒ᅇ䛿HEVXWEWW䜈䛾⛣⾜䝯䜲䞁䛷ヰ䛧䜎䛩 ヰ䛩䛣䛸
  2.  Ɣ ௨ୗ䚸6IEGX䛾ሙྜ䛾ヰ ż .7<䛛䜙'77䛷䝇䝍䜲䝹䜢ᙜ䛶䜛᪉ἲ䛻䛿䛔䛟䛴䛛䛒䜛 Ŷ KPSFEP䛺䝇䝍䜲䝹䛾䜽䝷䝇ྡ HMZGPEWW2EQI!ƉLSKIƉ" Ŷ '771SHYPIW䛻䜘䜛䜽䝷䝇ྡ

    HMZGPEWW2EQI!_WX]PILSKIa" Ŷ '77MR.7䠄WX]PIHGSQTSRIRXW䠅GSRWX,SKI!WX]PIHHMZDD Ɣ 䠄୍ᛂ䚸௨㝆䛾㆟ㄽ䛿:YI䛾7*'䛷WGSTIHWX]PI䜢౑䛳䛶䛔䜛䜿䞊䝇䛷䜒ᙜ䛶䛿䜎䜛䛿 䛪䠅 䝁䞁䝫䞊䝛䞁䝖䛾䝇䝍䜲䝹䜢䛹䛖䛩䜛䛛
  3.  Ɣ ྂ௦䠄ᖺ㡭䠅䛿ETTEWWIXW䛻䛒䜛'77䛾䜽䝷䝇䜢.7<䛛䜙࿧䜣䛷䛔䛯 ż 䛫䛳䛛䛟䝁䞁䝫䞊䝛䞁䝖䛻㛢䛨䛶䜛䛾䛻䚸 '77䛾䜽䝷䝇ྡ䛜䜾䝻䞊䝞䝹䛰䛸䝫䞊䝍䝡䝸 䝔䜱䝊䝻䛨䜓䜣䚸䜏䛯䛔䛺ⱞ䛧䜏䛜䛒䛳䛯䠄௒䜒ᑡ䛧ṧ䛳䛶䜛䠅 Ɣ ୰ୡ䠄ᖺᚋ༙䠅䛻GWWPSEHIV䛜ᑟධ䛥䜜䛯 ż

    䛜䚸䜽䝷䝇䛾䝝䝑䝅䝳໬䛿䛺䛧䠄PSGEP-HIRX2EQIƈ?PSGEPAƉ䛰䛳䛯䠅䠄䟿䠛䠅 Ɣ ㏆ୡ䠄ᖺ௨㝆䠅䛻䜘䛖䜔䛟䛱䜓䜣䛸䛧䛯'771SHYPIW䛻䛺䛳䛯䠄䛧䜎䛧䛯䠅 ż 䝁䞁䝫䞊䝛䞁䝖䝻䞊䜹䝹䛺'77䛾᫬௦䛻䛺䛳䛯 TM\MZ*%'836=䛿䛹䛖䛧䛶䛝䛯䛛
  4.  Ɣ TM\MZᮏయ䛾74%໬䚸䝕䝄䜲䝘⤌⧊䛾ᡂ❧䛻క䛔䚸඲♫ⓗ䛺䝕䝄䜲䞁䜺䜲䝗䝷䜲䞁䛾ᩚ ഛ 䛾ᶵ㐠䛜ฟ䛿䛨䜑䛯 ż ᯾8)',*)7䛷䜒ႅ䛳䛶䜎䛧䛯䛽䟿 Ɣ ᙜ↛⮬ศ䛯䛱䠄TM\MZ*%'836=䠅䜒䛔䛪䜜↓⦕䛷䛿䛺䛟䛺䜛Ə Ɣ

    䛸䛣䜝䛷䚸⤫୍ⓗ䛺䝕䝄䜲䞁䜺䜲䝗䝷䜲䞁䛻஌䜛䛯䜑䛻䛿䚸 '77䛾㈨⏘䛜ྠ䛨䝺䞊䝹䛻 ஌䛳䛶䛔䜛䜉䛝䛺䛾䛷䛿䠛 Ɣ 7TVSGOIXW%WWIX4MTIPMRIWEWWGVEMPWᮏ᱁ⓗ䛻↓⌮䛷䛿Ə䠛䠛䠛 䝕䝄䜲䞁䜺䜲䝗䝷䜲䞁䛾ண඙
  5.  Ɣ WEWWGVEMPW䜢䜔䜑䜛 ż WEWW䛿䜔䜑䛺䛔䚸୍᪦඲䛶WEWWSR[IFTEGO䛻䛩䜛 ż 䛜䚸WEWW䝣䜯䜲䝹䛿䜔䜑䛶WGWW䝣䜯䜲䝹䛻䛩䜛 Ɣ RSHIWEWW䜢䜔䜑䜛 ż

    PMFWEWW䛾ᶵ⬟㛤Ⓨ䛜άⓎ䛷䛿䛺䛔䛾䛷䚸 HEVXWEWW䛻䛩䜛 Ɣ '77:EVMEFPIW䜢ᐇ㦂ⓗ䛻౑⏝䛧䚸ኚᩘ䛾ඹ᭷䛻ຠ䛟䛛䜢⪃䛘䜛 䜔䜛䛣䛸
  6.  Ɣ WEWWGVEMPW䜢౑䛳䛶䛔䜛䛸䚸MQEKIYVP 䛸䛔䛖⊂⮬䛾WEWW㛵ᩘ䛜⏕䛘䛶䛟䜛 Ɣ 䛣䜜䛻䜘䜚䚸FEGOKVSYRHMQEKI䛛䜙ETTEWWIXWMQEKIWෆ䛾⏬ീ䛜࿧䜃ฟ䛫䜛 Ɣ ETTEWWIXW䛛䜙'77䜢ฟ䛧䛶[IFTEGO䛻㍕䛫䛯䛔䛜䚸䛣䜜䛜䛭䛾䜎䜎䛰䛸 [IFTEGO䛷 ゎỴ䛷䛝䛪䝡䝹䝗䛷䛝䛺䛔

    ż ᐇ䜢ゝ䛖䛸䚸YVP ┦ᑐ䝟䝇 䛺䜙[IFTEGO䛷ゎỴ䛷䛝䜛䛾䛷䚸MQEKIYVP඲㒊䜔䜑 䛶┦ᑐ䝟䝇䛻䛩䜜䜀Ⰻ䛔䜣䛰䛡䛹䚸䛸䛶䜒㠃ಽ䛟䛥䛔 Ɣ MQEKIYVP 䜢WEWWSR[IFTEGO䛷ゎỴ䛷䛝䜛௙⤌䜏䜢స䜝䛖 MQEKIYVP 䜢[IFTEGO䛷䝡䝹䝗䛧䛯䛔
  7.  Ɣ WEWW䛛䜙䜾䝻䞊䝞䝹䛻࿧䜃ฟ䛫䜛㛵ᩘ䜢 .7䛷ᐃ⩏䛧䛶䚸䝡䝹䝗᫬䛻✺䛳㎸䜐ᶵ⬟ ż RSHIWEWW䛸HEVXWEWW୧᪉䛻䛒䜛 Ɣ 䛥䛳䛝⤂௓䛧䛯RSHIWEWWEWWIXJYRGXMSR䛿䚸6EMPW䜔GSQTEWW䛾MQEKIYVP 䛻┦ᙜ 䛩䜛䜒䛾䜢RSHIWEWWྥ䛡䛻䝫䞊䝖䛧䛯RTQ䝰䝆䝳䞊䝹

    ż 䛣䜜䜢MQTSVX䛧䛯⤖ᯝ䜢䚸WEWW䛾JYRGXMSRW䛻Ώ䛩䛣䛸䛜᝿ᐃ䛥䜜䛶䛔䜛 ż ୍ᗘHEVXWEWW䛻୧ᑐᛂ䛻䛩䜛46䜢ฟ䛭䛖䛸䛧䛯䛜ୖᡭ䛟⾜䛛䛺䛛䛳䛯 ż 䛛䜙HEVXWEWWᑐᛂ䝰䝆䝳䞊䝹స䛳䛯䜋䛖䛜᪩䛔䛸ᛮ䛳䛯 WEWW䛾JYRGXMSRWᶵ⬟
  8.  Ɣ WEWW䛾$MQTSVX䛿ᇶᮏⓗ䛻䝣䜯䜲䝹⤖ྜ ż ྠ䛨䝣䜯䜲䝹䜢ᅇ$MQTSVX䛩䜛䛸ᅇGSRGEX䛧䛶㔜」䛸䛛䛜ᖹẼ䛷㉳䛣䜛 Ɣ 䜎䛯䚸䝔䞊䝬䜹䝷䞊䜢ᢅ䛖㝿䛻䚸ኚᩘ䜢≉ᐃ䛾㡰␒䛷 $MQTSVX䛧䛶ୖ᭩䛝䚸䜏䛯䛔䛺἞Ᏻ 䛾ᝏ䛔タィ䛻⧅䛜䜚䜔䛩䛔 ż

    $MQTSVXƈGSPSVƉ䛧䛯᫬䛻ྡ๓✵㛫䜒䛴䛛䛪䚸඲㒊䜾䝻䞊䝞䝹䛻ᒎ㛤䛥䜜䜛 Ɣ $YWI䛿䛣䛾㎶䛾ၥ㢟䜢ゎỴ䛧䛯䛂䜎䛸䜒䛺䛃䝰䝆䝳䞊䝹䝅䝇䝔䝮 HEVXWEWW䛾Ⰻ䛔ᶵ⬟$YWI
  9.  Ɣ $YWIƈX]TSKVETL]Ɖ䛧䛶$MRGPYHIX]TSKVETL]PEVKI\ JJJ 䛸䛛᭩䛡䜛䛸ẚ㍑ⓗᢅ䛔 䜔䛩䛟䛺䜛 ż 䜒䛱䜝䜣'77MR.7䛻䛿ሀ∼䛥䛷䛛䛺䜟䛺䛔 ż 䛜䚸䝁䞁䝫䞊䝛䞁䝖䛸䝔䞁䝥䝺䞊䝖䜶䞁䝆䞁䛷ྠ䛨

    QM\MR䜔ኚᩘ䜢౑䛖䚸䜏䛯䛔䛺ሙ㠃 䛻䛿䜐䛧䜝ᙉ䛔䛛䜒䛧䜜䛺䛔 Ɣ 䛜䚸ᚋ㏙䛩䜛'77ZEVMEFPIW䛸䛾ව䛽ྜ䛔䠄䛒䜛䛔䛿䛹䛱䜙䜢㑅䜆䛛䠅䛣䛣᭱㏆ᝎ䜣䛷䛔䜛 ż 䛺䛾䛷䛂䛨䜓䛑඲㒊$YWI๓ᥦ䛷ኚᩘඹ㏻໬䛩䜛䛮䟿䛃䛸䛿㋃䜏ษ䜜䛺䛔 $YWI䜢౑䛖䛸䝕䝄䜲䞁䝅䝇䝔䝮䛻౽฼䠛
  10.  Ɣ 䛂WEWW䛸䛔䛖䝷䜲䝤䝷䝸䛷䚸WEWW䜎䛯䛿WGWW䛜䝁䞁䝟䜲䝹䛷䛝䜛䛃䛸⌮ゎ䛧䛶䛟䛰䛥䛔 Ɣ WEWW䛿䜸䝣䝃䜲䝗䝹䞊䝹䛷䜹䝑䝁䛜䛺䛔䚸 WGWW䛿_a䛸䛜Ꮡᅾ䛩䜛 Ɣ 5WEWW䛸WGWW䛳䛶䛹䛳䛱䛜Ⰻ䛔䛾䠛 ż %䛔䛔䛛䜙㯲䛳䛶WGWW䜢౑䛔䜎䛧䜗䛖䚹WEWW䜔䜑䛯䜙࿘㎶䝒䞊䝹䛾ᜠᜨ䛜ᩘಸ

    䛻䛺䛳䛯 ż TVIXXMIV䛿WEWW䜢䝃䝫䞊䝖䛧䛶䛺䛔䚸WX]PIPMRX䛿WGWW䛾᪉䛜䛱䜓䜣䛸ື䛟 ż 䜹䝑䝁䛜䛒䜛䛾䛜᎘䛸䛔䛖䛾䛿↹ᝎ䛺䛾䛷䚸♺䛔䜎䛧䜗䛖 వㄯฎ⌮⣔䛸䛧䛶䛾WEWW䚸ᣑᙇᏊ䛸䛧䛶䛾 WEWW
  11.  Ɣ '77䛻ᮏ≀䛾ኚᩘ䛜ᐇ䛿ධ䛳䛯䠄䝷䞁䝍䜲䝮䛷Ⰽ䛜ኚ᭦䛷䛝䜛䠅 ż -)䛾䝃䝫䞊䝖䜢ษ䜜䜀኱య䛾䝤䝷䜴䝄䛷౑䛘䜛 Ɣ 7EWW䛾䜘䛖䛻ΰⰍ㛵ᩘ䛸䛛䛜౑䛘䛺䛔䠄 GSPSVQSH 䛿㞴⯟䛧䛶䛔䜛䠅 Ɣ

    4YVI'77䛷ኚᩘ䜢౑䛘䚸.7䛷ືⓗ䛻䝎䞊䜽䝰䞊䝗ᑐᛂ䛸䛛䛜䛛䛡䛶౽฼ Ɣ ୍᪉䚸LSZIV᫬䛻䝷䞁䝍䜲䝮䛷Ⰽ䜢ΰ䛬䜛䜏䛯䛔䛺䛸䛣䜝䛾㈋ᙅ䛥䛜䛒䛳䛶䝕䝄䜲䞁䝅䝇䝔 䝮ⓗ䛻䛿ᝎ䜎䛧䛔ẁ㝵䛾ᢏ⾡Ə '77:EVMEFPIW䠄䛒䜛䛔䛿䜹䝇䝍䝮ኚᩘ䠅
  12.  Ɣ ᑗ᮶䜢ぢᤣ䛘䛶䚸䝁䞁䝫䞊䝛䞁䝖䛸䛭䛖䛷䛺䛔⟠ᡤ䛷 '77䜢ྠ䛨ᇶ┙䛻㍕䛫䛯 ż ┿㠃┠䛻䝕䝄䜲䞁䝅䝇䝔䝮䜢䜔䜛䛾䛻䝡䝹䝗䝅䝇䝔䝮」ᩘ䛿㑧㨱 Ɣ 䛣䛾㝿䛺䛾䛷WEWW䜒᪂䛧䛔ᶵ⬟㏣ຍ䛻㏣ᚑ䛷䛝䜛䜘䛖 HEVXWEWW䛻඲㒊ᐤ䛫䛯 Ɣ

    ୍᪉䚸䛔䛦䝁䞁䝫䞊䝛䞁䝖䛸䛭䛖䛷䛺䛔⟠ᡤ䛾㈨⏘ඹ᭷䛻䛴䛔䛶⪃䛘䜛䛸䚸䜎䛰䜎䛰㞴䛧䛔䛸 䛣䜝䛜䛒䜛ƏƏ Ɣ 䝕䝄䜲䞁䝅䝇䝔䝮䛾ᩚഛ䜢ぢᤣ䛘䛶 '77䛾⌮᝿ᙧ䛿䜎䛰䜎䛰ᶍ⣴䛧䛶䛔䛟 䜎䛸䜑