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

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

@Twitter
https://twitter.com/__sakito__

Transcript

1. ΅͘ͷϑϩϯτΤϯυֶश

   .JY-FBQ4UVEZಛผฤ$50/JHIU,"/4"*7PM
   

   View Slide

2. wTBLJUP !@@TBLJUP@@
   
   w'SPOU&OE&OHJOFFS
   w3FBDU XFCQBDL (BUTCZ+4
   w&WFOU
   w#POpSF'SPOUFOE
   w3FBDUNFFUVQ
   w*OTJEF'SPOUFOE
   

   View Slide

3. ϠϑʔͰ΍ͬͯΔ͜ͱ
   wϑϩϯτΤϯυνʔϜʹॴଐ
   w#UP#ͷϑϩϯτΤϯυ
   wओʹ3FBDUΛ࢖͍ͬͯΔ
   wٕज़બఆɺϨϏϡʔɺ։ൃͳͲ
   wશࣾϑϩϯτΤϯυΠϕϯτͷ։࠵
   wϥϯνձ
   w-5ձ
   wࣾ֎޲͚ษڧձ
   

   View Slide

4. ϓϥΠϕʔτͰ΍ͬͯΔ͜ͱ
   wϑϩϯτΤϯυؔ࿈ͷهࣄΛॻ͘
   wษڧձ
   wओ࠵Λ͢Δ
   wࢀՃΛ͢Δ
   wελοϑʹͳΔ
   w෭ۀΛ͢Δ
   

   View Slide

5. ࠓ೔࿩͢͜ͱɺ࿩͞ͳ͍͜ͱ
   

   View Slide

6. ࠓ೔࿩͢͜ͱɺ࿩͞ͳ͍͜ͱ
   w࿩͢͜ͱ
   wϑϩϯτΤϯυΛֶश͢Δ͜ͱʹ͍ͭͯͷࣗ࿦
   wνʔϜɺձࣾͰͲͷΑ͏ʹֶशΛਐΊ͍ͯΔͷ͔
   wֶशΛ௨ͯ͠ಘΒΕͨࣗ෼ͷମݧ
   w࿩͞ͳ͍͜ͱ
   w+BWB4DSJQU΍3FBDUͷ࿩
   wٕज़ίʔυ͸Ͱͯ͜ͳ͍
   

   View Slide

7. ϑϩϯτΤϯυ͕֮͑Δ͜ͱ͸ͨ͘͞Μ͋Δ
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. ϑϩϯτΤϯυ͕֮͑Δ͜ͱ͸ͨ͘͞Μ͋Δ

    ౓໨
    
    

    View Slide

12. w)5.-ɺ$44ɺ+BWB4DSJQU
    wOQNͳͲͷϑϩϯτΤϯυΛߏ੒͢Δٕज़
    wϒϥ΢βʹ͍ͭͯ
    wΞΫηγϏϦςΟ
    wύϑΥʔϚϯε
    wϥΠϒϥϦ΍ϑϨʔϜϫʔΫͷ͓࡞๏
    wਓʹΑΔ͕ɺόοΫΤϯυɺσβΠϯɺFUDʜ
    

    View Slide

13. ٕज़ͷҠΓมΘΓ΋ܹ͍͠
    

    View Slide

14. ͲͷΑ͏ʹʮֶशʯ͍ͯ͘͠ͷ͔
    

    View Slide

15. ͦ΋ͦ΋ʮֶशʯͱ͸ʁ
    

    View Slide

16. Ҿ༻ݩɿ8JLJQFEJBֶश

    IUUQTKBXJLJQFEJBPSHXJLJ&"%"&#'
    ֶशʢ͕͘͠Ύ͏ʣ͸ɺମݧ΍఻ฉͳͲʹΑΔܦݧΛ஝͑Δ͜ͱͰ͋Δɻੜཧֶ
    ΍৺ཧֶʹ͓͍ͯ͸ɺܦݧʹΑͬͯಈ෺ʢਓؒΛؚΊʣͷߦಈ͕ม༰͢Δ͜ͱΛࢦ
    ͢ɻ܁Γฦ͠ߦ͏ֶशΛ࿅शʢΕΜ͠Ύ͏ʣͱ͍͏ɻ
    Ұൠతͳֶश
    

    View Slide

