Transcript of "初心者のためのWeb標準技術"
- 1. 初心者のための Web標準技術2015秋 at HTML5ビギナーズ by 1000ch
- 2. 1000ch
- 3. Profile Webフロントエンドエンジニア HTML5というかWeb技術全般 Node.js + iOS/Mac #perfmatters
- 4. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信
- 5. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信 https://frontendweekly.tokyo
- 6. 昨今のWebフロントエンド…
- 7. 高度化するWebフロントエンド 高まり続けるフロントエンドの比重 変わり続けるWebアプリケーション 増え続ける新しい技術と周辺ツール
- 8. 「気づいた時には廃れてる」 なんてこともしばしば
- 9. そんな中でも 廃れにくい技術…
- 10. Web Standards W3C・WHATWG・ECMAなどが中心になって Webの標準となる技術仕様を策定している
- 11. 最近流行りの抑えておきたい Web標準をおさらい ※これだけやればイイという文脈では決してありません
- 12. 最近ウワサの… Web標準技術 厳選5選
- 13. 1. ECMAScript 2015
- 14. ECMAScript 2015 クラス構文やアロー関数、Promiseなど 機能・シンタックス共に大幅に強化された いわゆるES6やHarmonyと呼ばれるもの 2015年6月に6th editionが標準化された ChromeやFirefoxが実装を進めるも シェア全体を見るとまだまだ乏しい! ? ♥
- 15. function Human(name) { if (name === undefined) { name = 'Taro'; } this.name = name; } Human.prototype.hello = function() { console.log('My name is ' + this.name); }; class Human { constructor(name = 'Taro') { this.name = name; } hello() { console.log(`My name is ${this.name}`); } } ES5 ES6
- 16. いまからはじめるECMAScript 6 http://www.slideshare.net/1000ch/begin-ecmascript6
- 17. いますぐ活かす！最新JavaScript WEB+DB PRESS Vol.87 特集1
- 18. 2. CSS.next
- 19. CSS.next Selector Level4・Notation・プロパティなど 機能面で様々な強化がなされている 「CSS3で盛り上がった∼」以降の変更 プリプロセッサの影響を受けている ES6同様ブラウザの対応状況は思わしくない ! ? ♥
- 20. CSS.next CSS :root { --primary-color: #E86100; --base-fontsize: 1rem; } h1 { font-size: calc(var(--base-fontsize) * 2); height: calc(100px - 2em); } body { font-size: var(--base-fontsize); } h1 { font-size: 2rem; height: calc(100px - 2em); } body { font-size: 1rem; }
- 21. cssnextでみる次世代CSSとPostCSS http://blog.yucchiy.com/2015/04/22/cssnext-postcss-for- nextgeneration-of-css
- 22. 3. HTTP/2
- 23. HTTP/2 ! ? ♥ プロトコルレベルで通信効率が良くなり サーバーPushなどWeb基盤としても進化 WWWで採用されているHTTPの 1.1から2へ実に16年ぶりバージョンUP ブラウザおよびサーバーの対応が必要 既存のパフォーマンスに関するノウハウの見直し
- 24. http://www.http2demo.io/
- 25. HTTP/2の現状とこれから http://www.slideshare.net/shigeki_ohtsu/http2-ohtsu-html5conf2015
- 26. 4. Web Components
- 27. Web Components ! ? ♥ HTML/CSS/JSのスコープ問題の根本的な解決 Web部品の再利用に向けた コンポーネント化の作法の標準化 ブラウザの実装以前に、仕様がFixしていない （特にShadow DOMとHTML Imports）
- 28. http://1000ch.github.io/switch-element/
- 29. なぜWeb Componentsはウェブ開発に革命を起こすのか https://blog.agektmr.com/2014/05/web-components.html
- 30. 基礎からわかる Web Components 徹底解説 https://html5experts.jp/series/web-components-2/
- 31. 5. Service Worker
- 32. Service Worker ! ? ♥ サーバーPushの受信やオフライン化など Webにおけるユーザー体験を大きく変える Push API・Cache APIなどを担う 機能を実現する新たなWebの基盤技術 セキュアなWeb（HTTPS）でしか利用できない
- 33. https://1000ch.github.io/todo/
- 34. Service Workerに関する仕様とか機能とか https://1000ch.net/posts/2014/service-worker-internals.html
- 35. Service Workerの紹介 http://www.html5rocks.com/ja/tutorials/service-worker/introduction
- 36. 「便利そうなのはわかった」 「試してみたい気もする」
- 37. 「ブラウザの対応状況って どうなんでしょう…」
- 38. How to fallback?
- 39. ES 2015 CSS.next HTTP/2 Web Components Service Worker
- 40. ES 2015 CSS.next HTTP/2 Web Components Service Worker Babel・CSSnext・Autoprefixerと いったような各種ツール使って、 非対応ブラウザでも実行できるよ うなJavaScriptに変換（トランス パイル）する
- 41. ES 2015 CSS.next HTTP/2 Web Components Service Worker クライアントとのエンドポイント サーバーにHTTP/2を対応させる （クライアントがHTTP/2に対応し ていればHTTP/2で通信し、非対応 であればHTTP/1.1に）
- 42. ES 2015 CSS.next HTTP/2 Web Components Service Worker WebComponents.jsというポリフィ ルを使うことで古いブラウザ （Safari 7+・IE11+）でもある程度 実行できるようになる
- 43. ES 2015 CSS.next HTTP/2 Web Components Service Worker オフライン対応もサーバーPushを 必須の要件としなければ、そもそ もオプトインとして導入しやすい。 対応しているブラウザに対してだ けでもユーザーエンゲージメント を高められる
- 44. まとめ 中には普及せずに非推奨になっていくものも… 枯れにくいが導入しにくさも確かにある 紹介したモノはキャッチアップして損はない
- 45. 手元で試してみるもよし サービスに取り入れるもよし
- 46. ※ご利用は計画的に
- 47. おわり + +ShogoSensui % & 1000ch 1000ch
-
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.
Be the first to comment