PWA with YUMEMI -PWA Night Conference 2021-

Transcript

1. PWA with YUMEMI
   PWA Night Conference 2021
   
   
   2021/06/26（土）
   
   
   株式ձ社ゆめみ
   

   View Slide

2. ͍ͭ΋ͳΒ͜͜Ͱ
   
   
   ฐࣾΏΊΈͷ࿩͹͔Γ͠·͕͢…
   

   View Slide

3. ࠓ೔͸ͳΔ΂͘
   
   
   PWA ʹؔ͢Δ࿩Λ͠·͢🎉
   ͨͩ…࠷ޙʹͪΐͬͱ͚ͩએ఻΋͠·͢🙇
   

   View Slide

4. ࣗݾ঺հ
   

   View Slide

5. const my_info = {
   
   
   Fullname: ‘܂ݪ੟ਔ’,
   
   
   Position1: ‘FE ςοΫϦʔυ’,
   
   
   Position2: ‘νϟϨϯδऔక໾’,
   
   
   Twitter: ‘@kuwahara_jsri’,
   
   
   PokemonGO: ‘TL 40’,
   
   
   }
   

   View Slide

6. ͦΕͰ͸ PWA
   
   
   ͷ͓࿩Λ͠·͠ΐ͏ʂ
   

   View Slide

7. ͬ͘͟Γ Web ͷྺ࢙͔Β
   PWA ͷՁ஋Λߟ͑Δ
   

   View Slide

8. 1999೥ ʙ 2008೥
   

   View Slide

9. 1999
   2005
   2008
   2007
   ECMA Script4 ͷ૲Ҋ͕ഁغ͞ΕΔ
   ECMA Script4 ࢓༷ॻͷυϥϑτ͕ެ։
   2003 ̎೥ؒࡦఆΛதஅ
   ECMA Script4 ࢓༷ࡦఆ։࢝
   ࡦఆΛ࠶։
   MicroSoftɹ🆚ɹNetscape
   

   View Slide

10. ECMA Script4
    http://www.ecmascript.org/es4/spec/overview.pdf
    Ϟδϡʔϧ
    
    
    ΦϒδΣΫτࢦ޲
    
    
    ςϯϓϨʔτʢδΣωϦΫεʣ
    
    
    ੩తܕ෇͚
    
    
    Nullable ܕ
    

    View Slide

11. ECMA Script4
    http://www.ecmascript.org/es4/spec/overview.pdf
    Ϟδϡʔϧ
    
    
    ΦϒδΣΫτࢦ޲
    
    
    ςϯϓϨʔτʢδΣωϦΫεʣ
    
    
    ੩తܕ෇͚
    
    
    Nullable ܕ
    TypeScript ΍ωΠςΟϒΞϓϦ
    
    
    ։ൃ༻ͷݴޠͬΆ͍💁
    

    View Slide

12. 2005೥
    

    View Slide

13. Google Map
    https://goo.gl/maps/J7rXqbuAdwYC7Ljd8
    

    View Slide

14. Google Map
    https://goo.gl/maps/J7rXqbuAdwYC7Ljd8
    AJAXͷొ৔ʢϦϩʔυͳ͠Ͱσʔλͷऔಘʣ
    
    
    ωΠςΟϒΞϓϦͷૢ࡞ײΛ Web ϖʔδͰ
    

    View Slide

15. 2014೥? ʙ now
    

    View Slide

16. ίϯϙʔωϯτઃܭ΁
    Component
    MVC
    
    
    MVA
    
    
    MVVM
    Atomic Design
    

    View Slide

17. ίϯϙʔωϯτઃܭ΁
    Component
    MVC
    
    
    MVA
    
    
    MVVM
    Atomic Design
    Web ΞϓϦέʔγϣϯ
    
    
    ≒
    
    
    ωΠςΟϒΞϓϦέʔγϣϯ
    

    View Slide

18. ίϯϙʔωϯτઃܭ΁
    Component
    MVC
    
    
    MVA
    
    
    MVVM
    Atomic Design
    PWA ͸͋͘·Ͱ
    
    
    📣Web ΞϓϦέʔγϣϯ📣
    

    View Slide

19. PWA ͷಛ௃
    ϓογϡ௨஌
    ϗʔϜը໘ʹ௥Ճ
    
    
    (A2HS)
    Ωϟογϡ/ΦϑϥΠϯ
    HTTPS
    

    View Slide

20. ϓογϡ௨஌
    Ωϟογϡ/ΦϑϥΠϯ
    HTTPS
    PWA ͷಛ௃
    ϗʔϜը໘ʹ௥Ճ
    
    
    (A2HS)
    

    View Slide

21. PWA νΣοΫϦετ
    https://web.dev/pwa-checklist/
    

    View Slide

22. ๻Β͸ PWA ͷ఻ಓࢣ
    

    View Slide

23. ΏΊΈͷ͝঺հ
    

    View Slide

24. ΏΊΈͷ໘ന੍͍౓
    👍 ษڧ͠์୊੍౓
    
    
    👍 ༗څऔΓ์୊੍౓
    
    
    👍 څ༩ࣗݾܾఆ੍౓
    
    
    ͳͲ
    

    View Slide

25. ੒௕Ͱ͖ΔاۀNo.1
    Ұॹʹ YUMEMI
    で
    ಇ͖·ͤΜ͔? YUMEMI Ͱ੒௕͠·ͤΜ͔
    ?
    
    ڵຯΛ࣋ͬͨํ͸ɺੋඇ͓࿩͍ͤͯͩ͘͞͞ʂ
    ৽ଔɾத్࠾༻ʲΤϯ
    ジ
    χΞɾUX/UI
    デザ
    ΠφʔɾPMɾӦۀʳ
    Ԡื
    ペ
    ʔ
    ジ
    : https://hrmos.co/pages/yumemi/jobs/0000029/apply
    

    View Slide

26. View Slide