読了: 約 5 分

サイバーエージェントで、チームを創って、フロントエンド、インフラ、サーバーと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を作らない
  • minify, concat

CSS

  • CSSセレクターはなくしてclassに変更 (CSSのパフォーマンス)
  • PCとスマートフォンどちらも考慮(レギュレーション発表後スマホだけに変更)
  • 不要なCSSの判定

IEなど各ブラウザ考慮

  • UIの再現度が得点に含まれるため、表示ブラウザをどこまで考慮するかを検討
  • ベンダープリフィックスの有無の想定 (ブラウザがどこまで対応するべきなのか想定)

画像最適化

  • imagemin, pngquant (jpg,pngなどの形式毎の画像圧縮想定)
  • 画像最適化の自動化
  • スプライト画像の生成 (画像が複数でてきた場合の想定)
  • Base64化 (単一のアイコン等が出て来た場合)

JavaScript

    • 圧縮、結合
    • 非同期処理
    • ブラウザのライブリロード
    • gulpで自動化

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

フロントの構成

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

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

大会まで行なった他の事

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

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

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

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

終ってみて思った事

大事だと思った事

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

課題

  • HTML/CSS/画像が用意されていた
  • htmlファイルが3つで3画面のアプリケーションをいかに早く、デザインは正確に創るかというもの

だったので、今回はサーバー構成やフロントや全体の事前準備から決めていた作戦が上手くハマった事が勝てた要因かと思いました。

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

チームワークに関して

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

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

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

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

TOTECの詳細はこちらから