フロントエンド技術はこんなに進化している！ キャッチアップしておきたいウェブ制作の最前線 [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
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
11. Google : https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html Google (2018 7 )
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/
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 
 

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
35. Workbox | Google Developers https://developers.google.com/web/tools/workbox/
36. HTML
37. HTML5.1 img srcset
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
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)

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 )
68. Twitter @clockmaker Copyright 2019 ICS INC. All rights reserved.