ママリのweb技術の今と未来 / mamari's front-end present and future

Transcript

1. $POOFIJUP.BSDIÉʙXFCϑϩϯτΤϯυࢢʙ
   ϚϚϦͷXFCٕज़ͷࠓͱະདྷ
   

   View Slide

2. 3ZP"EBDIJ !EBDIJ
   
   ίωώτࣾΤϯδχΞ
   XFCϑϩϯτΤϯυͷ࣮૷͕ϝΠϯ
   ଉࢠ ࡀϲ݄
   ͕େ޷͖ʂ
   ϓϩϑΟʔϧ
   

   View Slide

3. ຊ୊ʹೖΔલʹ
   

   View Slide

4. ຊ೔ͷ5XJUUFSϋογϡλά
   ίωώτϚϧγΣ
   

   View Slide

5. ੝Γ্͍͛ͨʂ
   

   View Slide

6. ͭͿ΍͖࿅शλΠϜ
   ίωώτϚϧγΣΛ͚ͭͯπ
   Πʔτʂ
   

   View Slide

7. ͝ڠྗ͋Γ͕ͱ͏͍͟͝·͢ʂ
   

   View Slide

8. ผ݅
   

   View Slide

9. ࠓ೔ࢲ͕஻ͬͨ͜ͱ͸ϦΞϧλΠϜͰ
   5XJUUFSʹ౤ߘ͞ΕΔΑ͏ʹͳ͍ͬͯ·͢

   1PXFSFECZ!LBUTVUPNV
   

   View Slide

10. Ҏ্ɺએ఻Ͱͨ͠
    

    View Slide

11. ͔͜͜Βຊ୊
    

    View Slide

12. w ϚϚϦͷXFC࣮૷ͷத਎
    w ෛ࠴ʹཱͪ޲͔ͬͯಘͨ஌ݟ
    w ໨ࢦ͢ະདྷ ٕज़໘Ͱ
    
    ࠓ೔͸ͳ͢͜ͱ
    

    View Slide

13. w ϝσΟΞ
    w 2"αΠτ ౤ߘػೳͳ͠ ӾཡͷΈ
    
    w ؅ཧը໘
    w ΞϓϦ಺8FC7JFX
    ϚϚϦͷXFC࣮૷
    

    View Slide

14. XFCٕज़Ͱಈ͍͍ͯΔ΋ͷͨͪ
    ϝσΟΞ 2"
    8FC7JFX
    ؅ཧը໘
    

    View Slide

15. Α͘࢖͍ͬͯΔϥΠϒϥϦɾπʔϧ
    ϑϨʔϜϫʔΫɾܕνΣοΧʔ Ϗϧυπʔϧ
    

    View Slide

16. ͳΜ͚ͩͲɺͭ͡͸
    

    View Slide

17. XFCٕज़Ͱ࡞ΒΕ͍ͯΔ΋ͷ
    ϝσΟΞ 2"
    8FC7JFX
    ؅ཧը໘
    

    View Slide

18. w ίωώτͰ3FBDUΛ࠾༻͠͸͡Ίͨͷ͸೥લ͘Β͍
    w 3FBDUಋೖҎલ͸΄΅#BDLCPOF K2VFSZ
    ੡
    w Ұ෦͸3FBDUϕʔεʹҠ͕ͨ͠·ͩ࢖͍ͬͯΔ෦෼΋ଟ͍
    w ࠓ೥ͦ͜୤#BDLCPOFʹຊ֨ணख͢Δ ͍ͨ͠
    
    ෛ࠴#BDLCPOF͕࢒ͬͯͯϠό͍
    

    View Slide

19. w ϨΨγʔίʔυͳͷͰϝϯς͕େมͩ͠

    3FBDUʹͨ͠ํ͕։ൃޮ཰্͕͕Γͦ͏ ্͕Δ
    
    w #BDLCPOFͷॻ͖ํΛ͓͔֮͑ͯͳ͍ͱ͍͚ͳ͍
    w 3FBDU͚͓͚֮ͩ͑ͯ͹͍͍Α͏ʹ͍ͨ͠

    #BDLCPOFΛ৽ϝϯόʔʹڧ͍Δͷ͸
    
    ୤#BDLCPOF͍ͨ͠ཧ༝
    

    View Slide