17. ΤϯδχΞͷֶश ࣗ࿦
    
    ֶͿ
    Πϯϓοτ
    
    ࣮ࡍʹखΛಈ͔͢
    ɾίʔυΛॻ͘
    ɾಈ͘·Ͱ܁Γฦ͢
    ஌ࣝΛఆணͤ͞Δ

    Ξ΢τϓοτ
    
    

    View Slide

18. ֶशʹ͍ͭͯΦεεϝͷهࣄ
    DTTUSJDLT-FBSOJOHUP-FBSO

    IUUQTDTTUSJDLTDPNMFBSOJOHUPMFBSO
    

    View Slide

19. ΅͘ͷΠϯϓοτͱΞ΢τϓοτ
    

    View Slide

20. Πϯϓοτ
    wҰ൪͸͍͍ͷ͸ެࣜυΩϡϝϯταΠτΛಡΉ
    w(JU)VCͰ044ͷ*TTVF΍13ΛಡΉ
    wಡΉ͚ͩͰ͸෼͔Βͳ͍͜ͱ΋͋Δ
    w࠷ۙ͸ಈըֶशίϯςϯπΛ࢖͍ͬͯΔ
    wಈըͰղઆΛฉ͖ͳ͕ΒίʔυΛॻ͘
    w೉͍͠ϙΠϯτͳͲ΋ղઆ͕͋ΔͷͰཧղ͕ਐΈ΍͍͢
    wࠓ೔͸ͭΦεεϝͷಈըֶशίϯςϯπΛ঺հ
    

    View Slide

21. &HHIFBE IUUQTFHHIFBEJP
    
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

22. &HHIFBE IUUQTFHHIFBEJP
    
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

23. &HHIFBE༗ྉͷಈըίϯςϯπ
    w༗ྉͷಈըίϯςϯπ

    ɾݸਓɿֹ݄ɺ

    ೥ֹ

    ɾνʔϜɿ೥ֹ

    ɾ&OUFSQSJTFɿ೥ֹ
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

24. &HHIFBE๛෋ͳίϯςϯπ
    wίϯςϯπྔ͕ଟ͍
    wೖ໳ʙԠ༻·Ͱ
    w3FBDUʹ͍ͭͯखް͍
    wIPPLT͕ϦϦʔεͱ

    ಉ࣌ʹಈըߋ৽͞Εͨ
    wଞͷٕज़ʹ͍ͭͯ΋͔ͳΓ

    ॆ࣮͍ͯ͠Δ
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

25. &HHIFBE๛෋ͳίϯςϯπ
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

26. &HHIFBE๛෋ͳίϯςϯπ
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

27. &HHIFBEஶ໊ͳ౤ߘऀୡ
    wϑϩϯτΤϯυͷஶ໊ͳਓ͕ଟ͍
    w5$1SPQPTBMTϝϯόʔͷਓ
    w༗໊ͳ044Λߏஙͨ͠ਓ
    w֤ࠃͰొஃ͍ͯ͠Δਓ
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

28. &HHIFBEݟ΍͍͢ίϯςϯπ
    wಈըͷιʔείʔυɺ

    จࣈى͕͜͠ఏڙ͞Ε͍ͯΔ
    wӳޠ͕תೳͰ͸ͳͯ͘΋ɺ

    ཧղ͠΍͍͢
    Ҿ༻ݩɿ&HHIFBE

    IUUQTFHHIFBEJP
    

    View Slide

29. 'SPOUFOE.BTUFST IUUQTGSPOUFOENBTUFSTDPN
    
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

30. 'SPOUFOE.BTUFST IUUQTGSPOUFOENBTUFSTDPN
    
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

31. 'SPOUFOE.BTUFST༗ྉͷಈըίϯςϯπ
    w༗ྉͷಈըίϯςϯπ

    ɾݸਓɿֹ݄ɺ

    ೥ֹ

    ɾνʔϜɿ೥ֹ

    ֹ݄

    ΞΧ΢ϯτ
    
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

32. 'SPOUFOE.BTUFSTίʔεผͷίϯςϯπ
    wϨϕϧʹ߹Θͤͨίʔε͕

    ἧ͍ͬͯΔ
    wࣗ෼ͷΩϟϦΞͷঢ়گʹదͨ͠

    ίʔεΛબ୒Ͱ͖Δ
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

33. 'SPOUFOE.BTUFSTίʔεผͷίϯςϯπ
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

