コラム

2022/06/08

67名のエンジニアたちが爆速で課題解決に挑む「Ateam Frontend SpeedUp Contest」初開催！

お互いに学び合うためのライトニングトーク（以下LT）大会、エンジニアによる社内技術勉強会、エンジニア有志チームでプログラミング競技バトル「ISUCON」に参加するなど、エイチームのエンジニアたちは、これまで様々な「学び」に関する取り組みを行ってきました。今回は、「ISUCON」にヒントを得て、社内でサイト表示速度などのスピードアップを図る「Ateam Frontend SpeedUp Contest」を2022年4月28日(木)に開催しました。今回は、エイチームで初めて開催した本イベントを紹介します。

「Ateam Frontend SpeedUp Contest」とは

開発メンバーの技術力向上を目的とした社内プログラミングバトルコンテスト。初開催の今回は「サイトの表示速度のスピードアップ」を目的に、主にフロントエンドに関わるエンジニアが対象。24チーム、合計67名のエンジニアが参加。

開催概要

• 実施日: 4月28日(木)（初開催）
• 実施時間:
  • 【競技時間】9:00 〜 18:00 (途中参加可)
  • 【結果発表】18:30 〜 （※対策例紹介＋懇親会)
• 参加資格者：
  • HTML, CSS, JavaScript(TypeScript)などを使用する方
    (主にエンジニア、デザイナー、コンテンツマーケティング（SEO）担当者、など)
• 出題内容：
  • Reactを用いたWebサイトのLighthouseをベースとした得点方式

開催の目的（運営チームのコメント）

Webサイトを数多く運営する私たちですが、サイトの成長に伴って「サイト表示速度を改善してほしい」という要望を社内からいただくことが、しばしばあります。これは、昨今重要視されている「サイト表示速度というユーザエクスペリエンス」が、日常の開発運営の過程で少しだけ軽視されてしまうことが積み重なった結果、生まれてしまうのではと捉えています。

日常の開発で常に表示速度が意識され改善対応がされるようになってほしいと思う反面、その改善方法は経験に伴う知識に左右されることが大きく、開発者個人の努力のみに期待するだけでは難しい面もあるかと考えています。

そのため、Webサイトのフロントエンド領域に関わる方々には、ぜひ経験を通じて知識の獲得をしてもらいたく、今回のイベントを開催することに至りました。

本イベントを通じて、自身が携わるWebサービスやサイトのユーザエクスペリエンスの一部を改善できるようなきっかけになればと考えています。

コンテストの事前準備について

コンテストの技術的なレポートはこちらのQiita記事に公開しています。

出題について

2021年12月にCyberAgent社で開催された「Web Speed Hackathon 2021 mini（※）」をISUCON形式にカスタマイズ。
※本イベントは「OSS」として同社がインターネット上に公開しております。また、当社イベントでの利用に関しては同社に確認しております。関係者の皆さまには感謝を申し上げます。

使用技術について

「Ateam Frontend SpeedUp Contest」で使用された技術については、こちらで公開しております。

スコアの算出について

スコアの算出はLighthouse を用いて、次の計 6 ページを検査します。

• ホーム
• 投稿詳細ページ x 3
• ユーザー詳細ページ
• 利用規約ページ

各ページの Lighthouse v8 Performance Scoring に基づき、次の総和をページのスコアとします。

• Performance Score (0-100 点)
• First Contentful Paint の相対スコア × 2 (0-2 点)
• Speed Index の相対スコア × 2 (0-2 点)
• Largest Contentful Paint の相対スコア × 5 (0-5 点)
• Time To Interactive の相対スコア × 2 (0-2 点)
• Total Blocking Time の相対スコア × 6 (0-6 点)
• Cumulative Layout Shift の相対スコア × 3 (0-3 点)

各ページのスコアを合算して得点とします。採点前にVisual Regression Testが実施されますが、差分がある場合はスコアを0とします。最終順位に使用されるスコアはチーム単位で最後に実施されたスコアを採用します。

いよいよ、コンテストスタート！

コンテスト当日のスケジュール

