FrontendはWebフロントエンドの現場とこれからをつなぐことを目的に、ヤフーとサイバーエージェントが共同で開催するカンファレンスです。2017年に第1回、2018年に第2回が開催され、どちらも大盛況のうちに幕を閉じました。第3回の今回は有料イベント化という初めての試みにも関わらずありがたいことに多くの方々に関心を持っていただき、満員御礼での開催となりました。本イベントは2つのセッション形式で開催されました。Anything)セッションです。参加者の方々は現場で得られたノウハウやこれからのWeb技術について、見る、聞く、話すなどしてセッションのスピーカーや他の参加者と活発に交流を深めました。休憩室ではコーヒーとスナックが振る舞われました各セミナーの発表資料や、AMAセッションの質疑応答は公式サイトのタイムテーブルからご覧いただけます。配信のアーカイブは以下からご覧いただけます。Rieseberg氏Slack社では、Electronを使用してJavaScriptによるマルチスレッドなデスクトップアプリケーションを開発しています。そのような環境では一つのミスがクラッシュに繋がってしまうため、バグをできる限り開発フェーズでなくしておくことが重要になりますが、Slackのような大規模なコードベースでは困難が伴います。Rieseberg氏(@felixrieseberg)に、Slackが抱えていたそうした課題を解決するためにTypeScriptを導入した話を通して、TypeScriptの利点と欠点、そして既存のJavaScriptをどのようにTypeScriptに移行していけばよいかをお話いただきました。当初ウェブブラウザにて高速なコード実行を行えるようにするため開発されたWebAssemblyですが、最近ではそのセキュアな実行モデルが注目され、ブラウザにとどまらずCDNのエッジコンピュータなどでも実行できる環境が整ってきています。Foltzer氏(@acfoltzer)に、Fastlyにて開発されたWebAssemblyのコンパイラ・実行環境であるLucetをアーキテクチャを含めて詳細に解説いただきました。WebAssemblyを使ったエッジコンピューティングを手軽に試せるTerrariumにて提供しているテンプレートについても紹介いただきました。Sasanuma氏Nuxt.jsが既存プロダクトの刷新や統合プロジェクトに採用される事例も増えてきているかと思います。したプロジェクトでは、しばしば新規開発とはまた違った難しさが牙をむきます。Sasanuma氏(33haji)に、ヤフー株式会社と株式会社イーブックイニシアティブジャパンがそれぞれ運営していた電子書籍販売サービスを統合したときに直面した困難について、その解決策とともにお話いただきました。APIが追加されブラウザでできることが広がるとともに、セキュリティやパフォーマンス面での懸念が増しています。PolicyはHTTPヘッダを通じてウェブサイトが使用できるAPIを制限することで、そうした懸念に対処できる新しいAPIです。Policyのユースケースについて解説いただきました。Kogiso氏デザインとフロントエンドの連携は良質なプロダクトを作る上で重要な課題ですが、一方でそれぞれに求められる技術と役割は日に日に増えており、担当範囲も細分化されてきています。Kogiso氏(@kgsi)に、デザインとフロントエンドそれぞれを俯瞰できるスキルを基に両者を一貫して扱える「デザインエンジニア」として活躍されてきた知見や、今後の展望などをお話いただきました。Ide氏(@sadnessOjisan)が開発している小売店のPOSレジ向けのB2Bサービスは、日々の入力データを基に分析するというサービスモデルから、フォームを多く含むプロダクトになっています。フォームの入力状況がKPIにもなっていることから、ユーザーの入力の様子やバリデーションエラー、サーバーのエラーレスポンスなどを細かにログとして計測しているとのことです。本セッションでは、取得したログやカスタマーサクセスチームのヒアリング結果を基に、ユーザーが離脱しにくい使いやすいフォームをどう構築すればよいのかについて具体的な事例とともに紹介いただきました。近年国内外において、プロダクトの成長速度を維持しながらデザインの統一性を担保するためにデザインシステムを構築する例が増えてきています。Haruno氏(@halsakulalala)が携わるヤフー株式会社の広告管理システムにおいて、デザインガイドラインの制定からUIフレームワークの実装までデザインシステムを一から構築した経験から、デザインとフロントエンドそれぞれの目線で得られた知見をお話いただきました。Kurami氏サーバーサイドがマイクロサービスアーキテクチャに基づいて設計されている場合、各画面に必要十分なデータを求めるフロントエンドとの間にギャップが生まれてしまいます。Frontend)と呼ばれるフロントエンドのためのサーバーです。Kurami氏(@quramy)に、BFFの開発効率を高めるために実施した施策について、マイクロサービス層のユーティリティやテスタビリティを中心にお話いただきました。Modulesやstyled-componentsといったCSS-in-JSは、CSSに擬似的なスコープを実現することで開発効率をサポートしてくれる便利なツールですが、擬似的であるがゆえの落とし穴も存在しています。Modulesを使ったCSSがどのように壊れたのかや、それぞれのアプローチの利点・欠点をお話いただきました。近年、東南アジアやアフリカでKaiOSを始めとしたガラケーやAndroidGoといった低スペックスマートフォンの市場が拡大しています。これらのデバイスでは、モダンなウェブブラウザが搭載されているため通常のウェブ開発の知識がそのまま活かせる一方で、パフォーマンスの制約はかなり厳しいものがあります。Kosaka氏(@kosamari)に、KaiOS対応のマインスイーパーを作成する過程で得られたパフォーマンステクニックやアクセシビリティ担保の方法について紹介いただきました。Miyamoto氏クライアントサイドのパフォーマンス改善を行うとき、しばしばボトルネックとなりうるのがサードパーティから提供される広告スクリプトです。Miyamoto氏(@azarashd)に、ステークホルダーの多いプロダクト開発におけるコントロールできない外部スクリプトと向き合うことの重要性や具体的な施策について紹介いただきました。高品質のWebアプリケーションをつくるためには、ユーザーインターフェイス、パフォーマンス、アクセシビリティ、セキュリティ、ネットワーク、開発体験など様々な要素を適切に組み合わせなければなりません。Toki氏(@tokimariri)に、Amebaの新機能である「こえのブログ」を開発するにあたってそれらを満たすためにどのように実装していったのか、チェックリスト形式で紹介いただきました。Wada氏ある事業ドメインにおいて後発サービスとして参入する場合、快適な利用体験を高品質で提供することで差別化を図る戦略を取りながらも、一方で素早い開発速度を保つ必要が出てくることがあります。Masuda氏(@masuP9)に、大規模な開発においてプロダクト品質と開発速度を両立するため戦略的な取捨選択を行った過程とその結果、そして今後の展望についてお話いただきました。Tani氏をお招きしてstrobo.fmの公開録音も行われました。お二方にはこれまでとこれからのキャリアについてお話いただきました。収録内容はstrobo.fmの公式サイトでお聴きいただけます。Frontendも大盛況のうちに幕を閉じることができました。本イベントが、現場のノウハウやこれからのWeb技術について考え、参加者同士の濃いコミュニケーションを生むきっかけになれたなら幸いです。懇親会にも多くの方に参加いただきました運営にご協力いただいた皆様ありがとうございましたエンジニアフロントエンドレポート勉強会tnoguchi2018年新卒入社のWebフロントエンドエンジニアです。