34. 'SPOUFOE.BTUFSTXPSLTIPQT
    wΦϯϥΠϯ্ͷϥΠϒͰ

    XPSLTIPQTΛड͚ΕΔ
    wߨࢣਞ͕༗໊ͳਓ͹͔Γ
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

35. 'SPOUFOE.BTUFSTXPSLTIPQT
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

36. 'SPOUFOE.BTUFSTஶ໊ͳߨࢣਞ
    w্͛Ε͹ΩϦ͕ͳ͍΄Ͳɺ

    ༗໊ͳاۀͷ։ൃऀ͕͍Δ
    w.JDSPTPGU
    w"EPCF
    w1BZ1BM
    w-JOLFE*O
    w/FUqJYͳͲɾɾɾ
    w&WBO:PV΋͍Δ
    Ҿ༻ݩɿ'SPOUFOE.BTUFST

    IUUQTGSPOUFOENBTUFSTDPN
    

    View Slide

37. ͲͪΒ͕͍͍ͷʁ
    w&HHIFBE͸3FBDUͷ։ൃऀʹಛʹΦεεϝʂʂ
    w'SPOUFOE.BTUFST͸໢ཏతʹϑϩϯτΤϯυΛֶͼ͍ͨਓ΍

    ෯޿͘஌ࣝΛਂ۷Γ͍ͨਓʹΦεεϝʂʂ
    w྆ํڞແྉͰ΋ࢼ͢͜ͱ͕Ͱ͖ΔͷͰɺࢼ͢ͱ͍͍
    w๻͸྆ํొ࿥ͯ͠Δ
    w༗ྉ͕ͩͦΕҎ্ͷϦλʔϯ͕͋Δίϯςϯπ
    

    View Slide

38. Ξ΢τϓοτ
    wΠϯϓοτͨ͜͠ͱΛԿ͔͠Βͷܗʹ͢Δ
    wࣾ֎Ͱ΋ࣾ಺Ͱ΋Α͍ɺ΍Γ΍͍͢ͱ͜Ζ͔Β
    wؒҧ͑ͨ͜ͱΛݴΘͳ͍Α͏ʹௐ΂Δɺಈ͔͢Λ܁Γฦ͢

    ஌ࣝͷఆணʹܨ͕Δ
    wϑΟʔυόοΫ͕΋Β͑Δɺٞ࿦͕Ͱ͖Δ
    wίϯςϯπ͸ͳΜͰ΋Α͍
    wόζΛૂΘͳͯ͘΋͍͍
    wΞ΢τϓοτΛ͢Δ͜ͱ͕େࣄ
    

    View Slide

39. νʔϜɺձࣾͰ΍͍ͬͯΔΞ΢τϓοτ
    

    View Slide

40. ϦϦʔεϊʔτΛಡΉνʔϜ
    w࢖༻͍ͯ͠Δٕज़΍ڵຯ͋Δٕज़ͷ

    όʔδϣϯ͕มߋ͞ΕͨΒϦϦʔεϊʔτΛ·ͱΊΔ
    w·ͱΊͨਓ͕νʔϜʹڞ༗͢Δ
    wϑΥʔϚοτ͸ͳΜͰ΋͍͍
    

    View Slide

41. ࣋ͪճΓͰ-5Λ͢ΔνʔϜ
    wϑϩϯτΤϯυʹؔ͢Δ-5Λ࣋ͪճΓͰߦ͏
    wिʹ౓
    w࣋ͪճΓ͕ͩɺࣗ෼ͷ୲౰೔Ҏ֎΋ඈͼࠐΜͰ0,
    w࠷ۙؾʹͳΔٕज़ɺ1+Ͱࠔͬͨ͜ͱɺղܾͨ͜͠ͱͳͲɾɾɾ
    

    View Slide

42. -5ձશࣾ
    wϑϩϯτΤϯυ͚ͩͰ͸ͳ͘ɺJ04ɺ"OESPJEɺ%FTJHOͳͲ

    ৭ΜͳྖҬͰߦΘΕ͍ͯΔ
    wࣾ಺Ͱ֤αʔϏεͰͷऔΓ૊ΈͳͲΛ-5͢Δ
    w൒ظʹ౓͘Β͍ͷϖʔεͰ։࠵
    wࢀՃਓ਺͸ਓҎ্ʹͳΔ͜ͱ΋
    

    View Slide