9時から競技がはじまり、18時に計測を締め切ります。すぐさま結果発表＆対策の解説を実施する、ハードなスケジュールです。

問題を準備した運営チームのエンジニアからは、「正直1日では改修が足りないくらいのアプリケーションを用意してしまった感があるのですが、皆さんなら大丈夫ですよね？本日は素晴らしいスコアが出るのを楽しみにしております。」という励まし（煽り）のエールが届きます。早くも、波乱なバトルの幕開けの予感です。

09:00	競技開始	全チームにイベントに関するアプリケーションやサーバ情報などを公開と同時に競技開始
17:00	終了直前	全チームのスコアを参照できますが、17時〜18時まではスコアを参照できなくなります。（最終結果はお楽しみ！）
18:00	計測締切	この時間までにスコア計測を開始したもので締め切り、順位を決定。
18:30	結果発表	表彰式で結果発表！ ※計測締め切りからの30分でスコアリングと表彰式を準備！
19:00	解説会	今回のコンテストの対策の解説、オンライン交流会

つわものどもが夢の跡（結果発表）

では、いよいよ結果発表です。

運営チーム：

悩んだチームもたくさんあったと思いますが、楽しんでいただけたと思います。そうした中、素晴らしいパフォーマンスを発揮したチームには「賞賛」と「副賞」をプレゼントします！（ぱちぱち）

ラスト1時間はスコア非公開にしていましたが、思わぬドラマがたくさんありました！運営チームはどきどきしながら見守っていました（笑）

では、結果発表を行います！
レギュレーションチェックをしたところ、チェックが通らなかった上位チームが、なんと2チームもありました。そのチームは、申し訳ありませんが、表彰から滑り落ちています…。では、結果発表です。

第3位は「金融教育チーム（※）」です！
240.96点、おめでとうございます！
最後にQを入れることでスコアが落ちてしまいましたが、途中までは2位でした。ラスト1時間の途中まではスコアに伸び悩んでいました。そのあたりを表彰コメントとしていただきましょう。

※2021年10月にリリースした「ナビナビ資産運用デザインゲーム」の開発を担当したメンバーで構成されたチーム

金融教育チーム：

点数が伸びたときはガチャもあるんですが、lazyloadとgzipの処理を入れたら点が伸びました！以上です！

運営チーム：

続きまして第2位です。本当に波乱に満ちていましたね。
なんと、なんと！すごく意外ですが、「Team ML（※）」が第2位に輝きました。

フロントエンド領域にも関わらず、機械学習チームが勝ちました！しかも2名のチームで2位まで昇り詰めました

※当社は積極的に機械学習を技術として導入しています。過去に社内で実施したAI施策検討会「ML Contest」に参加したメンバーにより結成されたチーム。

ML Team：

このような結果が出るとは思っていなかったので、びっくりしています。
ただ、やれることは、いろいろやりました。
ML TeamのMLは「Meta-Language」の略で、つまり「TypeScript」のことを指しているということにさせてください…！（笑）

運営チーム：

そして最後は栄えある第1位の発表です。
第1位は、482.3点のぶっちぎりで、「上島洋菓子店」チームです！引越し侍を運営しているチームですね！

上島洋菓子店チーム：

ありがとうございます！
最初に運営チームにはお伝えしましたが、今回の問題の前提となる事例問題をめちゃくちゃにやり尽くして、かなりそのノウハウが活きちゃいました。ただ、とても勉強になりました。素直に喜びたいと思います。ありがとうございます！

運営チーム：

今回1位に輝いたチームの皆さんへの副賞があります！
副賞として、「今後のWebサイトのスピード改善は優勝チームの皆さんが実施する」というものです！

皆さん、今後サイト改善やスピードアップに関する要望がありましたら、このチームの3名に相談していただければと思います。きっと速くしてくれるはずです！どうぞ、遠慮なく依頼いただければと思います！（笑）

※コンテストに参加したエンジニアたちからは「勝ち取った報酬がまさかの『仕事ｗｗｗ』」と感想が寄せられ、笑いを誘いました！

