ゆく技術_くる技術.pdf

Transcript

1. Ώٕ͘ज़ɺ͘Δٕज़ Dec 19, 2018 / Toshifumi Imanishi

2. ͳ͔ͳ͔୤ͤͳ͍
   K2VFSZ :PV
   %PO`U
   /FFE
   K2VFSZɺ୤
   K2VFSZ
   ͕ۙ೥࿩୊ʹͳΔɻK2VFSZ
   ͸ɺϒϥ΢βؒͷࠩҟΛ ٵऩ͢ΔɺωΠςΟϒ
   +BWB4DSJQU
   ΑΓ؆୯ɾָνϯ
   ͱ͍͏ཧ༝Ͱଟ͘ͷ։ൃऀ͔Β਌͠ ·Ε͍ͯΔɻ
   ʲ୤
   K2VFSZ
   ͷओͳཧ༝ʳ
   w ϒϥ΢βͷਐԽɺ+4
   ͷ৽ػೳͷ௥Ճ
   w ػೳཁ݅Λຬͨ͢ͷʹྗྔෆ଍
   ͔͠͠ɺK2VFSZ
   ΛࣺͯΔ͜ͱ͸Ͱ͖ͳ͍ɻ୹ظϓϩδΣΫτʹ͓͍ͯɺωΠςΟϒ
   

   +BWB4DSJQU
   ΍
   7VFKT
   ΑΓ࢖͍׳Εͨ
   K2VFSZ
   Ͱ։ൃ͢Δ
   ҆৺ײ
   ɻطଘίʔυΛ
   K2VFSZ
   Ҏ֎Ͱॻ͖׵͑Δ
   ֶश
   BOE
   ࣌ؒతίετɻ
   

3. 7VFKT
   ͷબ୒ࢶ ͍͘Β
   K2VFSZ
   ͕༏लͰ΋ۜͷ஄ؙͰ͸ͳ͍ɻͨͱ͑͹ɺ͓໰͍߹ΘͤϑΥʔϜͷ
   6*
   Λ࣮૷͢ Δ৔߹ɺΠϕϯτͱ
   %0.
   ཁૉΛ௚઀ඥ͚ͮΔΑΓɺঢ়ଶʢTUBUFʣΛڬΜͩ΄͏͕εέʔϥϏ ϦςΟͰ͋Δɻ7VFKT
   ͷϦΞΫςΟϏγεςϜ͸ɺΦϒβʔόʔύλʔϯΛϕʔεʹ࣮૷͞Ε ͍ͯΔͨΊɺʮঢ়ଶͷ؂ࢹʯɺʮมߋݕ஌ʯ΍ʮ%0.
   ͷࣗಈ൓өʯΛ։ൃऀ͕ҙࣝ͢Δ͜ͱͳ ͘ॲཧ͞ΕΔɻ event event event element

   element element element element element ঢ়ଶ event event event

4. ঃʑʹ
   ୤
   K2VFSZ
   ͷಓΛ୧Ζ͏ɻઌड़ͨ͠
   7VFKT
   Λ࢖༻͢Δ৔߹ɺK2VFSZ
   ΑΓωΠςΟϒ
   +BWB4DSJQU
   Λར༻࣮ͨ͠૷͕ଟ͘ͳΔͩΖ͏ɻK2VFSZ
   ͷϝιουΛωΠςΟϒ
   +BWB4DSJQU
   ʹ ॻ͖׵͑Δʹ͸ɺͲ͏͢Ε͹Α͍͔ʁ
   ͦΜͳͱ͖͸ɺ:PV
   8PO`U
   /FFE
   K2VFSZ
   ͕͓͢͢Ίʂ :PV
   8PO`U
   /FFE
   K2VFSZ $('.element').offset(); ? (JU)VC
   Ͱެ։தɿIUUQTHJUIVCDPNUPTIJGVNJJNBOJTIJ:PV8POU/FFEK2VFSZ

5. 9"
   ͷςϯϓϨʔτΤϯδϯ͸ɺ&+4
   ͕σϑΝΫτελϯμʔυͰ͋Δɻ&+4
   ͸ɺ)5.-
   ϕʔε ͷߏจΏ͑Մಡੑ͕͋Γɺֶशίετ΋গͳ͘ಋೖෑډͷ௿͍ݴޠͰ͋Δɻ
   ͔͠͠ɺ&+4
   Ͱ͸ύϫʔෆ଍Λײ͡Δ͜ͱ͸͋Γ·ͤΜ͔ʁͨͱ͑͹ɺ&+4
   ʹςϯϓϨʔτܧঝ ͕ඪ४ͰඋΘͬͯ·ͤΜɻ͔ͱ͍ͬͯɺ1VH
   ͸ΠϯσϯτߏจͷͨΊՄಡੑ͕ѱ͍ʢͳΜ͔ؾ࣋ ͪѱ͍ʣɻͰ͸ɺͲ͏͢Δ͔ʜ ৽ͨͳςϯϓϨʔτΤϯδϯͷՄೳੑ ❤ ❤

6. /VOKVDLT
   ͱ͸ɺ.P[JMMB
   ۘ੡ͷςϯϓϨʔτΤϯδϯ
   Ͱ͋Δɻ/VOKVDLT
   ͸ɺ)5.-
   ϕʔε ͷߏจ
   Ͱ
   ςϯϓϨʔτܧঝ͕ඪ४౥ࡌ͞Ε͍ͯΔ
   ڧྗͳݴޠͰ͋Δɻ
   ςϯϓϨʔτܧঝΛར༻͢Δ͜ͱͰɺςϯϓϨʔτͷ࠶ར༻Λ༰қʹ͢Δɻ͜Ε͸ɺ&+4
   Ͱ๊͑ Δ໰୊ʢ෼ׂ౷࣏ͷ໰୊ʣΛղܾ͢ΔͩΖ͏ɻ/VOKVDLT
   ͷ༗༻ੑ͸ɺ2JJUB
   ͷΞυϕϯτΧ ϨϯμʔͰ
   
   ެ։༧ఆɻ·ͨɺ෼ׂ౷࣏ͷ໰୊͸ྠಡձͷײ૝จʹެ։தɻ /VOKVDLT
   ͷ͢͢Ί ❤

7. HVMQ
   
   ͷਖ਼ࣜϦϦʔε
   

8. HVMQ
   
   ͰԿ͕มΘͬͨͷʁ w+BWB4DSJQU
   ؔ਺ͰλεΫΛ
   FYQPSU
   wSVOTFRVFODF
   ΍
   HVMQTPVSDFNBQT
   ͷඪ४౥ࡌ
   wXBUDI
   ػೳͷڧԽ
   wMBTU3VO
   ʹΑΔ࣮ߦ࣌ؒͷ୹ॖ
   ͍Ζ͍Ζศརʹͳͬͨ

9. (SJE
   ͷࣗಈ഑ஔΛ
   *&
   ༻ʹαϙʔτ
   

10. ΨϯΨϯ
    (SJE
    -BZPVU
    Ͱ͍͜͏ʂ *&
    Ͱࣗಈ഑ஔΛߦ͏৔߹ɺBVUPQSFpYFS
    ͷΦϓγϣϯͰ
    bBVUPQMBDF`
    ࢦఆ͢Δ
    PS
    ίʔυ ্ʹ
    
    BVUPQSFpYFS
    HSJE
    BVUPQMBDF
    
    ͱ͍͏ίϝϯτΛهड़͢ΔɻHSJEUFNQMBUF BSFB
    ͱࣗಈ഑ஔ͕
    *&
    Ͱ࢖༻Ͱ͖ΔΑ͏ʹͳͬͨࠓɺ$44
    (SJE
    -BZPVU
    Λ࢖Θͳ͍ཧ ༝͕ͳ͍ʂͪͳΈʹ
    4BGBSJʢ
    ݱࡏͷ࠷৽όʔδϣϯ͸ʣͰ͸ɺHBQ
    ϓϩύ ςΟ͕ޮ͔ͳ͍ͨΊɺHSJEHBQʢچϓϩύςΟʣͷ྆ํΛهड़͢Δඞཁ͕͋Δɻ˞ͨͩ͠ɺ "VUPQSFpYFS
    Ͱิ׬͞Εͳ͍৔߹ʹݶΔɻ

11. 1SFUUJFS
    ͷ
    )5.-
    αϙʔτ
    

