慚愧 〜 2018年、踏み抜いた地雷群

2019/1/12
@ Frontend Nagoya #8

Transcript

1. 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba a 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53 camp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22 53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Na 2.0"N 136°53’14.7"E Basecamp Nagoya 35°10'22.0"N 136°53’14.7"E Ba Nagoya 35°10'22.0"N 136°53’14.7"E Basecamp Nagoya ጙጌ
   ʙ
   ೥ɺ౿Έൈ͍ͨ஍ཕ܈ 
   !
   'SPOUFOE
   /BHPZB
   
2. "HFOEB  Θͨ͘͠ʹ͍ͭͯ
    ೥ϋϚΓ
    ೥ϋϚ͚ͬͨͲ΋͏͍͍
    ͓·͚
3. Θͨ͘͠ʹ͍ͭͯ { "@context": "http://schema.org", "@type": "Person", "name": "Kyousuke Abe", "alternateName": "安部亨佑", "birthPlace": "Iwata, Shizuoka", "birthDate": "1982.9.24", "height": "181 cm", "weight": "68 kg", "gender": "male", "worksFor": "FRAME LUNCH Inc.", "workLocation": "Ohsu, Nagoya-shi”, "jobTitle": "Web engineer", "nationality": "Japanese", "url": "https://kaave.github.io", "sameAs": [ "https://twitter.com/junkjunctions", "https://github.com/kaave" ] } { "likes": [ "Vim-style key binding", "Emacs-style key binding", "ErgoDox", "TypeScript", "Scala", "React", "PostCSS", "fish shell", "Twitter", "Music", "Football", "Casual cycling”, "Bodyweight Workout", "Spicy foods", "Dried fruit", "American coffee" ] }
4. ೥ϋϚΓ
5. ͜ͷลʹϋϚͬͨ  1SJWBUF
   NPEF
    (VMQ
   Wͱ/PEF
   W
    WIͱJ04
6. 1SJWBUF
   NPEF
7. ͜Εͷ͜ͱ
8. J04
   4BGBSJͷϓϥΠϕʔτϞʔ υͩͱɺը໘͕ਅͬനͷ· ·ਐΈ·ͤΜʂ ΄Μ·͔͍ͳ ೥ͷ͋Δ೔
   σΟϨΫλʔΑΓ
9. ΄Μ·Ͱͨ͠
10. MPDBM4UPSBHFTFU*UFNͰίέ͓ͯΓ
 ॳظԽॲཧ͕ਐ·ͳ͍ͷ͕ݪҼͰͨ͠ ˞ݕূ͸DPOTPMFͰ͢͢Ί·ͨ͠
11. MPDBM4UPSBHFTFU*UFN 4UPSBHF
    Πϯλʔ ϑΣΠεͷ
    TFU*UFN
    ϝιο υ͸Ωʔͷ໊শͱ஋Λ౉͢ͱɺετϨʔδ ʹΩʔΛ௥Ճ͢Δɺ·ͨ͸Ωʔ͕͢Ͱʹଘ ࡏ͢Δ৔߹͸Ωʔʹର͢Δ஋Λߋ৽͠·͢ ɻ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*4UPSBHFTFU*UFN
12. λνͷѱ͍͜ͱʹ
    ϝιουͦͷ΋ͷ͸ଘࡏ͢Δ
13. ͷͰɺྫ֎ॲཧͰಀ͛·ͨ͠
14. J04͔Β͸
    ΤϥʔʹͳΒͳ͘ͳΓ·ͨ͠
    TFU*UFNͯ͠΋Τϥʔʹ͸ͳΒͳ͍͕ɺอଘ͸͞Εͳ͍
    Ͱ΋·͊݁ہ*0ॲཧͷҰछͳΜͰɺ
    ࢓ࠐΈ͸ສશʹ͠ͱ͍ͨ΄͏͕Α͛͞
15. (VMQ
    Wͱ/PEF
    W
16. 
    /PEF
    W͕-54ʹ
    ͬͦͨ͘͞Ίͦ͏
18. Ͳ͏΋͜͏͍͏͜ͱΒ͍͠ 
    HVMQ͕ґଘ͍ͯ͠Δʜ
    
    
    
    WJOZMGT͕ґଘ͍ͯ͠Δʜ
    
    
    
    
    
    HSBDFGVMGT͕ґଘ͍ͯ͠Δʜ
    
    
    
    
    
    
    
    OBUJWFTͷόʔδϣϯ͕ݹͯ͘/PEF
    WඇରԠ
19. ͡ΌʔOBUJWFTͷόʔδϣϯΛ
    /PEF
    WରԠWFSͰϩοΫͪ͠Ό͓͏
20. SFTPMVUJPOTͱ͸ ґଘؔ܎ʹಠࣗͷύοέʔδͷόʔδϣ ϯΛఆٛ͢Δ͜ͱ͕Ͱ͖·͢ɻ IUUQTZBSOQLHDPNMBOHKBEPDTTFMFDUJWFWFSTJPOSFTPMVUJPOT ˠϓϩδΣΫτ಺ͷࢦఆͨ͠ύοέʔ δͷόʔδϣϯΛ౷Ұͯ͠ϩοΫͰ͖Δ ͨͩ͠ZBSOʹݶΔ
 OQNͷ৔߹ɺมΘΓͷ΋ͷ͋Δͷ͔ͳʁ
21. WIͱJ04
22. ͜͏͍͏ը໘࡞Δ͜ͱʹͳͬͨ  શը໘ݻఆ
     શύωϧαΠζݻఆ
     ੨͚ͩԣʹεΫϩʔϧ ߴ͞WIͰ(SJE
    -BZPVU͔͠ͶʔͩΖ
23. Ͱ΋WI͸41Ͱ΍͹͍ @media (--not-sp) { html, body { height: 100vh; } } ͷͰϝσΟΞΫΤϦͰ֎͓͍ͯͨ͠ ˞๻͸1PTU$44ΛѪ༻͓ͯ͠Γɺ্هͷϝσΟΞΫΤϦ͸NJOXJEUI
    
    QYͷҙͰ͢
24. όονϦɺͱࢥ͍͖΍
    J1BEͷ͜ͱΛ๨Εͯͨ
    εΫϩʔϧͯ͠͠·͏ʜ
25. ͳΜͱ͔ͯ͘͠ΕΔϥΠϒϥϦͰରԠ 7JFXQPSU
    6OJUT
    #VHHZGJMMä IUUQTHJUIVCDPNSPEOFZSFINWJFXQPSUVOJUTCVHHZpMM XJOEPXJOOFS9999Λ΋ͱʹɺ EPDVNFOUTUZMF4IFFUT͔Β
 $44ΰϦΰϦ΍ͬͯ͘ΕΔ☺
26. ৼΓฦΔͱɺͦ΋ͦ΋WIΛ࢖͏΂͖
 ঢ়گ͡Όͳ͔ͬͨʜ
 
 Ͳ͏͍͏έʔεͰ࢖͏ͱΦΠγΠΜͰ͠ΐ͏ʁ
27. ೥ϋϚ͚ͬͨͲ
 ΋͏͍͍
28. ͜ͷลʹ΋
    ϋϚͬͨΜͰ͕͢ʜ  (PPHMFͷ΢ΣϒαΠτ຋༁πʔϧ
     $ISPNFྡ઀ηϨΫλͷո͠͞
     4FSWJDF
    XPSLFSͰ࡞ͬͨΩϟογϡ
29. (PPHMFͷ΢ΣϒαΠτ
    ຋༁πʔϧ
30. ͜Ε
31.  উखʹλάΛ͍͡Δ
     GPOUλά૿͑·͘ΓͰϨΠΞ΢τ่յ
     ࿨੡ӳޠΛ௚ͪ͠Ό͏
     ݻ༗໊ࢺ͔ͩΒ௚͞ͳ͍Ͱ΄͍͠ ओʹ͜Μͳ໰୊͕͋ͬͯ
    ը૾ʹͯ͠ಀ͛ͨΓ
    λάΛ͍ͬͯ͡ಀ͛ͨΓͨ͠ΜͰ͕͢ʜ
32. αʔϏεऴྃ
    ☠
    ͞Α͏ͳΒ IUUQTUSBOTMBUFHPPHMFDPNJOUMKBBCPVUXFCTJUF
33. ྡ઀ηϨΫλͷո͠͞
    PO
    $ISPNF
34. ͜͏͍͏ͷ input[type="radio"] + label input[type="radio"]:checked + label +4ͰTFU"UUSJCVUF࢖ͬͯDIFDLFE͚ͭ֎ͨ͠͠ͱ͖
    ߦ໨͕ޮ͍ͨΓޮ͔ͳ͔ͬͨΓ $ISPNFݶఆ
35. ͳ͔ͥ͜ΕͰ௚ͬͨ input[type="radio"][checked] + label ·ͬͨ͘Ṗ ๻·͕ͪͬͯͳ͍ΑͶ ˠࢿྉ࡞ͬͯΔͱ͖ʹ
    ౰࣌ͷίϛοτҾͬுΓग़͖͚ͯͨ͠Ͳ
    ࠶ݱͤΜ͔ͬͨ☠
36. 4FSWJDF
    XPSLFSͰ
    ࡞ͬͨΩϟογϡ
37. XFCQBDLͷ48ੜ੒ϓϥάΠϯ
    ͍͍ײ͡ʹϦιʔεΛΩϟογϡͯ͘͠ΕΔ
    7VF1SFTTܦ༝Ͱ࢖ͬͯ·͢ʔʔ IUUQTHJUIVCDPN(PPHMF$ISPNFXPSLCPY
38. 4FSWJDF
    XPSLFS͔ΒϦιʔεΛऔಘ͢Δͷਤ
39. ॻ͍ͨΤϯτϦʔ͕
    ͍ͭ·Ͱܦͬͯ΋൓ө͞Εͳ͍ ˠ(JU)VCͷΩϟογϡ͔ͱࢥͬͨ
    ˠผͷϒϥ΢βͰݟͨΒදࣔ
    ˠ48͕Ωϟογϡ௫ΜͰͯ৽͍͠Ϧιʔε JOEFYIUNM Λऔͬͯ͜ͳ͍
    ˠ48ফͨ͠ΒͪΌΜͱ൓ө͞Εͨ
    ˠ๻͸48ফ͔͢Β͍͍͚ͲɺҰൠͷํʑͲ͏͠Αʔ
40. Ͳ͏ͨ͠Β͍͍ΜͰ͠ΐ͏
    Ͳͳ͔ͨڭ͍͑ͯͩ͘͞
41. ͓·͚
42. ೥΋ϑϩϯτΤϯυ͸
 ͍Ζ͍Ζ͋Γͦ͏Ͱ͢Ͷʂ
    ओͳݸਓతʹ஫໨͍ͯ͠Δ͜ͱ  $ISPNJVNϕʔεͷ&EHF ʹ൐͏*&ͷ༨໋
     )551͸Ͳͷϒϥ΢β͕࠷ॳʹରԠ͢Δ͔ʁ
     5ZQF4DSJQUͷγΣΞ͸·ͩ৳ͼΔʁ
     +BWB4DSJQUͷ1SPQPTBM
    TUBHF͋ͨΓʹ୔ࢁ͋Δྑ͛͞ͳจ๏ͷ ਐḿ͸ͲʔͳΔʁ
     3FBDU
    )PPLT͸͍ͭདྷΔͷ͔ ౰ॳݴͬͯͨͰ͸εϧʔ͞Ε ͨ
     1PTU$44͸͜ͷ··TBTTΛஔ͖׵͑Δ͜ͱͳ͍··ͳͷ͔
     ݁ہࠓ೥΋ϑϩϯτ͸HVMQͳͷ͔
     ΦϦϯϐοΫΛᛀΜͩ8FCΞΫηγϏϦςΟͰେ૽͗ɺͳ͍͔ ͳ
43. ͓͠·͍ Ͳ͏΋Ͱͨ͠
 ࣭໰͋ͬͨΒ͍ͭͰ΋Ͳ͏ͧ
    (JU)VC
    LBBWF
 5XJUUFS
    !KVOLKVODUJPOT
 8FC
    IUUQTLBBWFHJUIVCJP