Wanna be a Front-end Professional 2016

フロントエンドでプロとして働くならこれが必要！みたいなものをまとめてみました。Webなんでも勉強会での発表資料。
2016/07

Transcript

1. Wanna be a Front-end Professional 2016.07.26 Presented by Munesada Yohei https://flic.kr/p/9cJyEY
2. Attention 㾎 ଟ෼ʹओ؍తͳ͜ͱؚ͕·Ε·͢
 㾎 άϥϑΟΧϧͳ࿩͸͋Γ·ͤΜʢ%ͳͲʣ
 㾎 ϑϩϯτΤϯυΤϯδχΞ͕੒ՌΛग़͢ʹ͸
 ͱ͍͏࿩ʹ஫໨ͯ͠ݟ͍ͨͱࢥ͍·͢
3. About Me 㾎 फఆ
   ༸ฏʢΉͶͩ͞
   Α͏΁͍ʣ
   㾎 IUUQXXXZPIFJNOFU
   㾎 ϓϥϯφʔ
   
   ΤϯδχΞ
   
   σʔλ෼ੳ
   㾎 (`TΞΧσϛʔϝϯλʔ
4. ϑϩϯτΤϯυΤϯδχΞͬͯ
   Կ͕ඞཁͳΜͩΖ͏ʁ
7. ԿͰ͜Μͳʹ͍ͬͺ͍
   ඞཁͳΜͩΖ͏͔ʁ
8. ͳͥ͜Μͳʹ΋ෳࡶʂʁ 8FCϑϩϯτͰͰ͖Δ͜ͱ͕രൃతʹ૿͑ͨ ʢϓϩμΫτͰ਺ສߦͷ+BWB4DSJQUίʔυ΋͋Δʣ ෳࡶͳ͜ͱΛ΍Δʹ͸࿮૊Έ͕ඞཁ
9. શ෦஌͍ͬͯΔඞཁ͸͋Δͷ͔ʁ ϓϩͷϑϩϯτΤϯυΛ΍ΔͳΒɺ
   ೺Ѳ͓͖͍ͯͨ͠ 㾎 ࢓ࣄͰ͔ͬ͠Γͱ੒ՌΛग़͍ͨ͠ͳΒɾɾɾ
   㾎 େن໛αʔϏεΛ࡞Γ͍ͨͳΒɾɾɾ
   㾎 ߴ͍඼࣭ͰαʔϏεΛ࡞Γ͍ͨͳΒɾɾɾ
   㾎 ෳࡶͳػೳΛ࣮૷͍ͨ͠ͳΒɾɾɾ
10. ಺༰Λ೷͖ݟͯ͠ΈΔ ֤ৄࡉ͸ʮ ٕज़໊
    ೖ໳ʯͰάάͬͯΈ͍ͯͩ͘͞
    N 
    
     N
12. +BWB4DSJQU
    $44
    ίϯύΠϧ
    
    Ϗϧυ
    
    ϦϦʔε
    ؀ڥपΓ
    ͦͷଞ
13. +BWB4DSJQU
    $44
    ίϯύΠϧ
    
    Ϗϧυ
    
    ϦϦʔε
    ؀ڥपΓ
    ͦͷଞ
14. JavaScript JavaScript (ES5/6/7) ϥΠϒϥϦ ɾK2VFSZ ɾ3FBDUKT
    
    GBNJMJFT ɾ"OHVMBSKT ɾCBDLCPOFKT ɾCPPUTUSBQ ɾ.BUFSJBM
    6* ɾFUD ઃܭࢥ૝ +4 ɾ.7$ .79 ɾ&WFOU%SJWFO ɾ3FBDUJWF ɾ1SPNJTF ɾ4JOHMF
    1BHF
    "SDIJUFDUVSF "MUKT ɾ5ZQF4DSJQU ɾ$P⒎FF4DSJQU 㾎 ͜Ε͕Ұ൪ෳࡶʂʂ
    㾎 ઃܭࢥ૝͕ͳ͍ͱେ͖ͳΞϓϦέʔγϣϯΛ૊Ίͳ͍
    㾎 ϥΠϒϥϦ΋·ͩఆ൪͕ग़͖͍ͯͯͳ͍
    㾎 ݴޠ࢓༷͕ශऑͰɺίʔσΟϯά͕େมɺ"MUKT͕ଘࡏ͢Δ
15. +BWB4DSJQU
    $44
    ίϯύΠϧ
    
    Ϗϧυ
    
    ϦϦʔε
    ؀ڥपΓ
    ͦͷଞ
16. CSS3 ઃܭࢥ૝ $44 ɾ00$44 ɾ4."$4 ɾ#&. ϙετϓϩηοα ɾ"VUP1SFpYFS ϓϦϓϩηοα ɾ4BTT ɾ-FTT ɾ4UZMVT CSS 㾎 ઃܭࢥ૝ΛೖΕΔͱϝϯςφϒϧʹ͠΍͍͢
    㾎 ϒϥ΢βࠩҟ͸ࠓޙ΋෇͖߹͏
    㾎 ݴޠ࢓༷͕ශऑͰɺϓϦϓϩηοα͕ൃୡ
17. +BWB4DSJQU
    $44
    ίϯύΠϧ
    
    Ϗϧυ
    
    ϦϦʔε
    ؀ڥपΓ
    ͦͷଞ
18. ϦϦʔε ɾ+FOLJOT ɾ'51 ίϯύΠϧ  Ϗϧυ ɾ8FCQBDL ɾ#SPXTFSJGZ ɾ#BCFM ɾ(VMQ ɾ(SVOU ίϯύΠϧ & Ϗϧυ & ϦϦʔε 㾎 ෳࡶͳ΋ͷΛѻ͏ʹ͸ɺίϯύΠϧ΍Ϗϧυ͕ඞਢ
    㾎 +BWB4DSJQUϕʔεͰѻ͏΋ͷ͕ଟ͍
    㾎 ʮ+FOLJOTઃఆ͠ͱ͍ͯʯͱݴΘΕΔ͜ͱ΋ଟ͍
19. +BWB4DSJQU
    $44
    ίϯύΠϧ
    
    Ϗϧυ
    
    ϦϦʔε
    ؀ڥपΓ
    ͦͷଞ
20. ύοέʔδϚωʔδϟʔ & ςετ & ϑΥʔϚολ 㾎 ผʹ஌Βͳͯ͘΋ੜ͖͍͚ͯΔ͚Ͳɺ͋Δͱ඼্࣭͕͕Δ
    㾎 ଞͷݴޠͰ͸౰ͨΓલʹ͋Δ͜ͱͳͷͰੋඇֶΜͰ͓͖͍ͨ ςετ ɾ.PDIB ɾ4FMFOJVN ɾ8FC%SJWFS ϑΥʔϚολ ɾ&4-JOU ύοέʔδϚωʔδϟ ɾOQN ɾ#PXFS
21. +BWB4DSJQU
    $44
    ίϯύΠϧ
    
    Ϗϧυ
    
    ϦϦʔε
    ؀ڥपΓ
    ͦͷଞ
22. ͦͷଞ 㾎 ࣮͸Ұ൪ॏཁͳͱ͜ΖͳͷͰ͸ͳ͍͔ͱࢥ͍ͬͯΔ
    㾎 ʮΑ͘੾ΕΔแஸΛͲ͏࢖͏͔ɺ࢖ͬͨ݁ՌͲ͏ͩͬͨͷ͔ʯ
    㾎 ։ൃϑϩʔ͸νʔϜ։ൃͰ͸ॏཁɻεϐʔυͱΫΦϦςΟ61
    㾎 ࠷ۙ͸جૅతͳαʔόʔٕज़͸ϑϩϯτνʔϜʹ΋͓ئ͍ͯ͠Δ
    㾎 πʔϧ܈͕࢖͑Δͱɺඈ༂తʹੜ࢈ੑ্͕͕Δ πʔϧ܈ ɾ$ISPNF
    %FW
    5PPMT ɾ-PDBM
    1SPYZ ෼ੳ ɾ(PPHMF
    "OBMZUJDT ɾ42- ɾ)JWF2- ։ൃϑϩʔ ɾ΢ΥʔλʔϑΥʔϧ ɾεΫϥϜ ɾ(JUIVC ϑϩʔ αʔόʔ ɾ44) ɾ%BUBCBTF ɾ4IFMM ϓϥϯχϯά ɾ""333 ɾFUD
23. +BWB4DSJQU
    $44
    ίϯύΠϧ
    
    Ϗϧυ
    
    ϦϦʔε
    ؀ڥपΓ
    ͦͷଞ
24. ϑϩϯτΤϯυΤϯδχΞͷ
    ਎ͷৼΓํ
25. δΣωϥϦετࢤ޲
    
    ੒Ռࢹ఺
26. 㾎δΣωϥϦετࢤ޲ 㾎੒Ռࢹ఺ 㾎 ݸਓతʹ͸ϑϩϯτΤϯυ͸δΣωϥϦετ͕ྑ͍
    㾎 ೥͘Β͍Ͱٕज़ͷӫރ੝ਰ͕͋Δʢ3FBDU΍"OHVMBS͕೥ޙʁʣ 㾎 ٕज़εΩϧ͸πʔϧͰ͋ΔʢͰ΋࢖͑ͳ͍͸࿦֎ɻ੾Εͳ͍แஸ͸ෆཁʣ
    㾎 πʔϧΛ࢖ͬͯԿΛ੒͠਱͛Δͷ͔͕େ੾ͩͱײ͍ͯ͡Δ
    㾎 ࣗ෼ͷٕज़εΩϧΛԿʹ࢖͏ͷ͔ɺࣗ෼Ͱίϯτϩʔϧ͍ͨ͠
    㾎 ٕज़εΩϧΛ࢖ͬͨ݁Ռ͸ɺ ࣗ෼Ͱ ਖ਼͘͠ධՁ͍ͨ͠
27. ࠷ޙʹ
28. http://frontend.paint-ink.com/
29. 㾎ڵຯ͕͋ͬͯػցֶश΍ࣗવݴޠॲཧΛ΍͍ͬͯΔ
    㾎ଞʹ΋ɺJ1IPOFΞϓϦ։ൃ΋΍͍ͬͯΔ
    㾎"OESPJE͸͓ษڧத
    㾎αʔόʔαΠυ΍ΠϯϑϥपΓ΋͓ษڧத
    㾎(`TͰϝϯλʔ͍ͯͯ͠ࢥ͏͜ͱ͸ɺଞۀքͷਓ͸ࢹ఺͕ྑ͍͠ɺ
 ΍Δؾ͕͋Δਓ͸ɺࣗ෼Λม͑ɺࣗ෼ͷपΓ΋ม͍͑ͯ͘
    㾎ͨ͘͞Μͷ఺͕͋ͬͯͦΕ͕ઢʹͳΔײ͕֮͋Δɻ
 ͨ͘͞Μͷ఺Λ࣋ͭ͜ͱͰࣗ෼ʹ͔͠ݟ͑ͳ͍ࢹ఺͕Ͱ͖ΔΜͩͱࢥ͏
    㾎ྫ͑͹ͦΕΛػցֶशͷ෼໺Ͱ΋େ੾ʹ͍ͨ͠ ࠷ۙࢥ͍ͬͯΔ͜ͱ
30. IUUQTqJDLSQN[N2, Thank you http://www.yoheim.net @yoheiMune