「1⇒100」のために「0⇒1」を考える フロントエンド

JSer.info 400回記念イベントの登壇資料
https://jser.connpass.com/event/100092/

@Twitter
https://twitter.com/__sakito__

Transcript

1. ʮ㱺ʯͷͨΊʹʮ㱺ʯΛߟ͑Δ

   ϑϩϯτΤϯυ

   +4FSJOGPճه೦Πϕϯτ
   

   View Slide

2. ࠓ೔͸αʔϏεΛӡ༻͢Δ࿩Λ͠·͢
   

   View Slide

3. ໨࣍
   ɾࣗݾ঺հ
   ɾίϯϙʔωϯτΨΠυ
   ɾίϯϙʔωϯτཻ౓ɾ1SFUUJFSͱ-JOU
   ɾςετͱ5ZQF4DSJQU
   ɾύοέʔδߋ৽
   ɾ·ͱΊ
   

   View Slide

4. View Slide

5. લஔ͖
   

   View Slide

6. ʮʯͱʮʯ
   ɾ
   ɹɾαʔϏεΛ্ཱͪ͛Δͱ͖ͷ͜ͱ
   ɹɾٕज़΍ΞʔΩςΫνϟΛબఆ͢Δ

   ɾ
   ɹɾαʔϏεΛӡ༻ͯ͠੒௕͍ͤͯ͘͜͞ͱ
   ɹɾ৽ػೳͷ։ൃ΍νʔϜͷ֦େɺϨϏϡʔΛߦ͏
   

   View Slide

7. ʮʯͱʮʯ
   
   

   View Slide

8. ʮʯͱʮʯ
   
   

   View Slide

9. ʮʯͷϑΣʔζ͸௕͍
   ɾ༷ʑͳ͜ͱ͕ى͜Δ
   ɹɾνʔϜͷ֦େ
   ɹɾ৽ػೳͷ௥Ճ
   ɹɾϦϑΝΫλϦϯά
   ɹɾύϑΥʔϚϯενϡʔχϯά
   ɹɾύοέʔδͷόʔδϣϯΞοϓ
   ɹɾ6*ͷมߋ
   ɹɾFUDʜ

   ɾԿΧ݄ɺԿ೥ͱੵΈॏͶ͍͔ͯͳ͚Ε͹ͳΒͳ͍
   

   View Slide

10. ʮʯͱʮʯ
    
    

    View Slide

11. ʮʯ͕ॏཁ
    ɾʮʯͷҝʹجૅΛ࡞͓ͬͯ͘ͷ͕ॏཁ
    ɹɾνʔϜ͕֦େͯ͠΋େৎ෉͔ʁ
    ɹɾᐆດͳϧʔϧ͸ͳ͍͔ʁ
    ɹɾίϯϑϦΫτ͕ى͖ʹ͍͔͘ʁ
    ɹɾϨϏϡʔ࣌ʹࢦఠ͢Δ఺͕ଟ͘ͳ͍͔ʁ
    ɹɾ࢓༷΍6*ͷมߋʹ଱͑ΒΕΔ͔ʁ

    ɾ৭ʑߟ͑ͳ͚Ε͹͍͚ͳ͍
    ɾࠓ೔࿩͢͜ͱ͸͜ͷ෦෼ʂʂʂʂ
    

    View Slide

12. ίϯϙʔωϯτΨΠυ
    

    View Slide

13. ίϯϙʔωϯτΨΠυ͕ͳ͍ͱى͜Δ͜ͱ
    ɾن໛͕σΧ͘ͳΔͱɺͲΜͳ6*͕طʹ͋Δ͔෼͔Βͳ͍

    ɹɾνʔϜϝϯόʔʹඞཁͳ6*͕͋Δͷ͔ฉ͔ΕΔɺ
    ɹɹίϛϡχέʔγϣϯίετ
    ɹɾαʔϏεը໘͔Βݟ͚ͭग़͢ͷ΋࣌ؒͷखؒ
    ɹɾϨϏϡʔ࣌ʹൃ֮͢Δ౓खؒ
    

    View Slide

