今回は2019年5月18日（土）に開催された「Inside Frontend #3」のレポートをお届けします！
Inside Frontend とは
Inside FrontendはWebフロントエンドの現場とこれからをつなぐことを目的に、ヤフーとサイバーエージェントが共同で開催するカンファレンスです。
2017年に第1回、2018年に第2回が開催され、どちらも大盛況のうちに幕を閉じました。
第3回の今回は有料イベント化という初めての試みにも関わらずありがたいことに多くの方々に関心を持っていただき、満員御礼での開催となりました。
本イベントは2つのセッション形式で開催されました。 各社のケーススタディや様々な分野のスペシャリストによるセミナーと、セミナーの後でスピーカーと自由に質問や議論ができるAMA（Ask Me Anything）セッションです。参加者の方々は現場で得られたノウハウやこれからのWeb技術について、見る、聞く、話すなどしてセッションのスピーカーや他の参加者と活発に交流を深めました。
各セミナーの発表資料や、AMAセッションの質疑応答は公式サイトのタイムテーブルからご覧いただけます。また、配信のアーカイブは以下からご覧いただけます。
それではここからは、各セミナーの概要をご紹介します！
TypeScript: Why and how we adopted it at Slack
Slack社では、Electronを使用してJavaScriptによるマルチスレッドなデスクトップアプリケーションを開発しています。そのような環境では一つのミスがクラッシュに繋がってしまうため、バグをできる限り開発フェーズでなくしておくことが重要になりますが、Slackのような大規模なコードベースでは困難が伴います。
本セッションではFelix Rieseberg氏（@felixrieseberg）に、Slackが抱えていたそうした課題を解決するためにTypeScriptを導入した話を通して、TypeScriptの利点と欠点、そして既存のJavaScriptをどのようにTypeScriptに移行していけばよいかをお話いただきました。
Introduction to Lucet
当初ウェブブラウザにて高速なコード実行を行えるようにするため開発されたWebAssemblyですが、最近ではそのセキュアな実行モデルが注目され、ブラウザにとどまらずCDNのエッジコンピュータなどでも実行できる環境が整ってきています。
本セッションではAdam Foltzer氏(@acfoltzer)に、Fastlyにて開発されたWebAssemblyのコンパイラ・実行環境であるLucetをアーキテクチャを含めて詳細に解説いただきました。また、WebAssemblyを使ったエッジコンピューティングを手軽に試せるTerrariumにて提供しているテンプレートについても紹介いただきました。
Nuxt.jsで中規模サービスを統合した話
Nuxt.jsが既存プロダクトの刷新や統合プロジェクトに採用される事例も増えてきているかと思います。しかしながらそうしたプロジェクトでは、しばしば新規開発とはまた違った難しさが牙をむきます。
本セッションでは、Koichi Sawada氏(sawapi)とHajime Sasanuma氏(33haji)に、ヤフー株式会社と株式会社イーブックイニシアティブジャパンがそれぞれ運営していた電子書籍販売サービスを統合したときに直面した困難について、その解決策とともにお話いただきました。
Making less of the web with feature policy
毎年のように新しいWeb APIが追加されブラウザでできることが広がるとともに、セキュリティやパフォーマンス面での懸念が増しています。Feature PolicyはHTTPヘッダを通じてウェブサイトが使用できるAPIを制限することで、そうした懸念に対処できる新しいAPIです。
本セッションではAndrew Betts氏(@triblondon)に、セキュリティやパフォーマンス向上、開発時のベストプラクティス推進、サードパーティスクリプトの制御などFeature Policyのユースケースについて解説いただきました。
デザインエンジニアとフロントエンド
デザインとフロントエンドの連携は良質なプロダクトを作る上で重要な課題ですが、一方でそれぞれに求められる技術と役割は日に日に増えており、担当範囲も細分化されてきています。
本セッションではShinichi Kogiso氏(@kgsi)に、デザインとフロントエンドそれぞれを俯瞰できるスキルを基に両者を一貫して扱える「デザインエンジニア」として活躍されてきた知見や、今後の展望などをお話いただきました。
formの送信ログから反省する、本当は必要だったvalidationや機能たち
Yuta Ide氏(@sadnessOjisan)が開発している小売店のPOSレジ向けのB2Bサービスは、日々の入力データを基に分析するというサービスモデルから、フォームを多く含むプロダクトになっています。フォームの入力状況がKPIにもなっていることから、ユーザーの入力の様子やバリデーションエラー、サーバーのエラーレスポンスなどを細かにログとして計測しているとのことです。
本セッションでは、取得したログやカスタマーサクセスチームのヒアリング結果を基に、ユーザーが離脱しにくい使いやすいフォームをどう構築すればよいのかについて具体的な事例とともに紹介いただきました。
いちからデザインシステムを作ってみて学んだこと
近年国内外において、プロダクトの成長速度を維持しながらデザインの統一性を担保するためにデザインシステムを構築する例が増えてきています。
本セッションでは、スピーカーのKengo Haruno氏(@halsakulalala)が携わるヤフー株式会社の広告管理システムにおいて、デザインガイドラインの制定からUIフレームワークの実装までデザインシステムを一から構築した経験から、デザインとフロントエンドそれぞれの目線で得られた知見をお話いただきました。
BFFのDeveloper Experience
サーバーサイドがマイクロサービスアーキテクチャに基づいて設計されている場合、各画面に必要十分なデータを求めるフロントエンドとの間にギャップが生まれてしまいます。それらの間を取り持つのがBFF(Backend For Frontend)と呼ばれるフロントエンドのためのサーバーです。
本セッションではYosuke Kurami氏(@quramy)に、BFFの開発効率を高めるために実施した施策について、マイクロサービス層のユーティリティやテスタビリティを中心にお話いただきました。
AbemaTVにおけるCSS is too fragile問題に対する解
CSS Modulesやstyled-componentsといったCSS-in-JSは、CSSに擬似的なスコープを実現することで開発効率をサポートしてくれる便利なツールですが、擬似的であるがゆえの落とし穴も存在しています。
本セッションではShota Kubota氏(@kubotashota)に、リファクタリングをトリガーにして起こったデザイン崩れをきっかけにCSS ModulesからBEMとPostCSSの組み合わせに移行した話を通して、CSS Modulesを使ったCSSがどのように壊れたのかや、それぞれのアプローチの利点・欠点をお話いただきました。
世界中誰もが使えるサービスを目指して、Web標準で作るガラケーサイト
近年、東南アジアやアフリカでKaiOSを始めとしたガラケーやAndroidGoといった低スペックスマートフォンの市場が拡大しています。これらのデバイスでは、モダンなウェブブラウザが搭載されているため通常のウェブ開発の知識がそのまま活かせる一方で、パフォーマンスの制約はかなり厳しいものがあります。
本セッションではMariko Kosaka氏(@kosamari)に、KaiOS対応のマインスイーパーを作成する過程で得られたパフォーマンステクニックやアクセシビリティ担保の方法について紹介いただきました。
Loading Performanceとの向き合い方
クライアントサイドのパフォーマンス改善を行うとき、しばしばボトルネックとなりうるのがサードパーティから提供される広告スクリプトです。
本セッションでは日頃から日経電子版のパフォーマンス改善を行っているSho Miyamoto氏(@azarashd)に、ステークホルダーの多いプロダクト開発におけるコントロールできない外部スクリプトと向き合うことの重要性や具体的な施策について紹介いただきました。
Web App Checklist ~高品質のWebアプリケーションをつくるために~
高品質のWebアプリケーションをつくるためには、ユーザーインターフェイス、パフォーマンス、アクセシビリティ、セキュリティ、ネットワーク、開発体験など様々な要素を適切に組み合わせなければなりません。
本セッションではKazunari Hara氏(@herablog)とMarina Toki氏(@tokimariri)に、Amebaの新機能である「こえのブログ」を開発するにあたってそれらを満たすためにどのように実装していったのか、チェックリスト形式で紹介いただきました。
品質と開発速度を両立させるために捨てたものと守ったもの
ある事業ドメインにおいて後発サービスとして参入する場合、快適な利用体験を高品質で提供することで差別化を図る戦略を取りながらも、一方で素早い開発速度を保つ必要が出てくることがあります。
本セッションではTsuyoshi Wada氏(@wadackel)とSoichi Masuda氏(@masuP9)に、大規模な開発においてプロダクト品質と開発速度を両立するため戦略的な取捨選択を行った過程とその結果、そして今後の展望についてお話いただきました。
キャリア系の話~strobo.fm公開収録~
今回のInside Frontendでは、Shogo Sensui氏とHiroki Tani氏をお招きしてstrobo.fmの公開録音も行われました。お二方にはこれまでとこれからのキャリアについてお話いただきました。
収録内容はstrobo.fmの公式サイトでお聴きいただけます。
最後に
おかげさまで第3回Inside Frontendも大盛況のうちに幕を閉じることができました。
本イベントが、現場のノウハウやこれからのWeb技術について考え、参加者同士の濃いコミュニケーションを生むきっかけになれたなら幸いです。
