nikkie-ftnextの日記

イベントレポートや読書メモを発信

イベントレポート | MANABIYA DAY2 2限「2018年のWeb標準」#MANABIYA

はじめに

だんないよ、nikkieです。
MANABIYAはもう1週間前なんですね。
2日目のメルカリ 泉水さんによる「2018年のWeb標準」の聴講メモです。

 

講義の概要

【国内最大級のエンジニア向け技術祭典】MANABIYA -teratail Developer Days-

進化を続けるWebプラットフォーム、
それを支えるのがHTML、CSSJavaScriptなどをはじめとしたWeb標準です。
本セッションでは昨今のWeb標準の変遷を振り返ると共に、
今後のWebアプリケーションの動向を予測します。

機械学習に取り組む前はサーバサイドに携わっていたのでWebの話を聞きに行きました。
屋上から移動してきたら教室はすごい人数でしたが、床枠で聞けました(笑)

2018年のWeb標準

speakerdeck.com

私のまとめツイートを掘り下げていきます。

 

Service Worker
  • ブラウザにインストールされるWeb Worker
    キャッシュがあったらキャッシュを返す、なかったらネットワークへ。
    オフライン対応が注目されるが、それだけではない
  • JSで実装できるネットワークプロキシ
  • オンライン復帰を検知できる
    チャットアプリなどでユーザには送信完了と表示し、裏でネットワークが復旧したら送る
  • プッシュデータ受信できる
    生放送アプリでの利用例 ↓

developers.cyberagent.co.jp

Service WorkerはPWA(Progressive Web Apps)にも寄与する。

Chromeは対応済み。SafariはiOS11.3から。FirefoxMicrosoftもPWA対応に追従。

 

Web Components

HTML要素を自分で定義できる。CSSのスコープを汚染しない

  • Custom Elements:HTML要素を自分で定義できる
  • Shadow DOM:カスタムHTML要素がグローバルスコープに出ないようにする
  • ES Modules:再利用のための外部ファイル(export、import)

Web Componentsを使えば、ビルドがシンプルになる。(Reactなどのライブラリは多段ビルドを要求する)

描画パフォーマンスが気になる場合はlit-html。差分描画を担ってくれる

github.com

ChromeSafariが対応しているのでモバイルWebでは使える。

泉水さんブログ:

1000ch.net

 

Web Payments

ECサイトでクレジットカード情報を扱わない決済を可能にする。(スライド55, 56)

  • ECサイトから決済代行業者の画面に遷移する従来のユーザ体験と比べてストレスレス。
    トークンはカード情報ではないので、万が一漏れてもリスクは小さい
  • フォームUIの統一=決済のユーザ体験を統一

ChromeとEdgeは対応済み。SafariはiOS11.3から

参考:

クレジットカード取引におけるセキュリティ対策の強化に向けた実行計画2017(「実行計画2017」)を取りまとめました~国際水準のクレジットカード決済環境の整備を進めます~(METI/経済産業省)

 

感想 

久々にWebの話を聞いたら浦島太郎状態でした。こんなに進んでいるとは。。

最近PWAの動きが出てきているのはSafariがService Worker対応するからなんですね。
Web Componentsは触ってみたいです。(GitPitchにも載せられたりしないかな)
Web Paymentsを聞いて、AppleGoogleを通さずに支払いを受ける仕組みを作ろうとしているという話(2017年5月のHTML5感。)を思い出しました。

積読リスト

Service Workerってなんなのよ (Service Workerのえほん) - Qiita (2017年1月なので古いかも)

ライブラリを使わずここまでできる!Web Componentsで近未来のフロントエンド開発 | ヌーラボ

 

泉水さん、並びにMANABIYA運営スタッフの皆さま、
貴重なお話とそれを聞く機会をありがとうございました。