Wantedly Engineer Blog

こんにちは、Wantedly のエンジニアの南直 @south37 です！

先日、Wantedly では湯河原での開発合宿を行いました！その際、「目標をあらかじめ決める」、「1日目はお酒を飲まずに開発に集中する」という2つの約束事を実践したところ、想像以上に開発に集中でき、きちんと成果も出す事ができました！

自分たちにとっても想像以上に良い結果となったので、その経緯をまとめたいと思います！！

開発合宿の経緯

今回の開発合宿は、「きちんと時間を取らないと取り組めない事」をやりたいというモチベーションから始まりました。取り組む候補としてはマイクロサービス化を進める事や Rails のバージョンを上げる事、RabbitMQ の様な新しいミドルウェアを試してみる事など色々ありましたが、最終的には全てひっくるめて「Wantedly のサイトを 20%スピードアップする」という大きな目標を立てました。

成果を出せば第二回開発合宿にも繋がるんじゃないかという期待から、僕らのモチベーションも上がりました。

合宿の様子

それでは、実際に合宿の様子について書きたいと思います。今回お邪魔したのは 「おんやど恵」という湯河原の温泉旅館で、12/21~12/23 までの2泊3日の合宿でした。「おんやど恵」は開発合宿用の設備を整えていて、 増井さんが行っていたり、ハウテレビジョンさんが行っていたりして、開発合宿先として人気の旅館の様です。評判と設備を見て、僕らもここに決めました。

オフィスからの出発

12/21(月) の 14:00 から始まるエンジニア全体ミーティングを終えた後、合宿組はおもむろに出発しました。

合宿に向けて、心なしか浮き足立つ面々。思わず笑みがこぼれています。

湯河原までは、電車で向かいます。

湯河原到着！！さらに、巡回バスで一本で「おんやど恵」に到着！！バスですぐにこれるのは便利ですね！！

1日目の開発開始 (17:30)

着いたのは 17:30 頃、夕食は 18:30 からと聞いて、この1時間を無駄にしない為に早速開発を始めました。

「おんやど恵」さんは開発合宿に力を入れているだけあって、開発環境がかなり充実していました。48時間いつでも好きに使って良い会議室が一部屋（10人が余裕を持って座れる広さ）いただけて、大量の電源タップとホワイトボードが設置されていました。更に、無線LAN は高速かつかなり安定していて、ネットワーク関係でトラブルになる事は全くありませんでした。実測値で常時下り 30MBps 出ていたので、開発するには充分だと思います。

最初の1時間は、手を動かすというよりは方針決めの時間にしました。「Wantedly を 20%高速化する」為に何ができるか、そもそも何の値を使って「20%」を出すのかというとこから話して、以下の方針を決めました。

• 最終ゴールは、NewRelic の BROWSER タブで確認出来る「Brower page load time」の平均を 20% 早くする事
• その他、個別のページや RDB のレスポンスタイムなど、より細かい単位での改善&ベンチマークも行う（最終ゴールが達成できなかった時の保険の意味もありましたw）
• 1チーム1~3人くらいで幾つかにチーム（タスク）を分けて、それぞれで個別の最適化を行う。大きく分けて以下のチームが存在した
  • リクエストが集中しているページの高速化（Wantedly はサイトの特性上「募集ページ」や「募集 Widget」へ極端にアクセスが集中していた。個々の resopnse はそこそこ早いもの Brower page load time で見ると全体の 58% を占めていたので、ここの最適化が必須と感じた。）
  • RDB のチューニング（Wantedly は RDS で PostgreSQL を使っていて、これまでチューニングに力を入れてきていなかった。その為、最適化の余地はかなりあると思っていた。これについては @awakia が Qiita にもまとめている）
  • JavaScript ファイルのロードタイミングの最適化（HTML のパース中に script タグが現れると、スクリプト実行によってページのレンダリングはブロックされる。その為 script タグはページ末尾に集める事がベストプラクティスとなっているが、そのベストプラクティスが守られていないページが幾つか存在した）
  • リソースの非同期読み込みの徹底（scroll でしか現れない画像など、first view では現れない要素を非同期に）
  • 社内用管理画面の高速化（ユーザーは目にしないが、その為に雑な実装になっている部分が多くあったので、最適化を行った）
• 出来れば1日目で目標を達成して、2日目はゆったり湯河原を楽しむ！！！

方針を決めたところで良い感じに夕ご飯の時間になりました。

1日目の夕食 (18:30)

さて、待ちに待った夕食です。おんやどの夕食は「ザ・旅館のご飯」という感じで、様々な美味しいご飯が次々に運ばれてきました。

最初に頂いたのは数の子や昆布などの珍味。

次に頂いたのはお刺身。美味しかったです。

お蕎麦。これも美味しかったです。

煮物。僕は大根が大好きです。

天ぷら。

そしてお鍋に入れて頂くお肉！！たまりませんね！！！

次々運ばれてくる美味しい食事に、思わず笑みがこぼれます。

こうして美味しく夕食をいただいた後は、温泉へ向かいました。（尚、僕らは1日目で何とか高速化を達成しようと意気込んでいた為、お酒は飲みませんでしたw これも2日目に楽しむ為の投資です）

