画像回帰テストにPWA対応、Chrome DevtoolsにReact/Reduxまで！実践的なWebアプリケーションを構築するには？ - Bonfire Frontend #2 レポート

技術がどんどん移り変わっていく昨今、Webアプリケーションを構築する際に、フロントエンドとバックエンドでどのような技術構成にするのか、どのように状態管理するのかなど、様々な局面で課題があると思います。事業会社で働くフロントエンドエンジニアの方は似たような課題をお持ちの方が多いのではないでしょうか？

弊社では、「実践的なWebアプリケーション構築」をテーマに、Bonfire Frontend #2を開催いたしました。

今回は弊社からエンジニアの石井が登壇し、ゲストスピーカーとして、サイバーエージェント株式会社の池田友洋さん、株式会社FOLIOの倉見洋輔さん、メルペイ株式会社の泉水翔吾さん、グーグル合同会社の宇都宮佑亮さんにお話していただきました。

FlummoxからReduxへリプレースした話

池田 友洋 ◆ 株式会社サイバーエージェント FRESH LIVE

1人目の登壇者は、ライブ配信サービス「FRESH LIVE（フレッシュライブ）」のフロントエンドエンジニアをされているサイバーエージェント株式会社の池田さん。実際のサービスに使用している既存のフレームワークから別のフレームワークにリプレースする内容についてお話されました。リプレースに至った経緯は、既存のフレームワーク自体の開発が止まってしまい、バージョンアップに追従できなくなってしまったためだそう。「二の舞を避けるためにも、新しく導入するフレームワークの選定には気をつけました」と語る池田さん。開発が止まる懸念が少なく、採用実績や移行しやすさなどを考慮した上でフレームワークを選定し、さらに開発フローも見直したとお話していました。フレームワークをリプレースすることは、メリット・デメリット両方ありますが、そこをいち早く見抜くためにもプロトタイプなどの実装に多くの時間を割き、可能であれば開発するメンバー全員で一緒にリプレースすることが大事であるとお話されていました。

https://docs.google.com/presentation/d/e/2PACX-1vRT9IB6ycHqBycP1Ceccmh9PMW3N_1kyEdO8KKzIEDR0S99gdlFNqxgK3Hb6qDF45Rj3Q7mzIdBfcH5/pub?start=false&loop=false&delayms=3000&slide=id.p

FOLIOに画像回帰テストを導入した話

倉見 洋輔 ◆ 株式会社FOLIO

2人目は株式会社FOLIOでフロントエンドエンジニアをしている倉見さん。画像回帰テストを導入した内容についてお話されました。スタイルの検証に主に使われる画像回帰テストですが、他のコードテストと比べて難度が高く、多くのエンジニアの方々が頭を悩ましているかと思います。その中で倉見さんは、様々なワークフローを実践し、その途中での苦労話を交えながら、どのように画像回帰テストを導入したのかについてお話されていました。「画像で差分比較するスナップショットテストはかなりハードルが高いけど、導入する価値は十分にあると思う」と倉見さん。フレームワークとして良いのがないから自分で作ってしまったというエピソードをお話されていたときは、会場がどよめいていました。

PWA対応戦略と現実解

泉水 翔吾 ◆ 株式会社メルペイ

3人目はメルペイ株式会社のソフトウェアエンジニアである泉水さん。PWA（Progressive Web Apps）に関する対応戦略と現実解についてお話されました。「PWA対応についてチェックすべき項目はたくさんあるが、基本としてまず3つをクリアすると良い」と、Progressive Web Apps Checklistを上げながら、HTTPS化やパフォーマンスに関して具体的にわかりやすく説明されているのが印象的でした。絶対に必要なことをできていれば、ほぼアプリと遜色なく、後は残りのチェック項目を実践していくだけと、PWA対応は決して難しくないんだということをお話されていました。アプリとの依存関係と対費用効果をよく考えて、何をやって何をやらないのかを見極め、さらに実装しておしまいではなく、運用をよく考えることが重要であるとまとめていました。

https://docs.google.com/presentation/d/180YPMPaV-RsuYw4iALeJAE2uddr3pUs874TAfcJlFhM/edit#slide=id.g4029bfe6f6_0_51

Chrome Devtoolsで遊んでみる

Yusuke Utsunomiya / 宇都宮　佑亮 ◆ グーグル合同会社

4人目はグーグル合同会社で日本およびAPACのPWAとAMPの布教活動に従事している宇都宮さん。今回はChrome Devtoolsを使ってパフォーマンスの計測などを実際にライブコーディングで実践してみるという内容についてお話されました。「Chrome Devtoolsは多くのエンジニアの方々に使っていただいていると思いますが、まだまだみなさんの知らない隠された便利な機能がたくさんあります」と、次々に便利な機能を紹介していく宇都宮さん。どんどんパフォーマンスが改善されていき、会場は驚きの声がたくさん上がりました。「他にも便利な機能はたくさん存在します。ぜひChrome Devtoolsを使い倒してください」と最後に締めくくっていました。

React/Reduxで秩序あるコードを書く

石井 直矢 ◆ ヤフー株式会社

最後は、弊社でフロントエンド開発に従事しているエンジニアの石井です。JavaScriptのフレームワークとして多くの人が使用しているReact/Reduxの秩序ある開発についてお話されました。「ここで言う秩序とは、複雑な要件や度重なる変更に対して柔軟に対応できる状態のことで、コード修正を行うたびに別の箇所がおかしくなってしまうことや様々な箇所のコード修正が必要になってしまう事態を避けることが重要です」と、秩序あるコードを書く大切さを説明されていました。ディレクトリ構成から状態管理の仕方など、アンチパターンの紹介も交えながら、どのようにコードを書くことで秩序を保つことができるのかを具体的にお話していました。「アプリケーションは複雑であることは認めて向き合うことが大切で、どこが複雑になるのか、どこをシンプルにできるのかを意識してコーディングすると秩序あるコードが書けると思います」としてまとめていました。

まとめ

画像回帰テストやPWAなど、様々なフロントエンド領域での実践的なWebアプリケーション構築方法について知ることができました。それぞれ話す内容は違いましたが、開発運用していく上で後々苦労しないように最初の段階で今後のことを考えて技術の選定やワークフローを設計することを大事にしているのが印象的でした。Webアプリケーション構築する上で、今すぐにでも実践できるような充実した内容のイベントとなりました！

Photo Credit: 倉長 拓海