ぼくのフロントエンド学習

Mix Leap Study 特別編 - CTO Night KANSAI Vol.2での登壇資料
https://yahoo-osaka.connpass.com/event/119899/

@Twitter
https://twitter.com/__sakito__

Transcript

1. ΅͘ͷϑϩϯτΤϯυֶश
 .JY
   -FBQ
   4UVEZ
   ಛผฤ
   
   $50
   /JHIU
   ,"/4"*
   7PM
2. wTBLJUP !@@TBLJUP@@
   w'SPOU&OE
   &OHJOFFS
   w3FBDU XFCQBDL (BUTCZ+4
   w&WFOU
   w#POpSF
   'SPOUFOE
   w3FBDU
   NFFUVQ
   w*OTJEF
   'SPOUFOE
   
3. ϠϑʔͰ΍ͬͯΔ͜ͱ wϑϩϯτΤϯυνʔϜʹॴଐ
   w#UP#ͷϑϩϯτΤϯυ
   wओʹ3FBDUΛ࢖͍ͬͯΔ
   wٕज़બఆɺϨϏϡʔɺ։ൃͳͲ
   wશࣾϑϩϯτΤϯυΠϕϯτͷ։࠵
   wϥϯνձ
   w-5ձ
   wࣾ֎޲͚ษڧձ
4. ϓϥΠϕʔτͰ΍ͬͯΔ͜ͱ wϑϩϯτΤϯυؔ࿈ͷهࣄΛॻ͘
   wษڧձ
   wओ࠵Λ͢Δ
   wࢀՃΛ͢Δ
   wελοϑʹͳΔ
   w෭ۀΛ͢Δ
5. ࠓ೔࿩͢͜ͱɺ࿩͞ͳ͍͜ͱ
6. ࠓ೔࿩͢͜ͱɺ࿩͞ͳ͍͜ͱ w࿩͢͜ͱ
   wϑϩϯτΤϯυΛֶश͢Δ͜ͱʹ͍ͭͯͷࣗ࿦
   wνʔϜɺձࣾͰͲͷΑ͏ʹֶशΛਐΊ͍ͯΔͷ͔
   wֶशΛ௨ͯ͠ಘΒΕͨࣗ෼ͷମݧ
   w࿩͞ͳ͍͜ͱ
   w+BWB4DSJQU΍3FBDUͷ࿩
   wٕज़ίʔυ͸Ͱͯ͜ͳ͍
7. ϑϩϯτΤϯυ͕֮͑Δ͜ͱ͸ͨ͘͞Μ͋Δ
11. ϑϩϯτΤϯυ͕֮͑Δ͜ͱ͸ͨ͘͞Μ͋Δ
 ౓໨
12. w)5.-ɺ$44ɺ+BWB4DSJQU
    wOQNͳͲͷϑϩϯτΤϯυΛߏ੒͢Δٕज़
    wϒϥ΢βʹ͍ͭͯ
    wΞΫηγϏϦςΟ
    wύϑΥʔϚϯε
    wϥΠϒϥϦ΍ϑϨʔϜϫʔΫͷ͓࡞๏
    wਓʹΑΔ͕ɺόοΫΤϯυɺσβΠϯɺFUDʜ
13. ٕज़ͷҠΓมΘΓ΋ܹ͍͠
14. ͲͷΑ͏ʹʮֶशʯ͍ͯ͘͠ͷ͔
15. ͦ΋ͦ΋ʮֶशʯͱ͸ʁ
16. Ҿ༻ݩɿ8JLJQFEJB
    ֶश
 IUUQTKBXJLJQFEJBPSHXJLJ&"%"&#' 
    ֶशʢ͕͘͠Ύ͏ʣ͸ɺମݧ΍఻ฉͳͲʹΑΔܦݧΛ஝͑Δ͜ͱͰ͋Δɻੜཧֶ ΍৺ཧֶʹ͓͍ͯ͸ɺܦݧʹΑͬͯಈ෺ʢਓؒΛؚΊʣͷߦಈ͕ม༰͢Δ͜ͱΛࢦ ͢ɻ܁Γฦ͠ߦ͏ֶशΛ࿅शʢΕΜ͠Ύ͏ʣͱ͍͏ɻ Ұൠతͳֶश
