Supership のアドテクチームのインターンに参加した（in 2022夏）

# はじめに
9/2(金)〜9/15(木) の 2 週間、Supership 株式会社のテックインターンに参加してきました。  
このインターンでしか得られないような貴重な経験や、楽しい思い出ができたので、備忘録として記事に残します。


# Supership / アドテクについて
Supership はインターネット広告事業や検索事業、データコンサル事業などを手がけている企業です。

インターネット広告に関する技術はよく「アドテクノロジー」や「アドテク」と呼ばれます。Supership でインターネット広告事業をやっている部署は「アドテクノロジーセンター」と呼ばれるようですが、本記事のタイトルでは分かり易さのため「アドテクチーム」と表記しました。

インターネット広告の仕組みや面白さについては、以下の記事が参考になります。

https://recruit-newgrad.supership.jp/contents/technology-ad.html


# Supership のテックインターンについて
今回のテックインターンでは以下の 2 つのコースが設けられていました。
私が参加したのはテクノロジストコースです。

|   | テクノロジストコース（私が参加した方） | プロダクトコース |
|:-:|:-:|:-:|
| 領域 | 広告 | 検索 |
| 概要 | 既存の大規模な広告管理サーバに対して、<wbr/>修正・機能追加・パフォーマンス改善をする。  | 大量の検索ログデータを用いて、検索のサジェスト機能をメインに新規開発する。 |
| 形態 | インターン生と一緒に取り組む。就業型。 | インターン生でチームを組んで開発する。<br>ハッカソン型に近い。  |
| 言語等 | Ruby on Rails, jQuery | Elasticsearch; 開発言語も自由だった模様 |

ちなみに私は広告技術も知らなかったし、Ruby on Rails も書いたことがない状態でインターンに応募しました。
インターンの前日に Rails のチュートリアルをひととおりやっておきました。


# やったこと

## インターン内容全般

- インターンは全日程オンライン
- GitHub Issue に初級タスク・中級タスク・上級タスクが定義されており、2 週間でそれらを消化していった
  - 10 年以上前から動いている、大規模な DSP プロダクト「ScaleOut」を扱った
  - 初級タスクは一人で消化
  - 中級・上級タスクはテクノロジストコースのインターン生全員（私含めて 3 人）で協力して着手
- 現場のエンジニアから徹底コードレビュー
  - 1 つのプルリクエストに対して 10 人以上がレビューをすることもあった
- 2 週間の間ずっと開発をしていたわけではなく、Supership 等に関して知るコーナーが何回か設けられた
  - 広告技術・検索技術の講義
  - さまざまな部署の紹介
  - テスト駆動開発のお話
  - 新卒社員の方のお話
- 9/12(月) の午前は休みで、Happy Monday を体験した
  - Supership では、毎週月曜の午前は休みという福利厚生「Happy Monday」がある

## サポート体制 / コミュニケーション

- インターン生 1 人にメンターとして若手エンジニア社員 1 人がついてくれた
  - 定期的な 1 on 1 面談をしたり、日報に毎日コメントしたりしてくれた
- 朝会と夕会で、インターン生とメンターが集まって、分からないことや進捗確認をする機会が設けられた
  - 日中は、Slack で質問を飛ばせばすぐに助けてくれた
- VPoE やその他社員の方と「リコリス・リコイル」（この時期流行っていたアニメ）について雑談した
- 私の方からボードゲームサークルの活動に参加したい！と言ったら快く受け入れてくれた


## 9/2(金) アドテクに関する講義・環境構築
インターンの初日は 9/2(金) でした。
午前は開会式が行われた後、メンターの社員やインターン生と顔合わせをして、チーム名を決めました。テクノロジストコースのインターン生は私含めて 3 人でした。3 人とも名前が「か行」で始まるという共通点があったので、チーム名は「**Ke-Super**」に決まりました。

お昼ご飯は Google Meet に繋いだ状態でメンターの方やインターン生と一緒に食べて楽しかったです。午後は広告事業や広告技術の仕組みについて、休憩をはさみつつ 2 時間ほどの丁寧な講義を受けました。広告表示の裏側がどうなっているのか学べて良かったです。

ちなみに、インターン初日が金曜日だったのが個人的に嬉しかったです。MacBook Pro が支給されたのですが、私は MacBook で作業するのが初めてでした。土日があったおかげで MacBook に慣れたりカスタマイズしたりする時間ができて助かりました。


## 9/5(月)：初級タスクの消化
検索事業や検索技術の講義を聴いた後、テクノロジストコース側は初級タスクに取り掛かりました。初級タスクの内容はタイポの修正やバリデーションの追加といったものでした。複数の Issue が用意されており、1 人あたり 1〜2 個の Issue に対応しました。

ちなみにこの日は自分の開発環境を壊してしまうというやらかしをしました。
このときはメンターの方々が丁寧にヘルプしてくれて助かりましたし、「壊した数だけ強くなる」というような励ましをしてくださいました。このやらかしをとおして、基本的なことですが、「まだいろいろ分からない状態ではエラーを自己解決しようせずにすぐに報告すること」・「事実は省略せずに説明すること」が大事だと学びました。


## 9/6(火)〜9/9(金)：3 人で中級タスクに挑む
中級タスクでは新機能の開発をチーム Ke-Super の 3 人でしました。
作ったものを一言で説明すると、「広告リクエストの構築・送信・表示システム」です。この機能が必要な背景としては、エンジニアが DSP サーバのバグ調査等をする際に、複雑怪奇な広告リクエストを手動で構築しなければならず大変という課題があったようです。