また、今回の計測結果はこちらです。各チームの激戦が伺えますね。

ランキングはこちら。第1位の「上島洋菓子店チーム」が圧倒的にスコアを伸ばし、その他チームは混戦を極めました。

コンテストを終えて

運営責任者による総括

エイチームライフデザイン 技術開発部 部長

参加したエンジニアの皆さん、今日1日、本当にお疲れさまでした。
エイチームとして初めて開催した「Ateam Frontend SpeedUp Contest」いかがでしたか？

まずは、運営チームの皆さん、準備と運営、本当にありがとうございました。
リーダーボードの作成、裏側のスコア計測のところなど、まったく不具合がなく、とてもスムーズな進行ができたことが、まずはとても素晴らしいと思います。感謝の気持ちでいっぱいです。

さて、このコンテストですが、もともとは「もっとWebサイトのスピードを速くしてほしい」というリクエストをよくいただくのですが、「どこをどうするのが、サイトを速くするポイントなのか」というのを手応えとしてつかんだ方がいいよね、ということではじまりました。

今回の結果に対して「良かった」「悪かった」で終わるのではなく、今日の経験を勉強と学びの機会として、今後に活かしてもらいたいと思います。また、ぜひ皆さんが実際に運営しているWebサイトの改善にもつなげてもらいたいです。

参加したエンジニアの皆さんにとても楽しんでいただけたと思います。ぜひ、第2回目以降も継続的に取り組んでいきたいと思います！

参加したエンジニアの感想

エイチームライフデザイン「引越し侍」エンジニア H.K.さん

日常業務でもフロントエンド開発に頻繁に携わっているため、日々の努力が成果につながったことを非常に嬉しく感じます。それと同時に、事前学習やコンテスト本番を通じ、まだまだ知らないことも多いと痛感しました。

フロントエンド界隈は変化が目まぐるしく、新しい技術のキャッチアップに目がいきがちです。ですが、サービスを提供する立場として、ユーザビリティに直結するサイトパフォーマンスへの意識をもう一段上げ、精進しようと思います。

エイチームライフデザイン「引越し侍」エンジニア Y.H.さん

事前に予習していたため、多くの打ち手を実施できました。ただインフラ関連にうまく対処できなかったため、今後はより精進していきたいです。
また、運営の方が作ってくれたベンチマークとダッシュボードの体験が非常に良く、モチベーションにつながりました。パフォーマンス改善パターンを多く学ぶことができたので、担当事業のアプリケーションでもその視点を活かして開発・改善していきます！

運営メンバーの感想

エイチームライフデザイン　技術開発部 エンジニア　A.U.さん

通常の営業日の丸一日を使って、ゲーム感覚で今回のような取り組みができること、そしてその取り組みに対して、社内で参加メンバーを公募したところ、これほどものたくさんの人が参加してくれたことが、エイチームの良いところだなと改めて実感しました。また同時に、本イベントの運営に関してやりがいを感じることができました。
また、運営準備に際して技術的な挑戦・実験をいくつか併せて行っており、技術的な学びや気づきが多かったです。こうした学びや成果を今後のサービス開発に還元していきます。

エイチームライフデザイン　技術開発部 エンジニア　R.T.さん

こういうイベントを開催すれば楽しく学べる場として提供できると思い、開催を決めました。結果的には相当数のメンバーが参加してくれたことを嬉しく思っています。また参加メンバーの中にはこういった機会だからこそ事前に知識を得て参加してくれた方々もいて開催者冥利に尽きます。
運営としては幅広い職種に向けたイベントだったので今後はもっともっと参加していただくような取り組みをしつつ、このように「学ぶ」だけではなく「楽しく学ぶ」場を色々な形で提供していけたらと思います。

エイチームでは、事業の成長を担うエンジニアの皆さんの技術力の向上のため、社内外問わず学びの機会を活用し、さまざまなチャレンジをしてまいります。

エイチームでは、新卒採用・中途採用ともに、一緒に働くエンジニアの採用を積極的に行っています。興味・関心ありましたらぜひエントリーをお願いします。

新卒採用
中途採用