17. ΤϯδχΞͷֶश ࣗ࿦ ֶͿ
    Πϯϓοτ ࣮ࡍʹखΛಈ͔͢
    ɾίʔυΛॻ͘
    ɾಈ͘·Ͱ܁Γฦ͢ ஌ࣝΛఆணͤ͞Δ
 Ξ΢τϓοτ
18. ֶशʹ͍ͭͯΦεεϝͷهࣄ DTTUSJDLT
    
    -FBSOJOH
    UP
    -FBSO
 IUUQTDTTUSJDLTDPNMFBSOJOHUPMFBSO
19. ΅͘ͷΠϯϓοτͱΞ΢τϓοτ
20. Πϯϓοτ wҰ൪͸͍͍ͷ͸ެࣜυΩϡϝϯταΠτΛಡΉ
    w(JU)VCͰ044ͷ*TTVF΍13ΛಡΉ
    wಡΉ͚ͩͰ͸෼͔Βͳ͍͜ͱ΋͋Δ
    w࠷ۙ͸ಈըֶशίϯςϯπΛ࢖͍ͬͯΔ
    wಈըͰղઆΛฉ͖ͳ͕ΒίʔυΛॻ͘
    w೉͍͠ϙΠϯτͳͲ΋ղઆ͕͋ΔͷͰཧղ͕ਐΈ΍͍͢
    wࠓ೔͸ͭΦεεϝͷಈըֶशίϯςϯπΛ঺հ
21. &HHIFBE IUUQTFHHIFBEJP Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
22. &HHIFBE IUUQTFHHIFBEJP Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
23. &HHIFBE
    
    ༗ྉͷಈըίϯςϯπ w༗ྉͷಈըίϯςϯπ
 ɾݸਓɿֹ݄ɺ

    
    
    
    
    
    
    
    
    
    
    
    ೥ֹ
 ɾνʔϜɿ೥ֹ
 ɾ&OUFSQSJTFɿ೥ֹ Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
24. &HHIFBE
    
    ๛෋ͳίϯςϯπ wίϯςϯπྔ͕ଟ͍
    wೖ໳ʙԠ༻·Ͱ
    w3FBDUʹ͍ͭͯखް͍
    wIPPLT͕ϦϦʔεͱ
 ಉ࣌ʹಈըߋ৽͞Εͨ
    wଞͷٕज़ʹ͍ͭͯ΋͔ͳΓ
 ॆ࣮͍ͯ͠Δ Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
25. &HHIFBE
    
    ๛෋ͳίϯςϯπ Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
26. &HHIFBE
    
    ๛෋ͳίϯςϯπ Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
27. &HHIFBE
    
    ஶ໊ͳ౤ߘऀୡ wϑϩϯτΤϯυͷஶ໊ͳਓ͕ଟ͍
    w5$
    1SPQPTBMTϝϯόʔͷਓ
    w༗໊ͳ044Λߏஙͨ͠ਓ
    w֤ࠃͰొஃ͍ͯ͠Δਓ Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
28. &HHIFBE
    
    ݟ΍͍͢ίϯςϯπ wಈըͷιʔείʔυɺ
 จࣈى͕͜͠ఏڙ͞Ε͍ͯΔ
    wӳޠ͕תೳͰ͸ͳͯ͘΋ɺ
 ཧղ͠΍͍͢ Ҿ༻ݩɿ&HHIFBE
 IUUQTFHHIFBEJP
29. 'SPOUFOE
    .BTUFST IUUQTGSPOUFOENBTUFSTDPN Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
30. 'SPOUFOE
    .BTUFST IUUQTGSPOUFOENBTUFSTDPN Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
31. 'SPOUFOE
    .BTUFST
    
    ༗ྉͷಈըίϯςϯπ w༗ྉͷಈըίϯςϯπ
 ɾݸਓɿֹ݄ɺ

    
    
    
    
    
    
    
    
    
    
    
    ೥ֹ
 ɾνʔϜɿ೥ֹ

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ֹ݄

    
    
    ΞΧ΢ϯτ Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
32. 'SPOUFOE
    .BTUFST
    
    ίʔεผͷίϯςϯπ wϨϕϧʹ߹Θͤͨίʔε͕
 ἧ͍ͬͯΔ
    wࣗ෼ͷΩϟϦΞͷঢ়گʹదͨ͠
 ίʔεΛબ୒Ͱ͖Δ Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