具体的には、以下のシーケンス図で表されるようなシステムを実装し、追加しました。

```mermaid
sequenceDiagram

actor U as Webブラウザ
participant R as 管理画面用サーバ
participant S as SupershipのDSPサーバ
U->>R: Bid Request のパラメータ<br/>・広告の種類<br>・広告枠の縦横幅<br>・UserAgent<br>・IPアドレス<br>・SSPの種類<br>・など
Note right of R: Bid Request の<br> JSON を構築する
R->>S: Bid Request
S->>R: Bid Response
R->>U: Bid Request と Bid Response
Note right of U: ブラウザで<br>整形して表示
```
英語で書かれた OpenRTB の仕様書 ↓ を読みながら実装を進めていきました。意外となんとかなりました。

https://www.iab.com/wp-content/uploads/2016/03/OpenRTB-API-Specification-Version-2-5-FINAL.pdf

中級タスクの着手に先立って、メンターの方から広告の仕組みについての詳しい説明がありました。また、Bid Request をコマンドラインから送信して、Bid Response をもとにブラウザ上へ広告を表示させるというハンズオンもやりました。広告技術についての理解が深まったし、今までブラックボックスだったものが分かってきて面白かったです！

開発では、暗黙のうちに私がリーダーのような役割を担いました。以下のようなことをして開発を進めました。

- チームメンバー全員が Google Meet に繋ぎっぱなしにすることで、すぐに相談できる状態にした
- VSCode の Live Share を使い、モブプロしたり役割分担したりした
- チームメンバー間で質問しやすい雰囲気作りをした
  - 「いいね」などの肯定的なリアクションを積極的にとる
  - 「やっほー」「ただいまー」「おかえりー」などのやわらかい言葉を使う
  - 自分も積極的に質問する
- 議事録をとった  
  中級タスクの初日は議事録をとっていなかったのですが、以下のような課題を感じたので、議事録を導入しました。
  - 決定事項や、やったこと・やっていることを言語化することでチーム内での共通認識をとりたい
  - 夕会での進捗報告をスムーズに行いたい
  - 夕会でのメンターからのフィードバックを記録したい
  - 夕会で質問したいことを前もって準備したい

その他、夕会での進捗報告や議事録執り、中間報告会での発表も担当しました。
また、コードレビューの際は、率先してクラス図を書くことでレビュアーの理解を助けました。GitHub でも Mermaid.js が使えるのは便利ですね。


## 9/12(月)〜9/15(木)：3 人で上級タスクに挑む
上級タスクの内容は、広告主向けのとあるページの表示速度の高速化でした。遅い原因の調査から行いました。メンターの方々曰く、上級タスクは期間内に終わるか分からないくらい難しいとのことでした。

まず最初は，Rails のログ出力を見てボトルネックになっている箇所を探しました。
怪しい箇所について、コードを読んだり、DB のインデックスを確認したり、HTML のレンダリングで遅い部分を調べたりしました。チームメンバーが `EXPLAIN ANALYZE` を使って SQL の実行計画を調査していて参考になりました。

遅くしている原因は大きく分けて 2 つ見つかったのですが、そのうち 1 つには対応できました。
結果として、もともと 15 秒以上かかっていたのを 3 秒へ短縮できました🎉
ただ、どちらかというと 2 つ目のボトルネック対処の方が本質的な改善だったので、そこを期間内に改善できなかったのは悔しいです。

パフォーマンス改善の一環で、私はフロントエンド側の修正も担当しました。
このとき、修正案が 2 つ考えられたので、それぞれブランチを切って修正案を実装し、プルリクを作ってチームメンバーと一緒にどちらが良いか吟味しました。

2 つ実装してプルリクにするのは少し工数がかかりましたが、コードの差分を把握しやすかったり、コード中にコメントを記入できたりするメリットがありました。画面共有しながら口頭で説明するよりもスムーズに議論できたと思います。最終的には、変更の影響範囲が小さい方の修正案を採用しました。

# 学び
インターンをとおして、以下のことを学びました。

- 広告の仕組み
- エラー報告などでは事実を省略せずに伝えること
- （慣れないうちは特に）独力で解決せずに周りに助けを求めること
- 命名や責務の分離
  - 例えばフロント側での整形表示に関する処理を Controller に書かないなど
- コードレビューでの IMO, MUST, NITS, ASK といった略語の使用による、明確な意図の伝達
- テスト駆動開発
- ユーザやニーズ、利用場面を考慮して機能を検討・実装すること

学びも多かったですが、英語で書かれた仕様書を読み解く経験のほか、
リーダーとして頑張ったり、率先してクラス図を書いたり、2 つの修正案をプルリクにして比較検討したり、社員の方と積極的に交流したりと、主体的に動く経験ができました！

# 感想
アドテクの仕組みを知れたり、貴重な経験ができたりしたインターンでした。
チームメンバーがいてくれて心強かったし、楽しかったです。

Supership のエンジニアは落ち着いていて穏やかな方が多い印象でした。あと Vimmer の方が多かったです。私も Neovim を愛用しているので嬉しかったです。メンターは、出社している方もいれば、首都圏外からリモートで勤務している方もいらっしゃいました。

Happy Monday も体験しました。月曜の午前が休みなのは強かったです。ちなみに Happy Friday という制度もあり、祝日が土日と被った場合は金曜日が休みになるようです。

ボードゲームサークルの活動に参加したい、と言ったら快く受け入れて嬉しかったし、楽しい思い出ができました。
2 週間ありがとうございました！！