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

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


sakito
March 14, 2019
6.9k

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


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

@Twitter
https://twitter.com/__sakito__

sakito

March 14, 2019
Tweet

More Decks by 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