14. ίϯϙʔωϯτΨΠυΛ࡞Δ
    ɾ4UPSZCPPL΍%PD[ͳͲखஈ͸༷ʑ͋Δ

    ɾߋ৽͞Εͳ͍ίϯϙʔωϯτΨΠυ͸ෛ࠴ͱͳΔͷͰ஫ҙ
    ɾख͕͔͔ؒΔ͜ͱ͸΍Βͳ͘ͳΔ
    ɾҰ൪େࣄͳ͜ͱ͸ߋ৽͕खؒʹͳΒͳ͍͜ͱ
    

    View Slide

15. ίϯϙʔωϯτཻ౓
    

    View Slide

16. ίϯϙʔωϯτͷཻ౓
    ɾίϯϙʔωϯτͷཻ౓Λײ֮ͰܾΊΔͷ͸ةݥ
    ɹɾਓʹΑͬͯײ֮͸όϥόϥ

    ɾͱ͸͍͑ϨϏϡʔͰ౎౓ࢦఠ͢Δ΋ةݥ
    ɹɾ͍͔ͭଐਓԽ͢Δ
    ɹɾϨϏϡʔ͢ΔਓݻఆͳΜͯਏ͍ɾɾɾ
    

    View Slide

17. "UPNJD%FTJHOͷಋೖ
    

    View Slide

18. "UPNJD%FTJHOͷಋೖ
    

    View Slide

19. "UPNJD%FTJHOͰಘΒΕΔ͜ͱ
    ɾίϯϙʔωϯτͷཻ౓ʹϧʔϧ͕Ͱ͖Δ
    ɾϨϏϡʔͷࡍʹࢦ਑ͱͳΔ
    ɹɾ͜Ε͸"UPNͩΑͶɺ

    ͜Ε͸PSHBOJTNͩΑͶͱ͍͏ձ࿩ʹมΘΔ

    ɾίϛϡχέʔγϣϯ͕۩ମతͳ΋ͷʹมΘΔ͚ͩͰɺ

    ɹײ֮ϕʔεΑΓετϨε͕গͳ͍
    

    View Slide

20. "UPNJD%FTJHO͕ઈରͰ͸ͳ͍
    ɾ"UPNJD%FTJHO͕ઈରਖ਼͍͠Θ͚Ͱ͸ແ͍
    ɾϧʔϧΛ࡞ΔखؒΛল͘खॿ͚Λͯ͘͠Ε͍ͯΔ
    ɾ"UPNJD%FTJHO͕ͬ͘͠Γ͜ͳ͍ͷͰ͋Ε͹ɺ

    ɹϧʔϧΛՃ͑ͨΓɺ৽͘͠ߟ͑Δɹ
    

    View Slide

21. 1SFUUJFSͱ-JOU
    

    View Slide

22. 1SFUUJFS
    ɾίʔυ੔ܗͷखॿ͚Λͯ͘͠ΕΔ
    ɾਓʹΑͬͯίʔυͷॻ͖ํ͸ҧ͏
    ɾॻ͖ํΛ౷Ұͯ͠ετϨεΛݮΒ͢
    ɾίϯϑϦΫτ͕ى͖ΔՄೳੑ΋ݮΔ
    

    View Slide

23. 1SFUUJFS
    

    View Slide

24. 1SFUUJFS
    

    View Slide

25. -JOU
    ɾఆΊͨϧʔϧʹ͍ͭͯ੩తݕূΛߦͬͯ͘ΕΔ
    ɹɾWBSΛ࢖Θͳ͍
    ɹɾSFRVJSFΛ࢖Θͳ͍
    ɹɾFUDʜ
    ɾϧʔϧηοτ͕ଘࡏ͢Δ
    ɹɾFTMJOUSFDPNNFOEFE
    ɹɾUTMJOUSFDPNNFOEFE
    ɹɾSFBDUSFDPNNFOEFE
    

    View Slide

26. -JOUͷϧʔϧηοτ͸্ॻ͖͠ͳ͍
    ɾϧʔϧ͸ඞཁ͔ͩΒΤϥʔ͕ى͜ΔΑ͏ʹͳ͍ͬͯΔ
    ɹɾSFBDUKTYOPUBSHFUCMBOL

    ɹɹɾηΩϡϦςΟͷ੬ऑੑΛ๷͙
    ɹɾSFBDUOPBSSBZJOEFYLFZ
    ɹɹɾNBQͷ഑ྻJOEFYΛKTYͷLFZʹ͢ΔͷΛ๷͙
    ɹɾUTMJOUPSEFSEJNQPSUT
    ɹɹɾJNQPSUͷॱ൪ΛΞϧϑΝϕοτॱʹͯ͠ίϯϑϦΛ๷͙
    ɹɾFUDʜ
    ɾϧʔϧΛ্ॻ͖͍ͨ͠ͱ͖͸ɺϦεΫ΋͖ͪΜͱௐ΂Δ
    

    View Slide

27. ςετͱ5ZQF4DSJQU
    

    View Slide

28. ςετͱ5ZQF4DSJQU
    ɾ6OJUςετɺ&&ςετɺ5ZQF4DSJQU͸ಋೖ͍ͨ͠
    ɾಋೖ͠ͳ͍ͱϦϑΝΫλϦϯά͕ෆ҆

    ɹɾਫ਼ਆత҆੩͸େࣄ
    ɾ࢓༷͸๲ΒΜͰ͍͘΋ͷ
    ɹɾ݁߹ࢼݧ͕&YDFM஍ࠈʹͳΔ
    ɹɾͳʹ͔มߋ͢ΔͨͼʹɺखಈͰ&YDFMͰςετͨ͘͠ͳ͍
    ɾίʔυϕʔεʹ͚ۙͮΔ΄Ͳอक΋ָʹͳΔ

    ɹɾ&YDFM͸ߋ৽͞Εͳ͍
    

    View Slide

29. ςετΛॻ͘͜ͱͰಘΒΕΔ͜ͱ
    ɾਫ਼ਆత҆੩
    ɾίʔυʹର͢Δࣗ৴
    ɾखಈςετͷίετ࡟ݮ
    ɾίʔυͷݟ௨͕͠ྑ͘ͳΔ

    ɹɾςετ͕ॻ͖ʹ͍͘ίʔυ͸ෳ਺ͷ෼ذ΍ॲཧ͕ೖ͍ͬͯΔ
    ɹɾςετ͕ॻ͖΍͍͢ίʔυ͸ബͯ͘؆୯ʹͳΔ͸ͣ
    

    View Slide

30. ॻ͔ͳ͍ςετ
    ɾ3FBDUͷ1SPQTɺBUUSJCVUFɺ%0.ݺͼग़͠ͳͲɺ

    ɹ6*ʹ͍ۙ෦෼͸มԽ͕ܹ͍͠

    ɾมԽ͕ܹ͍͠෦෼ΛςετΛॻ͘ͷ͸ফ໣͢Δ

    ɾ࠷ѱͳέʔεͩͱςετΛॻ͔ͳ͘ͳΔ
    

    View Slide

31. 5ZQF4DSJQUͰςετΛݮΒ͢
    ɾ5ZQF4DSJQUͰίʔυΛॻ͘͜ͱͰςετΛηοτʹ͢Δ

    ɹɾίʔυͰ1SPQT΍%0.Λݺͼग़͍ͤͯͳ͍ͱɺ

    ɹɹίϯύΠϧΤϥʔʹͳΔ
    ɹɾςετΛॻ͘ճ͢Τϥʔ͕෼͔ΔςετΛ௚͢

    ΑΓ΋ফ໣͠ͳ͍

    ɾ5ZQF4DSJQUΛॻ͘͜ͱ͸ͭͷςετ
    

    View Slide

32. ύοέʔδߋ৽
    

    View Slide

33. ύοέʔδͷґଘ DSFBUFSFBDUBQQͷ৔߹
    

    IUUQOQNBOWBLBDPNWJFXESFBDUDSFBUFBQQ
    

    View Slide

34. ύοέʔδͷߋ৽͸େࣄ
    ɾύοέʔδΛߋ৽͠ͳ͍ͱɺ͍͟ͱ͍͏࣌ࠔΔ
    ɹɾґଘύοέʔδʹηΩϡϦςΟͷ໰୊͕ݟ͔ͭΔ
    ɹɾόάʹಥ͖౰ͨΔ
    ɾόά͕ଘࡏ͠ͳ͍ύοέʔδ͸ແ͍
    

    View Slide

35. ύοέʔδͷߋ৽ͰαʔϏεࢭΊͳ͍
    ɾ೥ߋ৽͍ͯ͠ͳ͍ͱɺߋ৽࡞ۀʹΧ݄Ҏ্͔͔Δ͜ͱ΋ɾɾɾ

    ɹɾ੬ऑੑ͕ൃݟ͞Εͯ΋ɺ਺ϲ݄αʔϏεΛࢭΊΒΕͳ͍
    ɹɾσεϚʔνʹͳΔ

    ɾdिؒʹճߋ৽͢ΔͳͲ୹͍εύϯͰߋ৽ϧʔϧΛܾΊΔ

    ɾ ςετ͕͋Δͱ҆৺ͯ͠ߋ৽Ͱ͖Δ
    
    

    View Slide

36. ·ͱΊ
    

    View Slide

37. ·ͱΊ
    ɾʮʯͷظؒ͸௕͍
    ɾ͜ͷ௕͍ظؒۤ࿑͠ͳ͍ɺ

    ɹഁ୼͠ͳ͍Α͏ʹʮʼnΛΑ͘ߟ͑Δ

    ɾ࡮৽͸ղܾࡦͰ͸ͳ͍ɺࠓ·Ͱͷۤ࿑΍࣌ؒΛʹͯ͠͠·͏

    ɾϧʔϧΛ࡞ͬͯϨϏϡʔ΍։ൃޮ཰Λ্͍͛ͯ͜͏ʂ
    

    View Slide

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

    View Slide