初心者のためのweb標準技術
TRANSCRIPT
初心者のための
Web標準技術2015秋
at HTML5ビギナーズ by 1000ch
1000ch
Profile
Webフロントエンドエンジニア
HTML5というかWeb技術全般
Node.js + iOS/Mac
#perfmatters
@cssradar @hiloki @t32k @1000ch @ahomu
Frontend Weekly
• 国内外のフロントエンド情報をキュレーション
• 週に一度水曜日に配信
@cssradar @hiloki @t32k @1000ch @ahomu
Frontend Weekly
• 国内外のフロントエンド情報をキュレーション
• 週に一度水曜日に配信https://frontendweekly.tokyo
昨今のWebフロントエンド…
高度化するWebフロントエンド
高まり続けるフロントエンドの比重
変わり続けるWebアプリケーション
増え続ける新しい技術と周辺ツール
「気づいた時には廃れてる」 なんてこともしばしば
そんな中でも
廃れにくい技術…
Web Standards W3C・WHATWG・ECMAなどが中心になって
Webの標準となる技術仕様を策定している
最近流行りの抑えておきたい
Web標準をおさらい ※これだけやればイイという文脈では決してありません
最近ウワサの…
Web標準技術 厳選5選
1. ECMAScript 2015
ECMAScript 2015
クラス構文やアロー関数、Promiseなど 機能・シンタックス共に大幅に強化された
いわゆるES6やHarmonyと呼ばれるもの
2015年6月に6th editionが標準化された
ChromeやFirefoxが実装を進めるも シェア全体を見るとまだまだ乏しい!
?
♥
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
いまからはじめるECMAScript 6 http://www.slideshare.net/1000ch/begin-ecmascript6
いますぐ活かす！最新JavaScript WEB+DB PRESS Vol.87 特集1
2. CSS.next
CSS.next
Selector Level4・Notation・プロパティなど 機能面で様々な強化がなされている
「CSS3で盛り上がった～」以降の変更 プリプロセッサの影響を受けている
ES6同様ブラウザの対応状況は思わしくない!
?
♥
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; }
cssnextでみる次世代CSSとPostCSS http://blog.yucchiy.com/2015/04/22/cssnext-postcss-for-
nextgeneration-of-css
3. HTTP/2
HTTP/2
!
?
♥プロトコルレベルで通信効率が良くなり
サーバーPushなどWeb基盤としても進化
WWWで採用されているHTTPの
1.1から2へ実に16年ぶりバージョンUP
ブラウザおよびサーバーの対応が必要 既存のパフォーマンスに関するノウハウの見直し
HTTP/2の現状とこれから http://www.slideshare.net/shigeki_ohtsu/http2-ohtsu-html5conf2015
4. Web Components
Web Components
!
?
♥ HTML/CSS/JSのスコープ問題の根本的な解決
Web部品の再利用に向けた コンポーネント化の作法の標準化
ブラウザの実装以前に、仕様がFixしていない
（特にShadow DOMとHTML Imports）
なぜWeb Componentsはウェブ開発に革命を起こすのか https://blog.agektmr.com/2014/05/web-components.html
基礎からわかる Web Components 徹底解説 https://html5experts.jp/series/web-components-2/
5. Service Worker
Service Worker
!
?
♥サーバーPushの受信やオフライン化など
Webにおけるユーザー体験を大きく変える
Push API・Cache APIなどを担う
機能を実現する新たなWebの基盤技術
セキュアなWeb（HTTPS）でしか利用できない
Service Workerに関する仕様とか機能とか https://1000ch.net/posts/2014/service-worker-internals.html
Service Workerの紹介 http://www.html5rocks.com/ja/tutorials/service-worker/introduction
「便利そうなのはわかった」
「試してみたい気もする」
「ブラウザの対応状況って
どうなんでしょう…」
How to fallback?
ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
Babel・CSSnext・Autoprefixerといったような各種ツール使って、非対応ブラウザでも実行できるようなJavaScriptに変換（トランス
パイル）する
ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
クライアントとのエンドポイントサーバーにHTTP/2を対応させる（クライアントがHTTP/2に対応していればHTTP/2で通信し、非対応
であればHTTP/1.1に）
ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
WebComponents.jsというポリフィルを使うことで古いブラウザ
（Safari 7+・IE11+）でもある程度実行できるようになる
ES 2015
CSS.next
HTTP/2
Web Components
Service Worker
オフライン対応もサーバーPushを必須の要件としなければ、そもそもオプトインとして導入しやすい。対応しているブラウザに対してだけでもユーザーエンゲージメント
を高められる
まとめ
中には普及せずに非推奨になっていくものも…
枯れにくいが導入しにくさも確かにある
紹介したモノはキャッチアップして損はない
手元で試してみるもよし サービスに取り入れるもよし
※ご利用は計画的に
おわり
+ +ShogoSensui
%
&
1000ch
1000ch