20. ίʔυ͚ͩͰ͸ͳ͘
    ୺຤໘Ͱͷ՝୊΋͋Δ
    

    View Slide

21. View Slide

22. w BOESPJEΞϓϦͷରԠόʔδϣϯ͸ʙ
    w ϕϯμʔಠࣗͷඪ४ϒϥ΢β͸଍Γͳ͍ඪ४"1*͕ଟ͘ɺ

    Τϥʔ͕ফ͑Δ·Ͱ1PMZGJMMΛೖΕ·ͬͨ݁͘Ռ͕ίϨ
    w ར఺͸ϩδοΫͰແཧΛ͠ͳͯ͘ྑ͘ͳΔͱ͜Ζ
    w BOESPJE04ରԠόʔδϣϯͷมߋλΠϛϯάͰ͍Βͳ͍΋ͷ͸ফ͢ʂ

    ϑΝΠϧαΠζΛͳΔ΂͘খ͘͢͞ΔΑ͏৺͕͚Δ
    ෛ࠴1PMZGJMMͷ਺͕Ϡό͍
    

    View Slide

23. ଞʹ΋
    

    View Slide

24. w ݄࣌఺ͷฏۉ͕໿ඵ ͍͢͝஗͍
    
    w ݱࡏͷฏۉ͕໿ඵ ·ͩؤுΕΔʂ
    
    w H[JQΛ༗ޮʹͨ͠ "QBDIF
    
    w TUWJFXҎ֎͸ඇಉظͰऔಘ SFBDUWJSUVBMJ[FE
    
    w ը໘֎ͷը૾͸શͯ-B[ZMPBE SFBDUMB[ZMPBE
    
    ෛ࠴8FC7JFXͷฏۉඳը଎౓͕Ϡό͍
    

    View Slide

25. $ISPNFEFWUPPMͷ"VEJUTλϒΛ࢖͏ͱ

    ؆୯ʹܭଌϘτϧωοΫ͕೺ѲͰ͖ͪΌ͏

    ͷͰΦεεϝͰ͢
    ͪͳΈʹ଎౓վળ͢Δͱ͖͸
    

    View Slide

26. Ҏ্ͷܦݧ͔ΒֶΜͩ͜ͱ
    

    View Slide

27. w ج൫ͷࡌͤସ͑͸গͣͭ͠Ͱ΋΍͍ͬͯ͘

    Ұؾʹ΍Δͱ ਎ମ΋৺΋
    ͠ΜͲ͍ͷͰը໘͝ͱʹɺͱ͔
    w खஈͷ౷ҰͰνʔϜ։ൃΛ͠΍͘͢͢΂͖

    ಉ͡ϝϯόʔͰෳ਺ΞϓϦέʔγϣϯ։ൃ͢Δ৔߹ͳΒͰ͕͢
    
    w BOESPJEͷόʔδϣϯ੾Γࣺͯ͸ϧʔϧΛ໌֬ʹܾ
    Ί͓ͯ͘ͱྑͦ͞͏ ̋ҎԼʹͳͬͨΒ੾Δʂ
    
    w ඳը଎౓JT໋

    ԿΛͨ͠Β଎͘ͳΔͷ͔Λ೺Ѳ͢Δඞͣ͠΋ΞϓϦέʔγϣϯίʔυͷվળ͚ͩͱ͸ݶΒͳ͍
    

    View Slide

28. w #BDLCPOF͕໓ͼΔ

    ։ൃޮ཰61ͰϢʔβʔʹఏڙ͢Δ଎౓ΛߴΊ͍͖͍ͯͨ
    
    w 1PMZGJMM͕߇͑Ίʹͳ͍ͬͯΔ

    ੾ΓࣺͯͷϧʔϧΛܾΊͨΒ͋ͱ͸ؾ௕ʹ଴ͭ
    
    w ඳը଎౓͸ฏۉඵ୆

    ύέࢮͯͯ͠΋ͦͦ͜͜࢖͑ΔΑ͏ʹ͍ͨ͠ͳʙ
    ௚ۙͷ໨ࢦ͢΂͖ੈք
    

    View Slide

29. νʔϜ΋ίʔυ΋੔උͯ͠
    ߴ଎ͰՁ஋Λಧ͚ΒΕΔ
    ϚϚϦΛ໨ࢦ͍ͯͧ͘͠
    

    View Slide

30. ͓ΘΓ
    

    View Slide