DevTools+PerfectPixelで爆速コーディング

Transcript

1. ൿଂͷര଎ίʔσ
   ΟϯάςΫχοΫ
   

   View Slide

2. ίʔσΟϯάΛ
   ̎ഒ଎ʹ͠Α͏ʂ
   

   View Slide

3. Ͳ͏΍Δͷʁ
   w )5.-͸;ͭ͏ʹίʔσΟϯά
   w 1FSGFDU1JYFMΛ͔ͭͬͯσβΠϯΧϯϓΛ͔ͿͤΔ
   w %FW5PPMT্Ͱੜ$44Λฤू͢Δ
   

   View Slide

4. 1FSGFDU1JYFM֦ுػೳ
   w ϒϥ΢β্ʹը૾ϑΝΠϧΛΦʔόʔϨΠදࣔ͢Δ
   w Ґஔͷௐ੔Ŋ֦ॖŊಁա౓ͷมߋͳͲศརͳػೳ
   w ΩʔϘʔυૢ࡞Մೳ
   IUUQTDISPNFHPPHMFDPNXFCTUPSFEFUBJMQFSGFDUQJYFMCZXFMMEPOFDELBBHEHKNHENCOFDNDFGEIKFLDPDFFCJ
   IMKB
   

   View Slide

5. w ͓ͳ͡Έͷ$ISPNF։ൃऀπʔϧ
   w )5.-΍$44ΛҰ࣌తʹฤू
   w Ϧϩʔυͨ͠Βফ͑ͪΌ͏ʜʁ
   $ISPNF%FW5PPMT
   w ࣮͸ϩʔΧϧϑΝΠϧΛ௚ʹฤूͰ͖Δʢ8PSLTQBDFTػೳʣ
   

   View Slide

6. ૊Έ߹ΘͤͨΒʜ
   DevTools
   

   View Slide

7. σϞ
   

   View Slide

8. ɾ)5.-ߏ଄Λߟ͑Δ
   Before
   HTML
   Χϯϓ
   CSS
   Browser
   

   View Slide

9. Before
   HTML
   Χϯϓ
   CSS
   Browser
   ɾߏ଄Λهड़͢Δ
   ɾ$44Λ༧ଌ͢Δ
   
   ...
   
   

   View Slide

10. Before
    HTML
    Χϯϓ
    CSS
    Browser
    ɾ)5.-ʹج͖ͮηϨΫλΛॻ͘
    ɾΧϯϓͰܭଌ͢Δ
    ɹ จࣈαΠζŋߦߴŋ༨ന౳
    
    ɾελΠϧΛॻ͘
    ɾϒϥ΢βͰ֬ೝ͢Δ
    ɾΧϯϓͱͷζϨΛݕূ͢Δ
    
    ...
    
    div { ... }
    

    View Slide

11. ͜Ε·ͰͷϫʔΫϑϩʔͷ໰୊఺
    w εΠονϯάίετ͕σΧ͍ʂ
    w )5.-Λݟͳ͕Βʜʜ
    w ΧϯϓΛܭଌ͠ͳ͕Βʜʜ
    w ϒϥ΢βͰ֬ೝ͠ͳ͕Βʜʜ
    w ख໭Γ͕͋Δʂ
    w ϓϩύςΟ΍஋ͷλΠϙ
    w ࠶ݱ౓ͷ؁͞
    

    View Slide

12. After
    HTML
    Χϯϓ
    CSS
    Browser
    ɾ)5.-ߏ଄Λߟ͑Δ
    

    View Slide

13. After
    HTML
    Χϯϓ
    CSS
    Browser
    ɾߏ଄Λهड़͢Δ
    ɾ$44Λ༧ଌ͢Δ
    
    ...
    
    

    View Slide

14. HTML
    Χϯϓ
    CSS
    Browser
    ...
    
    After
    

    View Slide

15. HTML
    Χϯϓ
    CSS
    Browser
    

    View Slide

16. View Slide

17. ɾϒϥ΢β্ʹΧϯϓΛදࣔ
    ɾ%0.ΠϯεϖΫλͰཁૉΛ୳͢
    ɾΧϯϓΛਅࣅͯ$44Λॻ͘
    After
    DevTools
    +PerfectPixel
    

    View Slide

