はじめに
だんないよ、nikkieです。
MANABIYAはもう1週間前なんですね。
2日目のメルカリ 泉水さんによる「2018年のWeb標準」の聴講メモです。
講義の概要
【国内最大級のエンジニア向け技術祭典】MANABIYA -teratail Developer Days-
進化を続けるWebプラットフォーム、
それを支えるのがHTML、CSS、JavaScriptなどをはじめとしたWeb標準です。
本セッションでは昨今のWeb標準の変遷を振り返ると共に、
今後のWebアプリケーションの動向を予測します。
機械学習に取り組む前はサーバサイドに携わっていたのでWebの話を聞きに行きました。
屋上から移動してきたら教室はすごい人数でしたが、床枠で聞けました(笑)
2018年のWeb標準
私のまとめツイートを掘り下げていきます。
#MANABIYA
— nikkie @春休み (@ftnext) 2018年3月24日
泉水さん 2018年のWeb標準
Service Worker:ネットワークプロキシでありプッシュデータ受信でき、オンライン復帰も検知できる
Web Component:HTML要素を自分で定義、CSSのスコープ汚染しない
Web Payments:ECサイトでクレカ情報を扱わない決済
Service Worker
- ブラウザにインストールされるWeb Worker
キャッシュがあったらキャッシュを返す、なかったらネットワークへ。
オフライン対応が注目されるが、それだけではない - JSで実装できるネットワークプロキシ
- オンライン復帰を検知できる
チャットアプリなどでユーザには送信完了と表示し、裏でネットワークが復旧したら送る - プッシュデータ受信できる
生放送アプリでの利用例 ↓
Service WorkerはPWA(Progressive Web Apps)にも寄与する。
Chromeは対応済み。SafariはiOS11.3から。Firefox、MicrosoftもPWA対応に追従。
Web Components
HTML要素を自分で定義できる。CSSのスコープを汚染しない
- Custom Elements:HTML要素を自分で定義できる
- Shadow DOM:カスタムHTML要素がグローバルスコープに出ないようにする
- ES Modules:再利用のための外部ファイル(export、import)
Web Componentsを使えば、ビルドがシンプルになる。(Reactなどのライブラリは多段ビルドを要求する)
描画パフォーマンスが気になる場合はlit-html。差分描画を担ってくれる
Chrome、Safariが対応しているのでモバイルWebでは使える。
泉水さんブログ:
Web Payments
ECサイトでクレジットカード情報を扱わない決済を可能にする。(スライド55, 56)
ChromeとEdgeは対応済み。SafariはiOS11.3から
参考:
クレジットカード取引におけるセキュリティ対策の強化に向けた実行計画2017(「実行計画2017」)を取りまとめました~国際水準のクレジットカード決済環境の整備を進めます~(METI/経済産業省)
感想
久々にWebの話を聞いたら浦島太郎状態でした。こんなに進んでいるとは。。
最近PWAの動きが出てきているのはSafariがService Worker対応するからなんですね。
Web Componentsは触ってみたいです。(GitPitchにも載せられたりしないかな)
Web Paymentsを聞いて、AppleやGoogleを通さずに支払いを受ける仕組みを作ろうとしているという話(2017年5月のHTML5感。)を思い出しました。
積読リスト
Service Workerってなんなのよ (Service Workerのえほん) - Qiita (2017年1月なので古いかも)
ライブラリを使わずここまでできる!Web Componentsで近未来のフロントエンド開発 | ヌーラボ
泉水さん、並びにMANABIYA運営スタッフの皆さま、
貴重なお話とそれを聞く機会をありがとうございました。