Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

初心者のためのWeb標準技術

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 48 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie 初心者のためのWeb標準技術 (20)

Anzeige

Aktuellste (20)

初心者のためのWeb標準技術

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

×