Inside Frontend vol2の感想

Published at 2018-02-14

第二回となる Inside Frontend を2月11日に開催しました。今年は超速 AMA 枠で出演しつつ、スタッフ業をこなしました。

会場は日本経済新聞社

昨年は、紀尾井町にオフィスを構える Yahoo! Japan での開催でしたが、今年は大手町にある日本経済新聞社の日経カンファレンスルームにて。Frontend Meetup Tokyo の開催等で何回か行ったことがありましたが、大手町駅直結しています（C2b 出口）。

駅地下街も栄えていますが、日曜日ということで軒並み閉店という噂がタイムラインを賑わしていたので、急遽渋谷のモスバーガーにて朝食を取りました（超速 AMA プレゼントの超速本を取りにオフィスに行ってた）。

公式でアナウンスしたほうがいいんじゃないかレベルの休業状況
— 🐕 Hiroki tani ☕ (@hiloki) 2018年2月11日

早めに来て珈琲でも飲もうと思ったらビルの飲食店が壊滅的に開いてない
— :masuP9: (@masuP9) 2018年2月11日

トラック

去年は3トラックでしたが、今年は2トラック構成でした。例年通り AMA の時間もありましたが、昨年の反省を活かして休憩を適度に挟んだタイムテーブルに。スタッフ労働しながら、合間時間を縫ってセッションを拝聴しました。

当日の様子は AMA と非公開セッションを除き、アーカイブされています。

freeeのアクセシビリティ、いまとこれから

伊原さんが freee でやっているアクセシビリティの推進活動について。まさに （いきなり全部ではなく）できる部分からやる を体現している話でした。

組織におけるアクセシビリティの意義を、「正当性で殴るのか、はたまた KPI で納得させるのか」みたいな話がこのセッションではないどこかでありましたが、両面で訴えているのが印象的でした。「協力者が欲しい」話はｳﾝｳﾝという感じ…。

Web Payments / Payment Request API について何でも訊いて下さい

最近立て続けに Web Payments に関わるプロジェクトをやっていたこともあり、理解が及んでいなかった部分を聞けてよかったです。Web Payments / Payment Request API そのものが決済機能を持つという誤解をしている人も多かったのではないでしょうか。

一言で説明が難しいものばかりですが、敢えて試みます。

Web Payments: より安全で便利な決済の仕組みを目指す Open Web の仕様・エコシステムの総称
Payment Request API: Web Payments の一部を司る、従来の入力フォームを置き換えるブラウザネイティブの UI
- basic-card や各種 Payment App などの支払い方法を選択するインターフェースを含む
- ユーザーが入力した決済に関する情報を収集するだけで、決済機能は持たない

詳細は[えーじさんのブログの Web Payments タグがついた記事](https://blog.agektmr.com/tags/#Web Payments)を読むと良いです。

攻めつづける FRESH! の Web ver.新春

いつも通り色々攻めてる FRESH! の話。 攻め続ける という言葉にピンと来ていない人がもしかしたらいるかもしれません。

FRESH! は @stormcat24 を筆頭としたエンジニアが集まったチームですが、Fresh Initiative Laboratory（通称 FIL）という Google の20%ルールのような取り組みを実施しながら常に技術的な投資を行っています。で、横軸組織の私も加わりつつ Web チームと一緒に品質改善や新技術の導入を継続的に行ってきました。

ざっと思いつくところだと

Node.js v4 -> v6 -> v8 へのアップデート
RUM-SpeedIndex と Paint Timing API を使ったユーザー環境のパフォーマンス計測
静的アセットへの Cache-Control: Immutable の適用
zopfli および brotli を使ったテキストファイルの圧縮
HTTP/2 に最適化するために SVG スプライトの撤廃
Service Worker を使ったアセットのキャッシュ
Flux ライブラリの移植（flummox -> Redux）
Intersection Observer を使った画像の遅延ロード、および汎用コンポーネント化
Service Worker を使ったプッシュ通知の受信
Payment Request API を使ったコイン決済機能の導入

などがあります。

セッション中、GoogleChrome/puppeteer をスーチーはパッパティーアと読んでいたが、それが気になって集中できなかった😇私はパペッターかと思っていたがそうでもないらしい。パペティア？

Web パフォーマンスについて何でも訊いて下さい

私と @ahomu で何でも答えます、な AMA でした。裏番組が「コンポーネント座談会」と「現場の ES201x とアーキテクチャの変遷と未来」だったのですが、人を吸い取られすぎずちゃんと盛況しました。

やたら盛況していた #insidefrontend の超速 AMA の様子
Shogo Sensuiさん(@1000ch)がシェアした投稿 - 2月 11, 2018 at 6:33午後 PST

micro-benchmarking is hard

非公開セッションですが、資料が公開されています。とても面白かったです。