フロントエンドの技術選定

Roppongi.js #2での登壇資料
https://roppongi-js.connpass.com/event/82998/

Twitter
https://twitter.com/__sakito__

Transcript

1. ϑϩϯτΤϯυͷٕज़બఆ
   3PQQPOHJKT
   

   View Slide

2. View Slide

3. ࠷ۙͷϑϩϯτΤϯυք۾ʹ
   ͋Γ͕ͪͳ࿩୊
   

   View Slide

4. ࠷ۙͷϑϩϯτΤϯυք۾ʹ
   ͋Γ͕ͪͳ࿩୊
   w7VFͰ͠ΐʂ
   w"OHVMBSͰ͠ΐʂ
   w3FBDUͰ͠ΐʂ
   ɾɾɾͱܾΊ͚ͭͯ͠·͏
   

   View Slide

5. ͲΕ΋ૉ੖Β͍ٕ͠ज़
   

   View Slide

6. View Slide

7. ͱ͸͍͑਺ଟ͘ͷϑϩϯτΤϯυٕज़͕
   ଘࡏ͍ͯ͠ΔதͰ
   Ͳ͏΍ٕͬͯज़બఆΛ͍͚ͯ͠͹ྑ͍͔ʁ
   

   View Slide

8. (JU)VC4UBS
   

   View Slide

9. (JU)VC4UBS
   w(JU)VCϦϙδτϧͷӈ্ʹ͋Δɺ

   ϦϙδτϦͷਓؾΛදͭ͢ͷࢦඪ
   w਺ࣈ͕ଟ͍͔Βͱ͍ͬͯɺա౓ͳ৴༻͸͠ͳ͍
   wϦϙδτϦ࡞੒೔਺͕௕͔ͬͨΓɺ

   ϢʔϞΞ͕͋Δ͚ͩͰελʔ͕ଟͭ͘͘৔߹΋
   

   View Slide

10. (JU)VC1VMTF
    

    View Slide

11. (JU)VC1VMTF
    w(JU)VCϦϙδτϦ*OTJHIUT1VMTF
    wϦϙδτϦͷ׆ಈ۩߹͕Ұ໨ͰΘ͔Δ
    wIdNPOUIͰظؒબ୒Մೳ
    wظؒ಺ͰϚʔδ͞Εͨ13਺ɺด͡ΒΕͨ*TTVF਺ɺ

    ࡞ΒΕͨ13਺ɺཱͯΒΕͨ*TTVVFΛ஌ΕΔ
    wϦϙδτϦ͕׆ൃͳ΄Ͳɺόά͕ݟ͔ͭͬͨΒ

    ղܾ͞ΕΔ·Ͱૣ͔ͬͨΓ͢ΔͷͰɺ

    Ұͭͷ໨҆ʹͳΔ
    

    View Slide

12. (JU)VC$POUSJCVUPST
    

    View Slide

13. (JU)VC$POUSJCVUPST
    w(JU)VCϦϙδτϦ*OTJHIUT$POUSJCVUPST
    wϦϙδτϦʹߩݙ͍ͯ͠Δਓɺίϛοτ਺ͳͲͷ

    ߩݙ۩߹͕Ұ໨ͰΘ͔Δ
    wߩݙ͍ͯ͠Δਓ͕ଟ͍΄ͲɺҰਓʹґଘ͍ͯ͠ͳ͍
    wҰਓʹґଘ͍ͯ͠ͳ͍ͱ͍͏͜ͱ͸ɺ

    ίΞͳਓ͕ͳΜΒ͔ͷࣄ৘Ͱ։ൃΛ΍Ίͯ΋ɺ

    ͦͷϦϙδτϦͷ։ൃ͸ࢭ·Βͳ͍
    wόάΛ௚ͯ͘͠ΕͨΓ͢Δਓ͸ଟ͍΄͏͕ྑ͍
    

    View Slide

14. اۀʹΑΔ։ൃͳͷ͔
    

    View Slide

