小さくはじめる車輪の再発明のすゝめ

2019.11.06 Ginza.js #6
https://ginzajs.connpass.com/event/150708/

2019.11.30 冬のJavascript祭
https://javascript-fes.doorkeeper.jp/events/99978

Transcript

1. খ͘͞͸͡ΊΔ
   ंྠͷ࠶ൃ໌ͷ͢ʍΊ
   Recommendation of Wheel Reinvention
   ౙͷ+BWB4DSJQUࡇ
   
   !XBLBNTIB
   /BPLJ:"."%"
   

   View Slide

2. ͸͡Ίʹ
   Introduction…
   

   View Slide

3. Ϣʔβ͕ϑΝΠϧબ୒Λ΍Γ΍͘͢͢ΔͨΊʹ
   υϥοάυϩοϓػೳΛ௥Ճ͍ͨ͠
   

   View Slide

4. View Slide

5. 9)3 9.-)UUQ3FRVFTU
   Λಋೖ͍ͨ͠
   

   View Slide

6. ੈͷதʹ͸੕ͷ਺΄Ͳͷ044͕ᷓΕ͍ͯΔ
   

   View Slide

7. ͦΕΒΛੵΈ໦ͷΑ͏ʹ૊Έ߹ΘͤΔ͜ͱͰ
   ڻ͘΄ͲΫΠοΫʹϦονͳΞϓϦέʔγϣϯ͕࡞ΕΔݱ୅
   

   View Slide

8. ंྠͷ࠶ൃ໌ͱ͸ʁ
   ޿͘ड͚ೖΕΒΕཱ֬͞Ε͍ͯΔٕज़΍ղܾ๏Λ஌Βͣʹʢ·ͨ͸ҙਤత
   ʹແࢹͯ͠ʣɺಉ༷ͷ΋ͷΛ࠶ͼҰ͔Β࡞Δ͜ͱ
   طʹੈͷதʹग़ճ͍ͬͯΔ044ʢϥΠϒϥϦͳͲʣͱಉ༷ͷ΋ͷΛ࠶ͼ
   Ұ͔Βࣗ෼Ͱ࡞Δ͜ͱ
   

   View Slide

9. ंྠͷ࠶ൃ໌Λ͢ΔΑ͏ʹͳͬͨܦҢ
   ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
   খ͘͞͸͡ΊΔंྠͷ࠶ൃ໌ͷ͢ʍΊ
   ͓͠ͳ͕͖
   "HFOEB
   

   View Slide

10. ंྠͷ࠶ൃ໌Λ͢ΔΑ͏ʹͳͬͨܦҢ
    How Learned to Reinventing the Wheel
    

    View Slide

11. ंྠͷ࠶ൃ໌Λ͢ΔΑ͏ʹͳͬͨܦҢ
    ςοΫϒϩάʹॻͨ͘Ίͷωλ࡞Γ
    #BDLHSPVOE
    

    View Slide

12. View Slide

13. ंྠͷ࠶ൃ໌Λ͢ΔΑ͏ʹͳͬͨܦҢ
    τϨϯυͷҠΓมΘΓʹΑΔچٕज़ͷ௠෗Խ
    #BDLHSPVOE
    

    View Slide

14. &BSMZʜ
    

    View Slide

15. .JEʜ
    

    View Slide

16. 044ͷΤίγεςϜ͸ӬԕͰ͸ͳ͍
    ༷ʑͳཁҼͰ͍ͭෛ࠴Խͯ͠΋͓͔͘͠ͳ͍ͷͩʂ
    ͱɺࢥ͍࢝ΊΔΑ͏ʹͳΓɺ
    OSS ϥΠϒϥϦͷ༻๏༻ྔΛҙࣝ͢ΔΑ͏ʹͳΔ
    

    View Slide

17. ंྠͷ࠶ൃ໌Λ͢ΔΑ͏ʹͳͬͨܦҢ
    $ZDMFKTͷΤίγεςϜ
    #BDLHSPVOE
    

    View Slide

18. $ZDMFKT
    "GVODUJPOBMBOESFBDUJWF+BWB4DSJQUGSBNFXPSL
    GPSQSFEJDUBCMFDPEF
    

    View Slide

19. View Slide

20. 4JNQMFBOE$PODJTF
    &YQMJDUEBUBqPX
    

    View Slide

21. 5
    Tooltip Drag & Drop Auto Height Auto Scroll
    Preloader Popover Date Picker File Uploader
    ࠶ൃ໌ͨ͠ंྠʢ˞ൈਮʣ
    

    View Slide

22. TS
    TS
    API Client Codegen
    SVG DOM Codegen
    ࠶ൃ໌ͨ͠ंྠʢ˞ൈਮʣ
    

    View Slide

23. ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
    What are the benefits of reinventing the wheel?
    

    View Slide

24. ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
    γεςϜʹ࠷దԽͨ͠ϛχϚϧͳػೳΛಘΒΕΔ
    #FOFGJUT
    

    View Slide

25. γεςϜʹ࠷దԽͨ͠ϛχϚϧͳػೳΛಘΒΕΔ
    ඞཁͳ΋ͷ͚ͩΛ࡞Δͷ͔ͩΒɺ
    γϯϓϧ໌࿕
    ߴ଎ͳಈ࡞͕ظ଴Ͱ͖Δ
    #FOFGJUT
    

    View Slide

26. ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
    ͳʹ͔ෆ۩߹͕͋ͬͯ΋௚ͤΔ
    #FOFGJUT
    

    View Slide

27. ͳʹ͔ෆ۩߹͕͋ͬͯ΋௚ͤΔ
    ࣗ෼ͨͪͰ࡞ͬͨͷ͔ͩΒɺ
    ࣮૷ͷ۱͔Β۱·Ͱ೺Ѳग़དྷ͍ͯΔ
    #FOFGJUT
    ϒϥοΫϘοΫε͕ແ͍
    

    View Slide

28. ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
    ࣗ෼͔ͨͪΒࣺͯͳ͍ݶΓͦΕ͕ऴΘΔ͜ͱ͸ͳ͍
    #FOFGJUT
    

    View Slide

29. ࣗ෼͔ͨͪΒࣺͯͳ͍ݶΓͦΕ͕ऴΘΔ͜ͱ͸ͳ͍
    044͸։ൃɾอक͕ಥવऴྃ͢Δ͜ͱ΋͋Δ
    #FOFGJUT
    

    View Slide

30. ࣗ෼͔ͨͪΒࣺͯͳ͍ݶΓͦΕ͕ऴΘΔ͜ͱ͸ͳ͍
    044ͷ։ൃ͕ఀ଺ͯ͠௠෗Խ͢Δͱɺ
    ͦͷपลٕज़ελοΫͷόʔδϣϯ͕
    ݻఆ͞Εͯ͠·͏͜ͱ΋
    #FOFGJUT
    

    View Slide

31. ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
    γεςϜʹ࠷దԽͨ͠ϛχϚϧͳػೳΛಘΒΕΔ
    ͳʹ͔ෆ۩߹͕͋ͬͯ΋௚ͤΔ
    ࣗ෼͔ͨͪΒࣺͯͳ͍ݶΓͦΕ͕ऴΘΔ͜ͱ͸ͳ͍
    

    View Slide

32. ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
    ࣗ෼ͨͪͷ੹೚ൣғΛ޿͘อͭ
    ଞॴͷ஌Βͳ͍୭͔ʹࣗ෼ͨͪͷγεςϜͷ඼࣭Λࠨӈͤ͞ͳ͍
    ͦͷٕज़Λਂ͘ཧղͯࣗ͠਎ͷٕज़Λ޲্ͤ͞ΔͨΊʹ׶͑ͯ
    ʮंྠͷ࠶ൃ໌ʯΛ͢Δ͜ͱ΋͋Δ
    

    View Slide

33. ंྠͷ࠶ൃ໌ͰಘΒΕΔϝϦοτ
    τϨϯυͷҠΓมΘΓʹࠨӈ͞Εͳ͍جૅྗʢےྗʣ͕ཆΘΕΔ
    ಈ࡞؀ڥ͕มΘΒͳ͍ݶΓࠜװͱͳΔͱ͜Ζ͸ৗʹಉ͡
    τϨϯυ΍πʔϧ͕มΘͬͯ΋௨༻͢ΔεΩϧ͕਎ʹͭ͘
    

    View Slide

34. খ͘͞͸͡ΊΔंྠͷ࠶ൃ໌ͷ͢ʍΊ
    Recommendation of Wheel Reinvention
    

    View Slide

35. BYJPT
    ͪΐͬͱͨ͠ϢʔςΟϦςΟؔ਺
    

    View Slide

36. TS
    TS
    API Client Codegen
    

    View Slide

37. https://speakerdeck.com/wakamsha/
    

    View Slide

38. 5
    Tooltip Drag & Drop Auto Height Auto Scroll
    Preloader Popover Date Picker File Uploader
    

    View Slide

39. *OUSPEVDFNZTFMG
    Զͷ໊ΛݴͬͯΈΖ
    ࣗݾ঺հ
    

    View Slide

40. !XBLBNTIB
    *OUSPEVDFNZTFMG
    /BPLJ:"."%"ࢁా௚थ
    XFCϑϩϯτΤϯυσΟϕϩούʔ
    ॴଐגࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    ෭ۀۀ຿ҕୗͱͯ͠๭ελʔτΞοϓاۀΛ͓ख఻͍த
    

    View Slide

41. 5IBOLZPV
    

    View Slide