Wanna be a Front-end Professional 2016 - Speaker Deck

Wanna be a Front-end Professional 2016

by Yohei Munesada

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Attention 㾎 ଟ෼ʹओ؍తͳ͜ͱؚ͕·Ε·͢  㾎 άϥϑΟΧϧͳ࿩͸͋Γ·ͤΜʢ%ͳͲʣ  㾎 ϑϩϯτΤϯυΤϯδχΞ͕੒ՌΛग़͢ʹ͸  ͱ͍͏࿩ʹ஫໨ͯ͠ݟ͍ͨͱࢥ͍·͢

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ԿͰ͜Μͳʹ͍ͬͺ͍ ඞཁͳΜͩΖ͏͔ʁ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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͕ଘࡏ͢Δ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

δΣωϥϦετࢤ޲ ੒Ռࢹ఺

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

࠷ޙʹ

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

㾎ڵຯ͕͋ͬͯػցֶश΍ࣗવݴޠॲཧΛ΍͍ͬͯΔ 㾎ଞʹ΋ɺJ1IPOFΞϓϦ։ൃ΋΍͍ͬͯΔ 㾎"OESPJE͸͓ษڧத 㾎αʔόʔαΠυ΍ΠϯϑϥपΓ΋͓ษڧத 㾎(`TͰϝϯλʔ͍ͯͯ͠ࢥ͏͜ͱ͸ɺଞۀքͷਓ͸ࢹ఺͕ྑ͍͠ɺ  ΍Δؾ͕͋Δਓ͸ɺࣗ෼Λม͑ɺࣗ෼ͷपΓ΋ม͍͑ͯ͘ 㾎ͨ͘͞Μͷ఺͕͋ͬͯͦΕ͕ઢʹͳΔײ͕֮͋Δɻ  ͨ͘͞Μͷ఺Λ࣋ͭ͜ͱͰࣗ෼ʹ͔͠ݟ͑ͳ͍ࢹ఺͕Ͱ͖ΔΜͩͱࢥ͏ 㾎ྫ͑͹ͦΕΛػցֶशͷ෼໺Ͱ΋େ੾ʹ͍ͨ͠ ࠷ۙࢥ͍ͬͯΔ͜ͱ

Slide 30

Slide 30 text

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