15. اۀʹΑΔ։ൃͳͷ͔
    wاۀͰ։ൃ͞Ε͍ͯΔ044ͩͱɺ

    ಥ೗։ൃ͕ऴΘΔՄೳੑ͸ݸਓ։ൃͷ044ΑΓ௿͍
    w։ൃاۀͰͦͷ··࢖͍ͬͯΔͷͳΒɺ

    όά͕͋ͬͯ΋ੵۃతʹ௵ͯ͘͠ΕΔ
    w։ൃ͕௕Ҿ͖ͦ͏ͳͱ͖͸ɺ

    ࠷ॳʹબ୒ͨ͠044ʹґଘ͢Δ͜ͱ΋ଟ͍ͷͰɺ

    ҆৺ײ͕͋Δ
    

    View Slide

16. ऩӹ͕͋Δͷ͔
    

    View Slide

17. ऩӹ͕͋Δͷ͔
    wاۀͰ։ൃ͍ͯ͠Ε͹΋ͪΖΜɺ

    ։ൃ͍ͯ͠Δਓୡ͸ऩӹ͕͋Δͷ
    w༗໊ͳٕज़ίϛϡχςΟ΋εϙϯαʔ΍

    ืۚΛืͬͯӡӦඅΛूΊ͍͍ͯΔ
    wXFCQBDLɺ#BCFMɺ7VFͳͲ
    wऩӹ͕ൃੜ͍ͯ͠Δ͜ͱ͸։ൃ͕ܧଓ͢Δ໨҆ʹͳΔ
    w͓ۚେࣄʂʂʂ
    

    View Slide

18. ऩӹ͕͋Δͷ͔஌ΕΔ

    IUUQTPQFODPMMFDUJWFDPNEJTDPWFS
    

    View Slide

19. View Slide

20. View Slide

21. ։ൃ͢Δن໛
    

    View Slide

22. ։ൃ͢Δن໛
    wνʔϜͷਓ਺ɺ։ൃ͕ͲΕ͘Β͍ଓ͔͘ʁ
    wٕज़ʹΑͬͯνʔϜ։ൃͷ͠қ͞ɺ

    ։ൃن໛ͷେ͖͞ͳͲมΘΔ
    wྫ
    

    "OHVMBS

    ϑϧελοΫͳͷͰɺ౓֮͑Ε͹ҧ͏1+ʹ΋࢖͑Δ

    ͔͠͠ɺνʔϜͷॳظֶशίετΛ͔͚ΕΔ͔

    3FBDU 7VF

    ։ൃཁ݅Ͱ࢖͏ٕज़ͷࣗ༝౓͕ߴ͍͕ɺ

    1+ʹΑ֮ͬͯ͑Δ͜ͱ͕ҧ͏ͷ͸Α͍ͷ͔
    wࢹ఺Λ৭ʑͱม͑ͯɺߟ͑ͯΈΔ
    

    View Slide

23. 5ZQF4DSJQU͔'MPXΛ

    ࢖༻͍ͯ͠Δ৔߹
    

    View Slide

24. 5ZQF4DSJQU͔'MPXΛ

    ࢖༻͍ͯ͠Δ৔߹
    wܕఆٛϑΝΠϧ͕͋Δͷ͔ʁ
    wܕఆٛϑΝΠϧ͕ͳ͍ͱɺ

    ࣗલ͠ͳ͍ͱ͍͚ͳ͔ͬΓେมɾɾɾ
    w*TTVFΛݟͯɺܕʹ͍ͭͯཁ๬͕ଟ͘ͳ͍͔
    wཁ๬͕͋ͬͨͱͯ͠΋͙͢ʹղܾ͞Ε͍ͯΔ͔
    

    View Slide

25. ·ͱΊ
    

    View Slide

26. ·ͱΊ
    wٕज़બఆ͕ద੾ʹߦ͑Δͷ΋ɺ

    ϑϩϯτΤϯυΤϯδχΞͷͭͷεΩϧ
    wຊ೔͋͛ͨࣄ߲Ҏ֎ʹ΋ɺ

    ݱ৔ʹΑͬͯબఆϙΠϯτ͸༷ʑ͋Δ͸ͣ

    ϥΠηϯε΍ࣾ಺ࣄ৘ঢ়گͳͲɾɾɾ
    
    wྑ͍ٕज़બఆͰϋοϐʔΤϯυΤϯδχΞʂʂʂ
    

    View Slide

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

    View Slide