『HOT PEPPER Beauty』Frontend スピードハッカソンに参加してきた

賞状

こんにちは

今回リクルートさんが主催するスピードハッカソンに参加したので色々感想をまとめておきたいと思います。

チームメンバーのおかげでなんと優勝することができたので本当に嬉しかったです!

概要

「HOT PEPPER Beauty」のとあるページを今回のイベント用に改悪したものを渡され、それを改善するとLightHouseの計測結果(Performance)を参考にスコアづけされるというものでした。

機能・見た目を損なわなければ基本的には何をしても良いという感じでした

チームメンバーは一応ある程度実力差が出ないように調節されてたんでしょうか・・・?全くわかりません

やはりコロナウイルスが問題となっていたので消毒液は完備され、こまめに消毒するよう連絡がありました。

 

事前に準備したこと

そもそもチューニングやフロントの速度をガチで改善した経験がなかったため色々ネットでググったり、HOT PEPPER BeautyのページをLightHouseで計測してみたりはしてみました。

事前に調べたものはNotionにまとめてハッカソン開始時にチームメンバーに一応共有しました

個人的にはその時の知識をめっちゃ使ったので前準備に少し時間割いててよかったなと思いました(でももっと準備すべきだった)

後は念の為Node.jsを現時点で推奨版の12.16.1へアップデートしておきました

 

本番

チームごとに席に座る時に @たじまさんの名前があったのでtwitterでみたことある人だ!って勝手にちょっと盛り上がってました

内容説明が終わったら早速競技に取り組む予定だったんですがチームメンバーが1人遅刻したようで元々3人チームで他より1人少なめだったのに更に減って2人になるとのことで@どらさんに別チームから移動してきてもらうことになりました

とりあえずLightHouse一回実行してみてPerformanceの欄に出ているエラーを順に潰していくことになりました。

以下僕が取り組んだものです

画像のLazyLoad

自分は画像を最初から全て読み込んでおくのではなく最初は解像度をとても下げるなりそもそも表示しないなどで負荷を低くして必要な時に正規のものを表示するというLazyLoadを担当することになりました。軽く調べてはいたのですが実装はした覚えがなく手探りで進めたらやらかしました・・・

jQueryが元々入ってたので jQueryのlazyload -> https://github.com/tuupola/lazyload

を使用したんですが

Qiitaを参考に書いてみて、ローカル環境ではきちんと動いてたので(そう見えただけ)pushしたんですがどうやら書き方が古い(又は別の書き方してた)ものを参考にしちゃったみたいで本番で画像が表示されなくなってしまいました・・

きちんと一次情報を探りにいくのは大事でした

 

お昼休憩

昼食

ハンバーガーとサンドイッチがpushされました

 

CSS,JSの非同期読み込み

CSS,JSも全て読み込み終わるまで待ってたら遅いので非同期処理にすることにしました。

JSに関してですが、Chromeでは今の所deferをつけても記述順が守られるとみたことがあったので <script>タグの中に deferってつけるだけでjQueryも良いと思ってたんですけど、.htmlの中に<script>$(function(){~~} )みたいにしてる処理が途中にあるのを見落としててブックマーク機能が動かなくなりました…

全部別ファイルに移動させたらいいや〜ってやったら headじゃなくて下の方で別のscriptファイルを読み込んでてそれにも依存してるコードがあってエラーが出たりしてたので 色々ちゃんと確認すべきだなぁと反省しました

 

CSSに関しては

media="print" onload="this.media='all'

を追記するだけで良いと事前に調べてあったので こちらを実装しました。

->最後の成績発表の際に キャッシュが効かない一番最初の読み込み時にCSSなしで表示されるので軽微な障害判定を貰いました、すいません・・・

 

preconnect

リソースを先に読み込んでおいて表示を早くするやつらしいです

あまり気にした事なかったので調べて実装しました

(今考えるともっと最適化できた気がするので恥ずかしくなってます)

 

DOMの数が多い問題

