フロントエンド技術はこんなに進化している！ キャッチアップしておきたいウェブ制作の最前線 [SNSシェア禁止]

「新潟デルタ vol.2」での発表資料です。

WEB・アプリ・サービス系ディレクターのための最新情報 勉強会【新潟デルタ vol.2】 - 資料一覧 - connpass
https://ddd-ng.connpass.com/event/124486/presentation/

※新潟デルタ参加者向けの資料のためSNSでのシェアはお控えください

Transcript

1. vol.2 / 2019 5 11 ( )
   ICS
   SNS
   

   View Slide

2. (Yasunobu Ikeda)
   ICS /
   @clockmaker
   

   View Slide

3. JavaScript (2019 1 )
   https://ics.media/entry/19765
   

   View Slide

4. ics.media
   

   View Slide

5. ICS MEDIA
   https://ics.media/
   

   View Slide

6. ICS MEDIA
   https://ics.media/
   

   View Slide

7. ICS MEDIA
   https://ics.media/
   

   View Slide

8. ICS MEDIA
   WordPress
   AMP
   PWA
   SPA (Nuxt.js )
   

   View Slide

9. https://www.youtube.com/watch?v=hyZ4k4bpcGM
   

   View Slide

10. View Slide

11. Google :
    https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
    Google
    (2018 7 )
    

    View Slide

12. View Slide

13. PageSpeed Insights
    https://developers.google.com/speed/pagespeed/insights/?hl=ja
    

    View Slide

14. Google Lighthouse Chrome PWA | SEO
    https://www.suzukikenichi.com/blog/lighthouse-integrated-into-chrome-60/
    

    View Slide

15. View Slide

16. CSS HTML
    CSS JS
    HTTP/2
    gzip
    

    View Slide

17. SSL
    

    View Slide

18. SSL
    HTTP/2
    
    

    View Slide

19. Secure Contexts Everywhere | Mozilla Security Blog
    https://blog.mozilla.org/security/2018/01/15/secure-contexts-everywhere/
    Firefox https
    CSS JS
    

    View Slide

20. SSL
    

    View Slide

21. AMP
    

    View Slide

22. AMP
    AMP HTML
    HTML
    

    CSS
    

    View Slide

23. AMP Cache
    AMP HTML Google CDN
    = AMP Cache
    AMP Cache 

    

    

    View Slide

24. AMP HTML - ICS MEDIA
    https://ics.media/entry/12291/
    

    View Slide

25. PWA
    Android Chrome 

    

    

    View Slide

26. View Slide

27. PWA
    

    View Slide

28. PC Chrome PWA
    

    View Slide

29. Suumo | Web | Google Developers
    https://developers.google.com/web/showcase/2016/suumo
    SUUMO
    75%
    31%
    18%
    

    View Slide

30. Twitter Lite PWA Signi cantly Increases Engagement and Reduces Data Usage | Web | Google Developers
    https://developers.google.com/web/showcase/2017/twitter
    Twitter Lite
    PV 65%
    75%
    20%
    30%
    

    View Slide

31. PWA 2 

    PWA - Hub
    https://employment.en-japan.com/engineerhub/entry/2018/06/05/110000
    

    View Slide

32. PWA Llumino PWA -
    https://cocopon.me/blog/2018/05/pwa-llumino-dev/
    

    View Slide

33. Service Worker
    Service Worker
    JavaScript
    PWA
    

    View Slide

34. View Slide

35. Workbox | Google Developers
    https://developers.google.com/web/tools/workbox/
    

    View Slide

36. HTML
    

    View Slide

37. HTML5.1 img srcset
    

    View Slide

38. View Slide

39. lazyload
    jQuery Lazyload Plugin
    AMP (amp-img )
    img loading NEW
    

    View Slide

40. Addy Osmani (Chrome )
    https://twitter.com/addyosmani/status/1114777583302799360
    

    View Slide

41. 

    

    ( )
    

    JavaScript
    

    View Slide

42. CSS
    

    View Slide

43. OS 

    Windows 10
    iOS/macOS
    

    View Slide

44. CSS
    OS CSS
    @media (prefers-reduced-motion: reduce) { ... }
    Safari, Firefox, Chrome
    

    View Slide

45. Can I use... (prefers-reduced-motion)
    https://caniuse.com/#feat=prefers-reduced-motion
    

    View Slide

46. ICS
    https://ics.media/recruit
    

    View Slide

47. View Slide

48. View Slide

49. CSS
    CSS 

    @media (prefers-color-scheme: dark){ }
    

    View Slide

50. CSS
    table

    oat

    ex

    grid
    

    View Slide

51. 2019 5
    

    View Slide

52. JavaScript
    

    View Slide

53. SPA
    

    JS Vue.js, React, Angular
    

    View Slide

54. /mypage
    A
    /mypage/a
    JavaScript
    

    View Slide

55. JavaScript A
    A
    /mypage/a
    

    View Slide

56. SNS
    SNS JavaScript
    A
    /mypage/a
    

    View Slide

57. SPA
    Twitter / OGP
    A
    SNS
    

    View Slide

58. SEO OGP
    (SSR)
    (SSG)
    

    View Slide

59. /mypage
    A
    /mypage/a
    (JavaScript HTML )
    HTML
    

    View Slide

60. SSR, SSG
    HTML 

    SNS
    A
    A
    

    View Slide

61. Nuxt.js( )
    Vue.js
    Vue.js 

    (SSG)

    

    View Slide

62. View Slide

63. WordPress 

    ( )
    AWS CloudFront + S3 

    

    View Slide

64. AWS EC2 (c4 large) + AMIMOTO
    AWS CloudFront + S3
    

    View Slide

65. netlify
    500-600ms
    rebase
    300-400ms
    AWS CloudFront + S3
    50-150ms
    100KB JSON (TTFB )
    

    View Slide

66. View Slide

67. View Slide

68. Twitter
    @clockmaker
    Copyright 2019 ICS INC. All rights reserved.
    

    View Slide