このエントリーをはてなブックマークに追加
スクリーンショット 2015-11-14 15.59.10

読了: 約 4 分

サイバーエージェントで、チームを創って、フロントエンド、インフラ、サーバーと3人でバランスを見ながらチューニングしてパフォーマンスを競い合うというISUCONみたいなコンテストが開催されるということで参加してきました。

upload

結果はまさかの3位という結果で非常に嬉しかったのですが、優勝を目指していたので悔しい部分もありました。(100万がー!!!)
準備から色々していたのですが、順位以上に多くの学びがあったので次回ハッカソンとか外部のチューニングコンテストに出場時の為に、参加する前の準備や実際出場してみて考えた事や感じた事をメモしておきたいと思います。

TOTEC

TOTECとは、Top Of The Engineer Competitionの略称で、サイバーエージェントグループ全体のエンジニアが参加し、優秀な技術者の発掘、技術力向上を目的とした社内技術コンペティションです。
「インフラチューニング」「フロントエンドチューニング」「サーバサイドチューニング」の3部門からなり、今回は、厳しい予選を勝ち抜いたエンジニアによる大会当日の模様を動画にてご紹介します。競技中はリアルタイムで順位がスクリーンに映し出されます。正しくスピーディにAPIを実装し、チューニングを行った結果、処理速度が早くなるほどスコアが上がり、最も高いスコアを得たエンジニアが優勝となります。

 フロントのメンバーとして大会に参加して

3人の担当の分け方として、サーバー・インフラが出来るエンジニアが2人とフロント全般を担当する私という構成。HTML/CSS/画像の最適化などフロント面のパフォーマンスに関わる事を全部行なうという形です。

大会のレギュレーションが1週間前にある程度公開されて、そこでサーバー3台をどう配分するのか、WEB⇒API⇒DBというような形で、一般的なアプリケーションをどのようにチューニングしていくのかというのを想定しておりました。その上でフロントエンドとして何を準備したのか。

フロントエンドのメンバーとして準備したこと

基本的にアプリケーションを開発する上で必要な事を全部上げていきました。その上でgulp等のタスクランナーを使って、自分の慣れているCSSプリプロセッサと構成を考えていきました。アプリケーションの開発をする上で必要だろうなと想定される事のその一部を下記に箇条書きにしておきます。

・HTML/CSSの圧縮
・CSSはセレクターはなくしてclassに変更 (CSSのパフォーマンス)
・CSSはPCとスマートフォンどちらも考慮(レギュレーション発表後スマホだけに変更)
・IEなど各ブラウザ考慮
・不要なCSSの判定
・ベンダープリフィックスの有無の想定 (ブラウザがどこまで対応するべきなのか想定)
・画像最適化にimagemin, pngquant (jpg,pngなどの形式毎の画像圧縮想定)
・画像最適化の自動化
・スプライト画像の生成 (画像が複数でてきた場合の想定)
・Base64化 (単一のアイコン等が出て来た場合)
・JavaScriptの圧縮
・JavaScriptの結合
・非同期処理
・ブラウザのライブリロード
・gulpで全部自動化

等を想定しておりました。
基本的なWebアプリケーションの開発を想定して、開発のフローに必要なものをある程度全部用意しておいたつもりですが、全てを使わないだろうな〜と考えていました。

フロントの構成

最初はCSSのプリプロセッサにstylusを使用しようと目論んでいましたが、当日はCSSからstylusに変更するのが無駄&時間が勿体なかったので生のCSSを修正しました。HTML上で、使用されていないCSSのclassを判定するgulpのuncssと、Google chromeのdev toolのAuditsを見ながら一応確認程度に。

サーバーはNode.js、テンプレートにejsを使用

大会まで行なった他の事

・Githubでレポジトリを作成
・デモアプリケーションの作成
・hipchatでコミュニケーションするための部屋作成
・masterへのプッシュ(決まり事)
・masterにpushしたらJenkinsで自動デプロイ
・30分就業時間後にミーティングして、開発進捗を確認
・Nodeを業務で使った事がなかったので、Nodeに慣れる

他サーバーサイドは色々あるかと思いますが、フロントではHTML/CSSがごちゃごちゃになっている、画像が最適化されていないくらいしか用意できないのでサーバーの人の準備をひたすら見守るという事を行ないました()

当日フロントエンドでやった事

・Bootstrap.cssともう一つWebfont用のCSSファイルのconcat,minify
・画像の最適化
・用意されているHTMLの修正
– classの命名変更
・ejsの組み込み
– forEach,ifなどの基本的な分岐。(もっとみるをlistの個数で分ける等)

終ってみて思った事

大事だと思った事
・事前準備
チームワーク(短期勝負だと特に大事)

CSS/HTML/画像が用意されていて、htmlファイルが3つで3画面のアプリケーションをいかに早く、デザインは正確に創るかというものだったので、今回はサーバー構成やフロントや全体の事前準備から決めていた作戦が上手くハマった事が勝てた要因かと思いました。

また、コミュニケーションを取りながら、柔軟に決めて行ったのでチームワークも非常に重要でした。そういう意味で、今一緒に開発しているメンバーと出場したのでそこも大事だなと改めて。

チームワークに関して

特に、チームワークに関してはこんなに重要かと思わなかったというほど重要でした。リアルタイムに変化する得点に対して冷静に得点を重ねる事に重点をおいて、改善すべきところをどこにするか考えながら、話しながら柔軟に対応できたというのは一人だったら難しい所もあったなと。

ハッカソンとはまた違った形での準備をして、約7時間程度開発に集中して取り組んだ訳ですが、非常に勉強になったし、普段仕事で一緒に開発しているエンジニアと違ったプロダクトを開発するのは、色々な技術や考え方に触れられるので沢山勉強に成りました。

違う側面が見られるのと普段以上に他の技術や考え方に触れられる機会だったので、定期的にこういうものに挑戦していきたいですね。

運営の皆さん、有り難うございました。
お疲れ様でした。

TOTECの詳細はこちらから

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'