43. ϝσΟΞશࣾ
    w:BIPP+"1"/5FDI#MPH
    w2JJUB
    wࣾһֶ͕Μٕͩज़΍

    ࣾ಺Ͱߦͳ͍ͬͯΔऔΓ૊Έ
    Λ౤ߘ͍ͯ͠Δ
    Ҿ༻ݩɿ2JJUB

    IUUQTRJJUBDPNPSHBOJ[BUJPOTZBIPPKBQBODPSQ
    

    View Slide

44. ֶशΛଓ͚Δ͜ͱͰಘΒΕΔ͜ͱ
    

    View Slide

45. ֶशΛଓ͚Δ͜ͱͰಘΒΕΔ͜ͱ
    wϑϩϯτΤϯυͷҠΓมΘΓΛָ͠ΜͰ͍͚Δ
    wࣄલʹ஌͓͚ͬͯ͹ٕज़มԽʹ͍͍ͭͯ͘උ͑͸Ͱ͖Δ
    wࢢ৔Ձ஋͕ߴ·Δ
    wࢢ৔Ձ஋͕ߴ͍ਓ͸ࣾ಺Ձ஋΋ߴ͍
    wࣗ෼͕ಘҙͳ͜ͱΛ஌ͬͯ΋Β͑Δ
    

    View Slide

46. ֶश͔Βൃలͨࣗ͠෼ͷମݧ
    

    View Slide

47. ֶश͔Βൃలͨࣗ͠෼ͷମݧ
    w΍͍ͬͯͨ͜ͱ

    ɾϑϩϯτΤϯυͷษڧձʹొஃͨ͠ΓɺࢀՃΛੵۃతʹߦ͏

    ɾνʔϜपΓ΍෼ใ෦԰ʹϑϩϯτΤϯυͷ৘ใΛྲྀ͢
    wಘΒΕͨ͜ͱ

    ɾϑϩϯτΤϯυͰؾʹͳΔ৘ใͷٞ࿦ʹܨ͕ͬͨ

    ɾࣗ෼ͷڵຯ͋Δٕज़ΛपΓʹ஌ͬͯ΋Β͑ͨ

    ɾձࣾͷ1+ͰؔΘΒͳ͍ਓ͔Β੠Λ͔͚ͯ΋Β͑ͨ

    ɾࣾ಺ɺࣾ֎޲͚ษڧձΛओ࠵͠ͳ͍͔ͱ੠Λ͔͚ͯ΋Β͑ͨ
    

    View Slide

48. ֶश͔Βൃలͨࣗ͠෼ͷମݧ
    w΍͍ͬͯͨ͜ͱ

    ɾ:BIPP+"1"/5FDI#MPHΛॻ͍ͨ

    ʮϠϑʔגࣜձࣾʹ͓͚Δ8FCϑϩϯτΤϯυͷٕज़બఆʯ

    IUUQTUFDICMPHZBIPPDPKQBEWFOUDBMFOEBSZBIPPGSPOUFOE
    wಘΒΕͨ͜ͱ

    ɾࣾ֎ͷଟ͘ͷਓʹϠϑʔͷϑϩϯτΤϯυΛ஌ͬͯ΋Β͑ͨ

    ɾࣾ֎ͰهࣄΛॻ͍ͨਓͩͱ͍͏ೝࣝΛͯ͠΋Β͑ͨ

    ɾࣾ಺ͷؔΘΓͷͳ͔ͬͨํʹ੠Λ͔͚ͯ΋Β͏͜ͱ͕Ͱ͖ͨ

    ɾ%FWFMPQFST4VNNJUͷొஃʹܨ͕ͬͨ

    ɾࠓ೔ొஃͰ͖ͨͷ΋͜͏͍ͬͨԑ͕͋ͬͯͷ͜ͱ
    

    View Slide

49. ·ͱΊ
    

    View Slide

50. ·ͱΊ
    wʮֶशʯ͸ΠϯϓοτͱΞ΢τϓοτΛͯ͠

    ஌͕ࣝఆண͢Δ·Ͱ͕ͭͷαΠΫϧ
    w&HHIFBEͱ'SPOUFOE.BTUFST͸͍͍ͧʂʂʂ
    wֶशΛ܁Γฦͯࣗ͠෼ͷࢢ৔Ձ஋Λ্͍͛ͯ͜͏
    wͳʹΑΓֶशΛָ͠ΜͰ͍͜͏
    

    View Slide

51. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide