Webフロントエンドの現場とこれからをつなぐカンファレンス「Inside Frontend #2」開催レポート

初めまして！アメーバブログでフロントエンド開発をしている2017年新卒エンジニアの上西です。

今回は2018年2月11日（日）に開催された「Inside Frontend #2」のレポートをお届けします！

Inside Frontendとは

Inside FrontendはWebフロントエンドの現場とこれからをつなぐことを目的に、日本経済新聞社、ヤフー、サイバーエージェントが共同で開催するカンファレンスです。

第1回は2017年2月25日（土）に開催され、大盛況のうちに幕を閉じました（第1回開催レポート）。第2回の今回も、ありがたいことに多くの方々に関心を持っていただき、連休の中日にもかかわらず定員330人に対して490人を超える応募をいただきました。

本イベントは2つのセッション形式で開催されました。各社のケーススタディや様々な分野のスペシャリストによるセミナーと、特定のテーマについてブースオーナーと自由に話ができるAMA（Ask Me Anything）ブースです。参加者の方々は現場で得られたノウハウやこれからのWeb技術について、見る、聞く、話すなどしてセッションのスピーカーや他の参加者と活発に交流を深めました。

イベント当日はセミナーの様子がFresh!で生配信されました。配信のアーカイブは以下からご覧いただけます。

AMAブースは生配信の対象外でしたが、質疑応答のログはGitHubのIssueの形式で残されています。興味のある方はぜひご覧ください！

>> AMAブースの質疑応答ログはこちら

それではここからは、各セミナーの概要をご紹介します！

Varyヘッダとキャッシュバリエーションの将来

リソースの出し分けにはバリエーションごとに個別のURLを用意することも多いですが、HTTPには同じURLに対してクライアント側がリソースのバリエーションを指定できる仕組みがあります。この仕組みはHTTPにおいてコンテンツネゴシエーションといい、これを正しく利用することでCDNのキャッシュをより効率化できます。

本セッションでは、Andrew Betts氏（@triblondon）にコンテンツネゴシエーションにおいて重要な役割を果たすVaryの正しい使い方と新しい仕様であるkeyとの両方について詳しく解説していただきました。

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

アクセシビリティ関連の書籍を多数出版されている伊原力也氏（@magi1125）ですが、アクセシビリティはどうしてもビジネスと直結しづらいことから「できたらやること」程度の捉え方をされている傾向が強いと感じているそうです。

本セッションでは、そんなアクセシビリティでビジネスに貢献する事例を作りたいという目的で入社したfreeeにおいて、どのような活動を行っているのか、社内の意識やサービスの今とこれからについて発表いただきました。

freeeのアクセシビリティ、いまとこれから – Google スライド

現場のES201xと未来のアーキテクチャ

ここ10年のフロントエンドは激動の時代と称されるほど変化の激しい世界でした。そのためキャッチアップに苦しむ現場や経年劣化に苦しむプロダクトなどは珍しくありませんでした。

本セッションでは、これまで数々の現場を経験してきた@mizchi氏に、フロントエンドアーキテクチャの変遷の振り返りと次の世代に何を見定めるべきかを解説していただきました。

「規約に同意」のUX -ストレスフリーな同意UIとその実現方法-

利用規約などが重要な文書であることは言うまでもありませんが、そのような規約を読まずに内容に同意してしまっている人は多く、全体の93%の人々が読んでいないという調査結果もあります。

本セッションでは、金融機関でフロントエンドエンジニアをされているHikaru Takemura氏（@pika_shi）に、厳格なコンプライアンスを遵守しつつ高いUXを実現するために行っている様々な試みを紹介していただきました。また、文書管理を効率化する試みとして、Wordが必要なコンプライアンス部とHTMLが必要なWebエンジニアの重複管理をさけるため、GitLab上で管理されるMarkdown原本からWordとHTMLを生成するフローに移行したことも紹介していただきました。

コンポーネントTDDの実践から見えたもの

仕様変更の多いコンポーネント開発では単体テストを書かなかったり、書いても実装に対するテストケースになってしまうなど、漠然とした不安を抱えたままになってしまうことは現実的に珍しくないでしょう。

本セッションでは、ReactやVueのプロジェクトにおいてコンポーネントのTDD（Test Driven Development）を実践されている穴井宏幸氏（@pirosikick）に、その方法とコツ、実践して見えたメリットや課題感について発表していただきました。

<br />

Inside Frontend 2 #insideFE from Hiroyuki Anai

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

昨年Service Workerを用いたユーザビリティ、パフォーマンスの改善を進めたFRESH!。年末にはチャンネルオーナーが実現したい番組などの企画のために視聴者からのファンディングを募ることができる「ライブファンディング機能」をリリースしました。

本セッションでは、FRESH!のフロントエンドを開発しているすちを氏（@sutiwo_）に、Payment Request APIを使ったライブファンディング機能の実装やReact v16対応、Puppeteerを利用したE2Eテストなどの話をしていただきました。

日経電子版を速くする

日経電子版といえば、昨年のリニューアルで爆速化して大きな話題になりました。

本セッションでは、日経電子版のフロントエンドからバックエンド、CDN周りまで担当されている宍戸俊哉氏（@sisidovski）に、日経電子版を速くするために行っていることについて発表していただきました。 Fastlyの活用やキャッシュ制御、Service Workerなどのトピックを軸に、主に現場でどう頑張ったかについて紹介していただきました。

動的デザインガイドラインのつくり方

サービスとして一貫したデザインを保ち、継続的にアップデートしていくためには、デザイン意図、ビジネス仕様、技術情報、利用方法について全員が共通認識を持ち、定義したデザインを迅速にプロダクトに反映できるようにするためのシステムが必要不可欠です。

本セッションでは、GAYO!のエンジニアである浜田真成氏（@narirow）に、動的デザインガイドラインを生成する仕組みと実際にサービスに導入して実践するまでを、GYAO!のWeb刷新の実例を交えて紹介していただきました。

Micro-benchmarking is Hard

JS VMは実行パフォーマンス向上のために様々な最適化を行います。もちろんベンチマーク用コードに対しても同様の処理が行われるのですが、場合によってはこれがベンチマークの評価対象を意図した計測ができない状態に改変してしまうことがあります。

本セッションでは、AbemaTVのTetsuharu Ohzeki氏とゲストスピーカーの@kirararepublic氏のお二人に、マイクロベンチマークが容易に本来の意味を見失うということをJS VMの実例とともに解説していただきました。

例えば以下のコードは、4種類のundefined判定にかかる時間を比較しようとしたマイクロベンチマークですが、JS VMの最適化によってすべて空ループに変換されてしまう例として紹介されました。

// 計測したい行のコメントを解除して実行する
start = () => {
  let x;
  const startTime = new Date();
  for (let i = 0; i < 10000000; i = i + 1) {
    /* if (typeof x === 'undefined') {} */ // (1)
    /* if (x === undefined) {} */          // (2)
    /* if (x === void 0) {} */             // (3)
    /* if (!x) {} */                       // (4)
  }
  const endTime = new Date();
  console.log(endTime - startTime);
}

Micro-benchmarking is Hard – Google スライド