Download as PDF, PPTX
More Related Content
![[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -](https://cdn.slidesharecdn.com/ss_thumbnails/mw10-170614050118-thumbnail.jpg?width=640&height=640&fit=bounds)
初心者のためのWeb標準技術
- 1.
- 2.
- 3.
- 4. @cssradar @hiloki @t32k@1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信
- 5. @cssradar @hiloki @t32k@1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信 https://frontendweekly.tokyo
- 6.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. 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
- 17.
- 18.
- 19.
- 20.
- 21. 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; }
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. 基礎からわかる Web Components徹底解説 https://html5experts.jp/series/web-components-2/
- 32.
- 33. Service Worker ! ? ♥ サーバーPushの受信やオフライン化など Webにおけるユーザー体験を大きく変える Push API・CacheAPIなどを担う 機能を実現する新たなWebの基盤技術 セキュアなWeb（HTTPS）でしか利用できない
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. ES 2015 CSS.next HTTP/2 Web Components ServiceWorker Babel・CSSnext・Autoprefixerと いったような各種ツール使って、 非対応ブラウザでも実行できるよ うなJavaScriptに変換（トランス パイル）する
- 42. ES 2015 CSS.next HTTP/2 Web Components ServiceWorker クライアントとのエンドポイント サーバーにHTTP/2を対応させる （クライアントがHTTP/2に対応し ていればHTTP/2で通信し、非対応 であればHTTP/1.1に）
- 43. ES 2015 CSS.next HTTP/2 Web Components ServiceWorker WebComponents.jsというポリフィ ルを使うことで古いブラウザ （Safari 7+・IE11+）でもある程度 実行できるようになる
- 44. ES 2015 CSS.next HTTP/2 Web Components ServiceWorker オフライン対応もサーバーPushを 必須の要件としなければ、そもそ もオプトインとして導入しやすい。 対応しているブラウザに対してだ けでもユーザーエンゲージメント を高められる
- 45.
- 46.
- 47.
- 48.