LightHouseにDOMの数が多すぎる!!って怒られたのでなんとかできないか全体的にみて行ったんですが

ぱっと見不要そうなのが<b>タグ1つだけ・・・

もっと全体を把握できればタグを組み直したりで対応できたと思うんですがそこまでの時間の確保は難しそうだったので諦めました。

 

使われてないCSSの削除

残り時間も40分程になり手をつけられそうなのがこれくらいだったのですが、事前にチームメンバーの人が自動で取り除けないかやってくれたのですがうまくいかなさそうと聞いていたので可能な限り手作業で消していこうと思い立ちました・・・

1つのstyleのために記述されてるものをひたすら消していきました( .m-5{ margin:5px;}みたいなの)

実際99%使われてないcssファイルが仕込まれていたそうです(最後の解説にて発表)

結構ファイルサイズは目に見えて小さく出来たんですが、ちょうど同じタイミングくらいで @どらさんがHTTP2.0対応と 静的ホスティングをexpressではなくNginxで行う用に変更してくださり、劇的にスコアが伸びたため cssの削減はスタイル崩れによる減点を避けるために本番へはdeployしませんでした。

 

結果

チームメンバーがつよつよすぎたので僕があんまり貢献できた自信はないのですが 優勝させていただきました。本当に嬉しかったです

こうやって振り返ると自分がなんの問題もなく解決できてるのがほとんどなかったのでダメだなぁという気持ちです

他のチームの人が jsやcssをminifyちゃんとしてたり、自動で不要なもの消してたりとすごく高度(自分からして)なことをしていたのですごいなぁと思っていました

 

実はsetIntervalが引数なしで実行して無限ループしているものが仕組まれていたのですが、 途中でsetTimeoutとsetInterval一応見るか〜と思ってsetTimeoutまではみた記憶あるのですが なぜかsetIntervalは確認せずに別の作業に移ってしまったの本当に後悔してます・・なんで途中でやめたんだろう・・・

その後

ハッカソンが終わった後の懇親会やその後も他の参加者さんとお話しさせていただく機会があったのですが本当にみなさん技術力も知識も高すぎて尊敬しかありませんでした。(なんで自分が参加できたんだろうってレベル)

正直話の内容半分以上ついていけてなかった感じがあります

B3,B4の人が多かったのですが自分があと1年・2年経って同じレベルになれてる自信がないですね・・

いかに自分が雰囲気でフロントエンドをやっているかを思い知らされました。

就活の話とかも色々聞かせてもらったんですが やっぱりどれか自信のある技術領域は定めた方が良さそうなのでかなり迷います・・・

今は個人開発する時に必要なものをやったり興味あるものに手を出したりで フロント・サーバー・インフラ(?)がそれぞれ広く浅くできるって感じなので決めないとなぁとは思いつつどれも面白そうなので一本に絞るのは中々難しい・・・

今の所サーバーサイドに興味があるかなぁという気がしたりしなかったり

さいごに

交通費・宿泊費を負担してくださり、昼食や夕食も準備してくださり、問題などの準備をして開催してくれたリクルート社員の方々には本当に頭が上がりません。

ハッカソン後にLTがあり、社内や仕事の雰囲気が良い会社なんだなぁというのが伝わってきました!

中々一人でやってるとパフォーマンスの部分も妥協してしまうことが多かったのですがどうすればもっと良くなるのかを真剣に考えて取り組めた素晴らしい時間でした

また、今までこういうイベントには参加したことがなく、近い年代のエンジニア志望学生の方と話す機会がなかったので本当に楽しかったですしありがたかったです。

是非来年も参加して優勝を目指したいと思います!!!次は自分が引っ張って圧倒的な差をつけて優勝したい!!!

 

さいごのさいご

今回のインターンの参加賞としてパーカーをいただきました

実はこういうパーカーとかステッカーとかにかなり憧れてたのでめっちゃ嬉しいですw

許可を得たので上げます

(写真あげていいのかわからないのでやめておきます)