33. 'SPOUFOE
    .BTUFST
    
    ίʔεผͷίϯςϯπ Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
34. 'SPOUFOE
    .BTUFST
    
    XPSLTIPQT wΦϯϥΠϯ্ͷϥΠϒͰ
 XPSLTIPQTΛड͚ΕΔ
    wߨࢣਞ͕༗໊ͳਓ͹͔Γ Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
35. 'SPOUFOE
    .BTUFST
    
    XPSLTIPQT Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
36. 'SPOUFOE
    .BTUFST
    
    ஶ໊ͳߨࢣਞ w্͛Ε͹ΩϦ͕ͳ͍΄Ͳɺ
 ༗໊ͳاۀͷ։ൃऀ͕͍Δ
    w.JDSPTPGU
    w"EPCF
    w1BZ1BM
    w-JOLFE*O
    w/FUqJYͳͲɾɾɾ
    w&WBO
    :PV΋͍Δ Ҿ༻ݩɿ'SPOUFOE
    .BTUFST
 IUUQTGSPOUFOENBTUFSTDPN
37. ͲͪΒ͕͍͍ͷʁ w&HHIFBE͸3FBDUͷ։ൃऀʹಛʹΦεεϝʂʂ
    w'SPOUFOE
    .BTUFST͸໢ཏతʹϑϩϯτΤϯυΛֶͼ͍ͨਓ΍
 ෯޿͘஌ࣝΛਂ۷Γ͍ͨਓʹΦεεϝʂʂ
    w྆ํڞແྉͰ΋ࢼ͢͜ͱ͕Ͱ͖ΔͷͰɺࢼ͢ͱ͍͍
    w๻͸྆ํొ࿥ͯ͠Δ
    w༗ྉ͕ͩͦΕҎ্ͷϦλʔϯ͕͋Δίϯςϯπ
38. Ξ΢τϓοτ wΠϯϓοτͨ͜͠ͱΛԿ͔͠Βͷܗʹ͢Δ
    wࣾ֎Ͱ΋ࣾ಺Ͱ΋Α͍ɺ΍Γ΍͍͢ͱ͜Ζ͔Β
    wؒҧ͑ͨ͜ͱΛݴΘͳ͍Α͏ʹௐ΂Δɺಈ͔͢Λ܁Γฦ͢
 
    ஌ࣝͷఆணʹܨ͕Δ
    wϑΟʔυόοΫ͕΋Β͑Δɺٞ࿦͕Ͱ͖Δ
    wίϯςϯπ͸ͳΜͰ΋Α͍
    wόζΛૂΘͳͯ͘΋͍͍
    wΞ΢τϓοτΛ͢Δ͜ͱ͕େࣄ
39. νʔϜɺձࣾͰ΍͍ͬͯΔΞ΢τϓοτ
40. ϦϦʔεϊʔτΛಡΉ
    
    νʔϜ w࢖༻͍ͯ͠Δٕज़΍ڵຯ͋Δٕज़ͷ
 όʔδϣϯ͕มߋ͞ΕͨΒϦϦʔεϊʔτΛ·ͱΊΔ
    w·ͱΊͨਓ͕νʔϜʹڞ༗͢Δ
    wϑΥʔϚοτ͸ͳΜͰ΋͍͍
41. ࣋ͪճΓͰ-5Λ͢Δ
    
    νʔϜ wϑϩϯτΤϯυʹؔ͢Δ-5Λ࣋ͪճΓͰߦ͏
    wिʹ౓
    w࣋ͪճΓ͕ͩɺࣗ෼ͷ୲౰೔Ҏ֎΋ඈͼࠐΜͰ0,
    w࠷ۙؾʹͳΔٕज़ɺ1+Ͱࠔͬͨ͜ͱɺղܾͨ͜͠ͱͳͲɾɾɾ
42. -5ձ
    
    શࣾ wϑϩϯτΤϯυ͚ͩͰ͸ͳ͘ɺJ04ɺ"OESPJEɺ%FTJHOͳͲ
 ৭ΜͳྖҬͰߦΘΕ͍ͯΔ
    wࣾ಺Ͱ֤αʔϏεͰͷऔΓ૊ΈͳͲΛ-5͢Δ
    w൒ظʹ౓͘Β͍ͷϖʔεͰ։࠵
    wࢀՃਓ਺͸ਓҎ্ʹͳΔ͜ͱ΋