12. 1SFUUJFS
    ͯԿʁ 1SFUUJFS
    ͱ͸ɺ੔ܗπʔϧͰ͋ΔɻΑ͘
    -JOU
    πʔϧͱൺֱ͞ΕΔ͕ɺ-JOU
    ͸ίʔσΟϯά ϧʔϧͷ੔߹ੑΛνΣοΫɺ1SFUUJFS
    ͸Մಡੑͷ޲্Λ໨తͱͨ͠ίʔυ੔ܗ
    ΛͦΕͧΕ ୲͍ͬͯΔɻͳͷͰɺ1SFUUJFS
    ͱ
    -JOU
    Λ߹Θͤͯ࢖༻͢Δέʔε͕ଟ͍ɻ߹Θͤͯ࢖͏ύλʔ ϯʹ͸ɺ
    ͭͷύλʔϯ͕͋ΔɻʢҎ߱ɺ&4-JOU
    Λྫʹઆ໌͢Δɻʣ
    
    1SFUUJFS
    ͷه๏ϧʔϧΛ
    &4-JOU
    ͷϧʔϧͱͯ͠ఆٛ͢Δɻ
    
    1SFUUJFS
    Ͱ੔ܗͨ͠ίʔυΛ
    AFTMJOU
    pYA
    ʹύΠϓͰܨ͍Ͱ౉͢ɻ
    طʹ
    &4-JOU
    ͕։ൃςϯϓϨʔτʹ૊Έࠐ·Ε͍ͯΔ৔߹ɺ
    Λਪ঑͢Δɻ

