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

Wanna be a Front-end Professional 2016

Wanna be a Front-end Professional 2016

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

2dfd5e0acd70adff0e2efc745d992396?s=128

Yohei Munesada

July 26, 2016
Tweet

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. ϑϩϯτΤϯυΤϯδχΞͬͯ Կ͕ඞཁͳΜͩΖ͏ʁ

  5. None
  6. None
  7. ԿͰ͜Μͳʹ͍ͬͺ͍ ඞཁͳΜͩΖ͏͔ʁ

  8. ͳͥ͜Μͳʹ΋ෳࡶʂʁ 8FCϑϩϯτͰͰ͖Δ͜ͱ͕രൃతʹ૿͑ͨ ʢϓϩμΫτͰ਺ສߦͷ+BWB4DSJQUίʔυ΋͋Δʣ ෳࡶͳ͜ͱΛ΍Δʹ͸࿮૊Έ͕ඞཁ

  9. શ෦஌͍ͬͯΔඞཁ͸͋Δͷ͔ʁ ϓϩͷϑϩϯτΤϯυΛ΍ΔͳΒɺ ೺Ѳ͓͖͍ͯͨ͠ 㾎 ࢓ࣄͰ͔ͬ͠Γͱ੒ՌΛग़͍ͨ͠ͳΒɾɾɾ 㾎 େن໛αʔϏεΛ࡞Γ͍ͨͳΒɾɾɾ 㾎 ߴ͍඼࣭ͰαʔϏεΛ࡞Γ͍ͨͳΒɾɾɾ 㾎

    ෳࡶͳػೳΛ࣮૷͍ͨ͠ͳΒɾɾɾ
  10. ಺༰Λ೷͖ݟͯ͠ΈΔ ֤ৄࡉ͸ʮ ٕज़໊ ೖ໳ʯͰάάͬͯΈ͍ͯͩ͘͞ N  N

  11. None
  12. +BWB4DSJQU $44 ίϯύΠϧϏϧυϦϦʔε ؀ڥपΓ ͦͷଞ

  13. +BWB4DSJQU $44 ίϯύΠϧϏϧυϦϦʔε ؀ڥपΓ ͦͷଞ

  14. JavaScript JavaScript (ES5/6/7) ϥΠϒϥϦ ɾK2VFSZ ɾ3FBDUKT GBNJMJFT ɾ"OHVMBSKT ɾCBDLCPOFKT ɾCPPUTUSBQ

    ɾ.BUFSJBM6* ɾFUD ઃܭࢥ૝ +4 ɾ.7$ .79 ɾ&WFOU%SJWFO ɾ3FBDUJWF ɾ1SPNJTF ɾ4JOHMF1BHF"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%FW5PPMT ɾ-PDBM1SPYZ ෼ੳ ɾ(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