43. ϝσΟΞ
    
    શࣾ w:BIPP
    +"1"/
    5FDI
    #MPH
    w2JJUB
    wࣾһֶ͕Μٕͩज़΍
 ࣾ಺Ͱߦͳ͍ͬͯΔऔΓ૊Έ Λ౤ߘ͍ͯ͠Δ Ҿ༻ݩɿ2JJUB
 IUUQTRJJUBDPNPSHBOJ[BUJPOTZBIPPKBQBODPSQ
44. ֶशΛଓ͚Δ͜ͱͰಘΒΕΔ͜ͱ
45. ֶशΛଓ͚Δ͜ͱͰಘΒΕΔ͜ͱ wϑϩϯτΤϯυͷҠΓมΘΓΛָ͠ΜͰ͍͚Δ
    wࣄલʹ஌͓͚ͬͯ͹ٕज़มԽʹ͍͍ͭͯ͘උ͑͸Ͱ͖Δ
    wࢢ৔Ձ஋͕ߴ·Δ
    wࢢ৔Ձ஋͕ߴ͍ਓ͸ࣾ಺Ձ஋΋ߴ͍
    wࣗ෼͕ಘҙͳ͜ͱΛ஌ͬͯ΋Β͑Δ
46. ֶश͔Βൃలͨࣗ͠෼ͷମݧ
47. ֶश͔Βൃలͨࣗ͠෼ͷମݧ
    
     w΍͍ͬͯͨ͜ͱ
 ɾϑϩϯτΤϯυͷษڧձʹొஃͨ͠ΓɺࢀՃΛੵۃతʹߦ͏
 ɾνʔϜपΓ΍෼ใ෦԰ʹϑϩϯτΤϯυͷ৘ใΛྲྀ͢
    wಘΒΕͨ͜ͱ
 ɾϑϩϯτΤϯυͰؾʹͳΔ৘ใͷٞ࿦ʹܨ͕ͬͨ
 ɾࣗ෼ͷڵຯ͋Δٕज़ΛपΓʹ஌ͬͯ΋Β͑ͨ
 ɾձࣾͷ1+ͰؔΘΒͳ͍ਓ͔Β੠Λ͔͚ͯ΋Β͑ͨ
 ɾࣾ಺ɺࣾ֎޲͚ษڧձΛओ࠵͠ͳ͍͔ͱ੠Λ͔͚ͯ΋Β͑ͨ
48. ֶश͔Βൃలͨࣗ͠෼ͷମݧ
    
     w΍͍ͬͯͨ͜ͱ
 ɾ:BIPP
    +"1"/
    5FDI
    #MPHΛॻ͍ͨ
 ʮϠϑʔגࣜձࣾʹ͓͚Δ8FCϑϩϯτΤϯυͷٕज़બఆʯ
 IUUQTUFDICMPHZBIPPDPKQBEWFOUDBMFOEBSZBIPPGSPOUFOE
    wಘΒΕͨ͜ͱ
 ɾࣾ֎ͷଟ͘ͷਓʹϠϑʔͷϑϩϯτΤϯυΛ஌ͬͯ΋Β͑ͨ
 ɾࣾ֎ͰهࣄΛॻ͍ͨਓͩͱ͍͏ೝࣝΛͯ͠΋Β͑ͨ
 ɾࣾ಺ͷؔΘΓͷͳ͔ͬͨํʹ੠Λ͔͚ͯ΋Β͏͜ͱ͕Ͱ͖ͨ
 ɾ%FWFMPQFST
    4VNNJU
    ͷొஃʹܨ͕ͬͨ
 ɾࠓ೔ొஃͰ͖ͨͷ΋͜͏͍ͬͨԑ͕͋ͬͯͷ͜ͱ
49. ·ͱΊ
50. ·ͱΊ wʮֶशʯ͸ΠϯϓοτͱΞ΢τϓοτΛͯ͠
 ஌͕ࣝఆண͢Δ·Ͱ͕ͭͷαΠΫϧ
    w&HHIFBEͱ'SPOUFOE
    .BTUFST͸͍͍ͧʂʂʂ
    wֶशΛ܁Γฦͯࣗ͠෼ͷࢢ৔Ձ஋Λ্͍͛ͯ͜͏
    wͳʹΑΓֶशΛָ͠ΜͰ͍͜͏
51. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