13. )5.-
    ੔ܗͷΧελϚΠζੑ ݱঢ়ɺΦϓγϣϯ͕গͳ͘ΧελϚΠζʹ͚ܽΔɻಛʹ
    1SJOU
    8JEUI
    ͱ
    )5.-
    8IJUFTQBDF
    4FOTJUJWJUZ
    ͸ɺબ୒ͷ༨஍͋Γɻ1SJOU
    8JEUI
    ͸ɺҰߦͷ࠷େจࣈ਺Λ੍ޚ͢ΔΦϓγϣϯͰ ͋Δɻ1SFUUJFS
    ͸ɺ
    จࣈҎ্ΛՄಡੑͷ͋Δίʔυͱͯ͠ਪ঑͢Δɻ)5.-
    8IJUFTQBDF
    4FOTJUJWJUZ
    ͸ɺΠϯϥΠϯͷෆཁͳۭനΛղܾ͢ΔͨΊͷΦϓγϣϯͰ͋ΔɻͲͪΒͷΦϓγϣ ϯ΋੔ܗޙʹվߦ͕ൃੜ͢ΔͩΖ͏ɻ <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjp.css" />

    <span class="dolorum atque aspernatur" >Est molestiae sunt facilis qui rem.</span > Print Width ʹΑΔ੔ܗ HTML Whitespace Sensitivity ʹΑΔ੔ܗ

14. HVMQ
    
    ΍
    1SFUUJFS
    Λ࢖༻ͨ͠
    ςϯϓϨʔτΛ
    (JU)VC
    ʹͯެ։த https://github.com/toshifumiimanishi/website-boilerplate

15. ·ͱΊ wঃʑʹ୤
    K2VFSZ
    ͠Α͏
    w/VOKVDLT
    Λ࢖͓͏
    wHVMQ
    
    ʹҠߦ͠Α͏
    w$44
    (SJE
    -BZPVU
    Λ࢖͓͏
    w1SFUUJFS
    Λ࢖͓͏

16. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