温泉

温泉は、室内の温泉に加えて、露天風呂も付いていました。 露天風呂に浸かって、英気を養う面々。とても気持ちが良かったです。

足湯&喫煙コーナーも、癒しの場になりました。

開発再開 (20:30)

温泉を堪能した後は、いよいよ開発再開です。浴衣に着替えてはいますが、完全にガチモードです。各自、自分のタスクに没頭しました。

開発は次の日の朝 6:00 ごろまで夜通し行われました。

2日目

前日の作業が明け方まで続いた事から、次の日はなかなか起きれない。。。と思ったのですが、旅館のとてもパワフルな仲居さんに起こされて、ちゃんと朝食を食べる事が出来ました。

朝食の後は、引き続き開発を行います。作業は進んでいたもののまだ 20% の高速化は達成できていなかった為、皆少し焦りながら開発をします。

集中して作業していると、気がつけば 14:30 に。さすがにお腹が空いてきたので、お昼ご飯に向かう事にしました。近辺のお店を検索してみて、ワンタンが美味しいと噂の「王ちゃん」というお店に向かうことにしました。

外を歩くと自然が広がっていて、良い気分転換になります。

お店は老夫婦でやってらしていて、人数が多かったのでカウンターと座敷に分かれてご飯をいただきました。

料理の写真は取り忘れてしまいましたが、食べログのページにたくさん写真があったので興味が湧いた方は見て見てください！ 王ちゃん - 熱海/ラーメン [食べログ]

昼食の後は近くにあった公園でちょっと遊んでから、旅館に戻ってきました。

旅館に戻るとすぐさま開発に移ります。結果を出す事を求められている為、どこまでもストイックです。

気がつけば 2日目の夕食の時間が迫ります。ここで成果を確認したところ、 Brower page load time が 28% 改善出来ている事が分かりました。目標達成です！！！

2日目夕食 (19:00)

目標が達成できた為、最高に良い気分で夕食を楽しむ事が出来ました。 お酒も解禁です。みんなで、「20%高速化」達成を祝って乾杯をしました。

2日目の夕食もとても豪華でした。

夕食後は温泉に浸かり、さらに近くのセブンイレブンで宴会用のお酒やおつまみを買ってから、会議室へ向かいます。会議室なら広くてみんなで集まって話しやすいので、宴会にぴったりだろうという判断でした。

開発再開

目標は達成したとはいえやりかけの作業や PR も残っていたので、会議室に着くと自然と開発が再開しました。適当な時間になったら自然と飲み会が始まるだろうと誰もが思っていました。

ところが、これが最大の誤算でした。エンジニアの性なのか、やりかけのタスクとPCを目の前にするとどうしてもコードを書き続けてしまい、気がつけばほとんどお酒を飲まないまま 2:00 に。

流石に眠くなってきたので、部屋に戻ってゆっくりと眠りに着きました。

3日目

3日目の朝も、美味しい朝食を頂きました。

もう目標は達成できているので、朝食後は部屋でゆっくりします。幸せな時間です。

10時がチェックアウト、11時に会議室を出なければならないとの事だったので、荷物をまとめて部屋を後にします。3日間のほとんどを過ごした会議室を離れるのは、なんだか感慨深いものでした。

宿からはバスで駅へ向かうので、バスの時間までは思い思いの過ごし方をします。エントランスでゆっくりしたり、足湯に浸かって癒されたり。足湯はとても気持ち良くて、コーディングにもぴったりです。

存分に満喫してから、3日間お世話になって旅館に別れを告げて、帰ってきました。「おんやど恵」さん、ありがとうございました。

開発合宿を振り返って

まずは成果についてですが、目標であった「Brower page load time の 20% 高速化」を達成する事が出来ました！

Before(3.81 s)

After(3.02 s)

Dom Processing

また、 DOM processing に限定すると、 1.85s => 1.1s で 41% の高速化が出来ました！

PostgreSQL

PostgreSQL のパラメータチューニングの結果も、 31ms -> 23ms で 25％ の高速化が出来ました！

その他細かい部分での改善も出来て、総じて良い結果となったと思います。

良かった点について

事前に目標を明確にしていた事と、開発の初期段階で目標達成の為の作業の方向性を（現状の数字を見ながら）決めれた事が良かったんじゃないかと思っています。また、遊ぶのは目標を達成してからにしよう、と心を鬼にして決断できたのも大きかったと思います。

反省点について

2日目の夜は目標を達成できていたので大いにはしゃぐ予定だったのですが、エンジニアの性なのかPCを前にすると気がつけばコードを書いていました。ここは反省点だと思っていて、無理矢理にでもイベントを用意すべきだったと思っています。次に開発合宿をする際は、目標を達成するだけでなくレクリエーションにも力を入れたいと思っています。

最後に

今回、Wantedly で開発合宿をやってみるのは初めての挑戦でした。本当にちゃんと集中して開発ができるのか、パフォーマンスが出せるのかなど不安も大きかったのですが、蓋を開けてみれば大成功とも言える結果でした。 今後も定期的に開発合宿を実施していく予定です！Wantedly の開発合宿に興味が湧いた方は、ぜひ気軽に話を聞きに来てください！！