現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。レポート技術がどんどん移り変わっていく昨今、Webアプリケーションを構築する際に、フロントエンドとバックエンドでどのような技術構成にするのか、どのように状態管理するのかなど、様々な局面で課題があると思います。#2を開催いたしました。今回は弊社からエンジニアの石井が登壇し、ゲストスピーカーとして、サイバーエージェント株式会社の池田友洋さん、株式会社FOLIOの倉見洋輔さん、メルペイ株式会社の泉水翔吾さん、グーグル合同会社の宇都宮佑亮さんにお話していただきました。LIVE(フレッシュライブ)」のフロントエンドエンジニアをされているサイバーエージェント株式会社の池田さん。実際のサービスに使用している既存のフレームワークから別のフレームワークにリプレースする内容についてお話されました。リプレースに至った経緯は、既存のフレームワーク自体の開発が止まってしまい、バージョンアップに追従できなくなってしまったためだそう。「二の舞を避けるためにも、新しく導入するフレームワークの選定には気をつけました」と語る池田さん。開発が止まる懸念が少なく、採用実績や移行しやすさなどを考慮した上でフレームワークを選定し、さらに開発フローも見直したとお話していました。フレームワークをリプレースすることは、メリット・デメリット両方ありますが、そこをいち早く見抜くためにもプロトタイプなどの実装に多くの時間を割き、可能であれば開発するメンバー全員で一緒にリプレースすることが大事であるとお話されていました。株式会社FOLIO2人目は株式会社FOLIOでフロントエンドエンジニアをしている倉見さん。画像回帰テストを導入した内容についてお話されました。スタイルの検証に主に使われる画像回帰テストですが、他のコードテストと比べて難度が高く、多くのエンジニアの方々が頭を悩ましているかと思います。その中で倉見さんは、様々なワークフローを実践し、その途中での苦労話を交えながら、どのように画像回帰テストを導入したのかについてお話されていました。「画像で差分比較するスナップショットテストはかなりハードルが高いけど、導入する価値は十分にあると思う」と倉見さん。フレームワークとして良いのがないから自分で作ってしまったというエピソードをお話されていたときは、会場がどよめいていました。株式会社メルペイ3人目はメルペイ株式会社のソフトウェアエンジニアである泉水さん。Apps)に関する対応戦略と現実解についてお話されました。Checklistを上げながら、HTTPS化やパフォーマンスに関して具体的にわかりやすく説明されているのが印象的でした。絶対に必要なことをできていれば、ほぼアプリと遜色なく、後は残りのチェック項目を実践していくだけと、PWA対応は決して難しくないんだということをお話されていました。アプリとの依存関係と対費用効果をよく考えて、何をやって何をやらないのかを見極め、さらに実装しておしまいではなく、運用をよく考えることが重要であるとまとめていました。グーグル合同会社4人目はグーグル合同会社で日本およびAPACのPWAとAMPの布教活動に従事している宇都宮さん。Devtoolsを使ってパフォーマンスの計測などを実際にライブコーディングで実践してみるという内容についてお話されました。Devtoolsは多くのエンジニアの方々に使っていただいていると思いますが、まだまだみなさんの知らない隠された便利な機能がたくさんあります」と、次々に便利な機能を紹介していく宇都宮さん。パフォーマンスが改善されていき、会場は驚きの声がたくさん上がりました。「他にも便利な機能はたくさん存在します。Devtoolsを使い倒してください」と最後に締めくくっていました。最後は、弊社でフロントエンド開発に従事しているエンジニアの石井です。JavaScriptのフレームワークとして多くの人が使用しているReact/Reduxの秩序ある開発についてお話されました。「ここで言う秩序とは、複雑な要件や度重なる変更に対して柔軟に対応できる状態のことで、コード修正を行うたびに別の箇所がおかしくなってしまうことや様々な箇所のコード修正が必要になってしまう事態を避けることが重要です」と、秩序あるコードを書く大切さを説明されていました。ディレクトリ構成から状態管理の仕方など、アンチパターンの紹介も交えながら、どのようにコードを書くことで秩序を保つことができるのかを具体的にお話していました。「アプリケーションは複雑であることは認めて向き合うことが大切で、どこが複雑になるのか、どこをシンプルにできるのかを意識してコーディングすると秩序あるコードが書けると思います」としてまとめていました。まとめ画像回帰テストやPWAなど、様々なフロントエンド領域での実践的なWebアプリケーション構築方法について知ることができました。それぞれ話す内容は違いましたが、開発運用していく上で後々苦労しないように最初の段階で今後のことを考えて技術の選定やワークフローを設計することを大事にしているのが印象的でした。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。