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

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

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

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

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

4b7124f2f5989173c8ce3b0934817a32?s=128

Yasunobu Ikeda

May 11, 2019
Tweet

Transcript

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

  2. (Yasunobu Ikeda) ICS / @clockmaker

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

  4. ics.media

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

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

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

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

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

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

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

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

  15. None
  16. CSS HTML CSS JS HTTP/2 gzip

  17. SSL

  18. SSL HTTP/2

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

    CSS JS
  20. SSL

  21. AMP

  22. AMP AMP HTML HTML 
 CSS

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

    Cache 
 

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

  25. PWA Android Chrome 
 


  26. None
  27. PWA

  28. PC Chrome PWA

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

    18%
  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%
  31. PWA 2 
 PWA - Hub https://employment.en-japan.com/engineerhub/entry/2018/06/05/110000

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

  33. Service Worker Service Worker JavaScript PWA

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

  36. HTML

  37. HTML5.1 img srcset

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

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

  41. 
 
 ( ) <link rel="prefetch" href="よよ.html" />
 JavaScript

  42. CSS

  43. OS 
 Windows 10 iOS/macOS

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

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

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

  47. None
  48. None
  49. CSS CSS 
 @media (prefers-color-scheme: dark){ }

  50. CSS table
 oat
 ex
 grid

  51. 2019 5

  52. JavaScript

  53. SPA 
 JS Vue.js, React, Angular

  54. /mypage A /mypage/a JavaScript

  55. JavaScript A A /mypage/a

  56. SNS SNS JavaScript A /mypage/a

  57. SPA Twitter / OGP A SNS

  58. SEO OGP (SSR) (SSG)

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

  60. SSR, SSG HTML 
 SNS A A

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


  62. None
  63. WordPress 
 ( ) AWS CloudFront + S3 


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

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

    JSON (TTFB )
  66. None
  67. None
  68. Twitter @clockmaker Copyright 2019 ICS INC. All rights reserved.