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

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

sakito
September 22, 2018

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

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

@Twitter
https://twitter.com/__sakito__

sakito

September 22, 2018
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

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

    ϑϩϯτΤϯυ

    +4FSJOGPճه೦Πϕϯτ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

  10. ίϯϙʔωϯτཻ౓

    View full-size slide

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

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

    View full-size slide

  12. "UPNJD%FTJHOͷಋೖ

    View full-size slide

  13. "UPNJD%FTJHOͷಋೖ

    View full-size slide

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

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

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

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

    View full-size slide

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

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

    View full-size slide

  16. 1SFUUJFSͱ-JOU

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  20. ςετͱ5ZQF4DSJQU

    View full-size slide

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

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

    ɹɾ&YDFM͸ߋ৽͞Εͳ͍

    View full-size slide

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

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

    View full-size slide

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

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

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

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

    View full-size slide

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

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

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

    ΑΓ΋ফ໣͠ͳ͍

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

    View full-size slide

  25. ύοέʔδߋ৽

    View full-size slide

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

    IUUQOQNBOWBLBDPNWJFXESFBDUDSFBUFBQQ

    View full-size slide

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

    View full-size slide

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

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

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

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

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide