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

Yohei Munesada

July 26, 2016
Tweet

More Decks by Yohei Munesada

Other Decks in Technology

Transcript

  1. Wanna be a Front-end Professional
    2016.07.26
    Presented by Munesada Yohei
    https://flic.kr/p/9cJyEY

    View full-size slide

  2. Attention
    㾎 ଟ෼ʹओ؍తͳ͜ͱؚ͕·Ε·͢

    㾎 άϥϑΟΧϧͳ࿩͸͋Γ·ͤΜʢ%ͳͲʣ

    㾎 ϑϩϯτΤϯυΤϯδχΞ͕੒ՌΛग़͢ʹ͸

    ͱ͍͏࿩ʹ஫໨ͯ͠ݟ͍ͨͱࢥ͍·͢

    View full-size slide

  3. About Me
    㾎 फఆ༸ฏʢΉͶͩ͞Α͏΁͍ʣ
    㾎 IUUQXXXZPIFJNOFU
    㾎 ϓϥϯφʔΤϯδχΞσʔλ෼ੳ
    㾎 (`TΞΧσϛʔϝϯλʔ

    View full-size slide

  4. ϑϩϯτΤϯυΤϯδχΞͬͯ
    Կ͕ඞཁͳΜͩΖ͏ʁ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. ಺༰Λ೷͖ݟͯ͠ΈΔ
    ֤ৄࡉ͸ʮ ٕज़໊
    ೖ໳ʯͰάάͬͯΈ͍ͯͩ͘͞
    N
    N

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. JavaScript
    JavaScript
    (ES5/6/7)
    ϥΠϒϥϦ
    ɾK2VFSZ
    ɾ3FBDUKTGBNJMJFT
    ɾ"OHVMBSKT
    ɾCBDLCPOFKT
    ɾCPPUTUSBQ
    ɾ.BUFSJBM6*
    ɾFUD
    ઃܭࢥ૝ +4

    ɾ.7$ .79

    ɾ&WFOU%SJWFO
    ɾ3FBDUJWF
    ɾ1SPNJTF
    ɾ4JOHMF1BHF"SDIJUFDUVSF
    "MUKT
    ɾ5ZQF4DSJQU
    ɾ$P⒎FF4DSJQU
    㾎 ͜Ε͕Ұ൪ෳࡶʂʂ
    㾎 ઃܭࢥ૝͕ͳ͍ͱେ͖ͳΞϓϦέʔγϣϯΛ૊Ίͳ͍
    㾎 ϥΠϒϥϦ΋·ͩఆ൪͕ग़͖͍ͯͯͳ͍
    㾎 ݴޠ࢓༷͕ශऑͰɺίʔσΟϯά͕େมɺ"MUKT͕ଘࡏ͢Δ

    View full-size slide

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

    View full-size slide

  13. CSS3
    ઃܭࢥ૝ $44

    ɾ00$44
    ɾ4."$4
    ɾ#&.
    ϙετϓϩηοα
    ɾ"VUP1SFpYFS
    ϓϦϓϩηοα
    ɾ4BTT
    ɾ-FTT
    ɾ4UZMVT
    CSS
    㾎 ઃܭࢥ૝ΛೖΕΔͱϝϯςφϒϧʹ͠΍͍͢
    㾎 ϒϥ΢βࠩҟ͸ࠓޙ΋෇͖߹͏
    㾎 ݴޠ࢓༷͕ශऑͰɺϓϦϓϩηοα͕ൃୡ

    View full-size slide

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

    View full-size slide

  15. ϦϦʔε
    ɾ+FOLJOT
    ɾ'51
    ίϯύΠϧ Ϗϧυ
    ɾ8FCQBDL
    ɾ#SPXTFSJGZ
    ɾ#BCFM
    ɾ(VMQ
    ɾ(SVOU
    ίϯύΠϧ & Ϗϧυ & ϦϦʔε
    㾎 ෳࡶͳ΋ͷΛѻ͏ʹ͸ɺίϯύΠϧ΍Ϗϧυ͕ඞਢ
    㾎 +BWB4DSJQUϕʔεͰѻ͏΋ͷ͕ଟ͍
    㾎 ʮ+FOLJOTઃఆ͠ͱ͍ͯʯͱݴΘΕΔ͜ͱ΋ଟ͍

    View full-size slide

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

    View full-size slide

  17. ύοέʔδϚωʔδϟʔ & ςετ & ϑΥʔϚολ
    㾎 ผʹ஌Βͳͯ͘΋ੜ͖͍͚ͯΔ͚Ͳɺ͋Δͱ඼্࣭͕͕Δ
    㾎 ଞͷݴޠͰ͸౰ͨΓલʹ͋Δ͜ͱͳͷͰੋඇֶΜͰ͓͖͍ͨ
    ςετ
    ɾ.PDIB
    ɾ4FMFOJVN
    ɾ8FC%SJWFS
    ϑΥʔϚολ
    ɾ&4-JOU
    ύοέʔδϚωʔδϟ
    ɾOQN
    ɾ#PXFS

    View full-size slide

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

    View full-size slide

  19. ͦͷଞ
    㾎 ࣮͸Ұ൪ॏཁͳͱ͜ΖͳͷͰ͸ͳ͍͔ͱࢥ͍ͬͯΔ
    㾎 ʮΑ͘੾ΕΔแஸΛͲ͏࢖͏͔ɺ࢖ͬͨ݁ՌͲ͏ͩͬͨͷ͔ʯ
    㾎 ։ൃϑϩʔ͸νʔϜ։ൃͰ͸ॏཁɻεϐʔυͱΫΦϦςΟ61
    㾎 ࠷ۙ͸جૅతͳαʔόʔٕज़͸ϑϩϯτνʔϜʹ΋͓ئ͍ͯ͠Δ
    㾎 πʔϧ܈͕࢖͑Δͱɺඈ༂తʹੜ࢈ੑ্͕͕Δ
    πʔϧ܈
    ɾ$ISPNF%FW5PPMT
    ɾ-PDBM1SPYZ
    ෼ੳ
    ɾ(PPHMF"OBMZUJDT
    ɾ42-
    ɾ)JWF2-
    ։ൃϑϩʔ
    ɾ΢ΥʔλʔϑΥʔϧ
    ɾεΫϥϜ
    ɾ(JUIVC ϑϩʔ
    αʔόʔ
    ɾ44)
    ɾ%BUBCBTF
    ɾ4IFMM
    ϓϥϯχϯά
    ɾ""333
    ɾFUD

    View full-size slide

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

    View full-size slide

  21. ϑϩϯτΤϯυΤϯδχΞͷ
    ਎ͷৼΓํ

    View full-size slide

  22. δΣωϥϦετࢤ޲

    ੒Ռࢹ఺

    View full-size slide

  23. 㾎δΣωϥϦετࢤ޲
    㾎੒Ռࢹ఺
    㾎 ݸਓతʹ͸ϑϩϯτΤϯυ͸δΣωϥϦετ͕ྑ͍
    㾎 ೥͘Β͍Ͱٕज़ͷӫރ੝ਰ͕͋Δʢ3FBDU΍"OHVMBS͕೥ޙʁʣ
    㾎 ٕज़εΩϧ͸πʔϧͰ͋ΔʢͰ΋࢖͑ͳ͍͸࿦֎ɻ੾Εͳ͍แஸ͸ෆཁʣ
    㾎 πʔϧΛ࢖ͬͯԿΛ੒͠਱͛Δͷ͔͕େ੾ͩͱײ͍ͯ͡Δ
    㾎 ࣗ෼ͷٕज़εΩϧΛԿʹ࢖͏ͷ͔ɺࣗ෼Ͱίϯτϩʔϧ͍ͨ͠
    㾎 ٕज़εΩϧΛ࢖ͬͨ݁Ռ͸ɺ ࣗ෼Ͱ
    ਖ਼͘͠ධՁ͍ͨ͠

    View full-size slide

  24. http://frontend.paint-ink.com/

    View full-size slide

  25. 㾎ڵຯ͕͋ͬͯػցֶश΍ࣗવݴޠॲཧΛ΍͍ͬͯΔ
    㾎ଞʹ΋ɺJ1IPOFΞϓϦ։ൃ΋΍͍ͬͯΔ
    㾎"OESPJE͸͓ษڧத
    㾎αʔόʔαΠυ΍ΠϯϑϥपΓ΋͓ษڧத
    㾎(`TͰϝϯλʔ͍ͯͯ͠ࢥ͏͜ͱ͸ɺଞۀքͷਓ͸ࢹ఺͕ྑ͍͠ɺ

    ΍Δؾ͕͋Δਓ͸ɺࣗ෼Λม͑ɺࣗ෼ͷपΓ΋ม͍͑ͯ͘
    㾎ͨ͘͞Μͷ఺͕͋ͬͯͦΕ͕ઢʹͳΔײ͕֮͋Δɻ

    ͨ͘͞Μͷ఺Λ࣋ͭ͜ͱͰࣗ෼ʹ͔͠ݟ͑ͳ͍ࢹ఺͕Ͱ͖ΔΜͩͱࢥ͏
    㾎ྫ͑͹ͦΕΛػցֶशͷ෼໺Ͱ΋େ੾ʹ͍ͨ͠
    ࠷ۙࢥ͍ͬͯΔ͜ͱ

    View full-size slide

  26. IUUQTqJDLSQN[N2,
    Thank you
    http://www.yoheim.net
    @yoheiMune

    View full-size slide