18. ղফ͞ΕΔ໰୊఺
    w εΠονϯάθϩʂ
    w )5.-͸ͦ͜ʹ͋Δ
    w Χϯϓ΋ͦ͜ʹ͋Δ
    w ϒϥ΢βͰ֬ೝ΋Կ΋Ŋࠓݟ͍ͯΔͦΕ͕ϒϥ΢βʂ
    w ख໭Γ͠ͳ͍ʂ
    w %FW5PPMT্Ͱิ׬͕ར͘͠Ŋݟ͍ͯΔ΋ͷ͕݁Ռ͔ͩΒʂ
    w Χϯϓʹج͍͍ͮͯΔ͔Β࠶ݱ౓͕؁͍ͱ͔ແ͍
    

    View Slide

19. ࢓૊Έ
    DevTools
    Browser style.css
    ᶃ
    ᶄ ᶅ
    ᶃฤू͢Δ
    ᶄը໘ʹ൓ө͢Δ
    ᶅϑΝΠϧʹॻ͖ࠐΉ
    

    View Slide

20. ͬͯ࢖͑Δͷʁ
    ͋Γͦ͏ͳٙ໰
    "੍໿͸͋Δ͚Ͳ࢖͑Δʂ
    

    View Slide

21. ࢓૊Έ
    DevTools
    Browser style.css
    style.scss
    ᶃ
    ᶄ
    ᶅ
    ᶇ
    ᶃฤू͢Δ
    ᶄը໘ʹ൓ө͢Δ
    ᶅϑΝΠϧʹॻ͖ࠐΉ
    ᶆίϯύΠϧ
    ᶇมߋ͕൓ө͞ΕΔ
    ᶆ
    

    View Slide

22. ؀ڥΛͭ͘Δ
    1FSGFDU1JYFMΛΠϯετʔϧ͢Δ
    ։ൃதͷϖʔδΛ։͘
    %FW5PPMTΛ։͖ɺ8PSLTQBDFΛઃఆ͢Δ
    w 4PVSDFTλϒ'JMFTZTUFNύωϧ"EEGPMEFSUPXPSLTQBDF
    w υΩϡϝϯτϧʔτʹ͋ͨΔϑΥϧμΛબͿ
    w ಡΈॻ͖ݖݶΛٻΊΒΕΔͷͰɺڐՄ͢Δ
    

    View Slide

23. 4BTTΛ࢖͏ͱ͖ͷ஫ҙ఺
    w 4PVSDFNBQͷग़ྗ͕ඞཁ
    w 4BTTίϯύΠϥʔͷΦϓγϣϯʹඞͣ͋ΔΑʂ
    w 4BTTϑΝΠϧ΋8PSLTQBDFܦ༝ͰΞΫηεͰ͖ΔΑ͏ʹ͢Δ
    w TSD EJTUʹ෼ׂ͍ͯ͠Δ؀ڥߏ੒ͩͱ͏·͍͔͘ͳ͍ʂ
    w &MFNFOUTλϒ্Ͱͷมߋ͸ແࢹ͞ΕΔ
    w 4PVSDFTλϒͰιʔεΛฤू
    w ϝϦοτ͸ബΕΔ͚ͲɺιʔεҐஔʹ௚઀δϟϯϓՄೳ
    

    View Slide

24. ͱ͜ΖͰŊ
    

    View Slide

25. 
    
    Link 1
    Link 2
    Link 3
    
    
    .Header__globalNav {
    }
    .Header__globalNavItems {
    }
    .Header__globalNavItems > li {
    }
    .Header__globalNavItems > li > a {
    }
    ͜ͷ࡞ۀŊΊΜͲ͍͘͞Ͱ͢ΑͶʁ
    

    View Slide

26. ָʹ͢Δπʔϧ
    ͭ͘Γ·ͨ͠ʂ
    https://css-scaffolder.netlify.com/
    

    View Slide

27. ͱ͜ΖͰᶄŊ
    

    View Slide

28. %FW5PPMTͰ
    ϚϧνΧʔιϧ࢖͑Δ
    ͬͯ஌ͬͯ·ͨ͠ʁ
    4PVSDFTλϒͰ$USM%$NE%ΛͨΊͯ͠ΈΑ͏ʂ
    

    View Slide

29. ͓ΘΓ
    

    View Slide