【CATechJOB】CyberAgent Advanced Technology Studioで1ヶ月間インターンしてきました。

f:id:wakeupsloth:20191008131118p:plain

9月5日〜30日の1ヶ月間、サイバーエージェントの就業型インターンCA Tech JOBに参加してきました。

CATSという組織で、Webフロントエンジニアとして、WinTicketというサービスの開発に携わりました。

あまり良く知られていないであろうCATSのことや、参加までの経緯から取り組んだタスクなどについて振り返っていきます!

 

サイバーエージェントってどんな会社?

株式会社サイバーエージェントは、「21世紀を代表する会社を創る」というビジョンをもった、インターネット×〇〇の会社です。

事業領域はインターネットに関連していれば何でもOKで、大きく分けると、メディア、広告、ゲーム、その他色々です。100以上の子会社で構成されていています。若手の活躍を喜ぶ社風で、実際中に入って見てもそれが伝わってきました。

参加までの経緯

3月31日に開催されたキャリアセレクトの逆求人イベントで人事のみねさんとお話したのがきっかけでした。その頃は就業型インターンシップにビビっていたのですが、みねさんに「うちの就業型インターンに来て、一回技術でボコボコにされて成長してほしい」と言われたことが心に響いて、「よし、ボコボコにされてこよう」と参加を決意しました。

その後、人事のななさんと面談してどんな部署で働きたいかを相談したあとに、CATSとアメブロのエンジニアの方と1回ずつ面談して、最後にもう一度ななさんと面談して、最終的にCATSへの配属が決まりました。

私の大学はCA内定者の先輩が多いのですが、先輩方に「CATSはOSSの開発もしてるし技術力ゴリゴリでやばい」みたいなことを聞いて、ネットでCATSを調べても情報が少なかったので、ついていけるのかという不安もありながらインターン初日を迎えました。

CATSとは?🐱

CATSはCyberAgent Advanced Technology Studioの略で、「作るたびに新しい挑戦でサービスを成功に導く」というビジョンのもと、従来よりも早く、いいモノを作るために結成されたCAの中でトップクラスの技術集団です。

ビジョンの通り、使っている技術はとてもモダンで常にワクワクしながら開発できる組織だと思います。Web、iOSAndroid、Serverを合わせて40人弱のエンジニアで構成されています。

現在はWinTicketという、AbemaTVの競輪チャンネルと連携してネットで競輪投票ができるサービスを中心に開発しています。先日のCAの総会で、最優秀プロジェクトXを受賞していました!おめでとうございます。👏👏👏

CATSはOSSを積極的に公開していく文化もあります。

CATSの歴史🐈

CATSができる前のCAでは、新規事業を立ち上げるたびに、一からチームビルドと技術選定をしていました。しかし、時価総額1兆円に向けて挑戦的な事業が続く中で、従来よりも早く、品質の高いプロダクトを作る必要がありました。そこで、2018年に開発経験や技術ノウハウを蓄積するための組織として、CATSができました。

CATSはエンジニアの組織ですが、デザイナー版CATSのCAFSという組織もあります。

インターンの内容

目標設定 🎯

Tech JOBでは初日にトレーナーの社員さんと一緒に目標設定をしてからスタートします。

私は「新機能を一つ以上実装しきる」という目標を初日に設定しました。

一機能を丸々実装することで、スタイルの実装からロジックまで幅広い実装力をつけられると考えて、この目標を設定しました。 

取り組んだタスクの概要 👨‍💻

大きく分けると3つのタスクに取り組みました。

  1. SNSアイコンの差し替え
  2. 競輪場詳細ページの歴代優勝者テーブルのリファクタリング
  3. レース情報ページの実装

1,2のタスクは、肩慣らし的なリファクタリングのタスクで、3日目までに修正を終えました。

残りの期間で、レース情報ページの実装に取り組みました。

レース情報ページの実装 🚴‍♂️

レース情報ページは、カップごとに1〜12レースまでの「予想」、「オッズ」、「結果」へのリンクがまとまっていて、日付ごとにページングされているページです。

これはSEO検索エンジン最適化)施策の1つで、日付ごとにページを作成することで検索結果の順位を上げる効果が期待できます。

SketchのデザインとKibelaにまとまっていた要件をもとに、実装しました。

実際のページは下記のリンクです。

f:id:wakeupsloth:20191007222331p:plain

f:id:wakeupsloth:20191007222322p:plain

f:id:wakeupsloth:20191007222327p:plain

 

加えて、これらのページへの導線としてトップページの下部に、レース情報フッターも実装しました。

f:id:wakeupsloth:20191009155734p:plain

実装を通して得た学び

クライアントサイドの複雑なデータ整形

レース情報ページに関連するロジックの内部では、予想・オッズ・結果が存在するレースIDをもとに、カード1枚分の単位で必要な情報を1つのオブジェクトにまとめています。

この処理が結構複雑で、正規化されているカップ・レース・競輪場情報から、なるべく無駄な処理をしないで、必要な情報をオブジェクトにまとめるテクニックがとても学びになりました。

また、このロジックを3つのページでそれぞれ書くのではなく、共通化していく考え方や実装力も身につけることができました。

パフォーマンスやコードの設計を考えた実装

プルリクエストを通してたくさんのレビューを頂いたのですが、

その中でも、パフォーマンスの観点では、

  • 素数の多いオブジェクトに対してnullチェックのためだけにmapを回さない
  • 素数が多い日付タブをSSRすると通信量が大きくなってしまうため、クライアントサイドでレンダリングする

といったことを意識できていなかったため、とても学びになりました。

また、コードの汎用性や拡張性の観点に対するレビューやご意見を、色々な箇所で頂けたことで、動くものを実装できれば良いというわけではないという考え方が身につきました。

CSSの実装力

1つのページをデザインを見ながら丸々実装したことで、CSSの実装力がインターン前と比べて上がったことが実感できました。

CSSは一番苦手意識を持っていた部分で、目標設定時に「苦手意識なくしたいね」と、トレーナーのおおつかさんとテックリードのわだまるさんとお話していたのですが、無事、苦手意識がなくなって良かったです!インターンを通して一番伸び率が高かった部分だと思っています。

自分の考えを伝えることが大事

レース情報ページを実装している最中に、仕様が決まりきっていなかったり、実装が難しい点などをデザイナーやビジネスの方に相談する機会がたくさんありました。

このようなときに、ただ現状を説明するだけではなく、現状を踏まえて「このようにしたい、こうした方が良いと思う」といったように自分の考えも合わせて相談すると、その後のコミュニケーションが円滑に進むと実感しました。

1ヶ月間CATS Webチームで働いた感想

超フレンドリーなチーム

初日までは、しばき倒されないか心配してたのですが、みんなフレンドリーで話しやすい方ばかりだったので、すぐに馴染むことができました。

特にトレーナーのおおつかさんは、年が近いし優しくてとても相談しやすかったです。他の方々も、気になったりわからないことを聞いたら丁寧に答えてくれて、最高のチームでした。

コードレビューがとても丁寧

プルリクエストを出したらチームの複数の方々がすぐにレビューしてくれてとても良い環境だと思いました。細かいところまで見て頂けて、多くのことを学んで吸収することができました。

私も自分のタスクをやりながらPRが出たらパパっとレビューできるくらいの実力を早くつけたいです。

開発環境が超モダンで開発しやすい

私のように経験が浅くても、プロジェクト構成全体をすぐに理解できて、開発できる環境が整っていました。

ディレクトリがわかりやすく分割されていたり、cats-oss/scaffdogを使ってディレクトリのテンプレを作成することができて感動しました。

コンポーネントの実装はStorybookでドキュメント化されていてとてもわかりやすかったです。 

APIの型はgrpcの定義ファイルをprotobuf.jsを使用してTSに変換したファイルを、cats-oss/ts-proto-optimizeを使っていい感じに整形して使っていました。ネストしたEnumなどを取り出してくれるので超オススメです。

コンポーネントのテストは、reg-suitを使ったビジュアルリグレッションテストを採用していて、見た目の差分でテストができてすごく便利でした。(丸の数がえぐかった)

そのほか 

シャッフルランチ

人事の方+学生+エンジニアの方のシャッフルランチも複数回設定して頂けました。

普段食べられないような美味しいごはんを食べながら、他の学生のやっていることや、他のサービスのことを聞くことができて楽しかったです。

最後のシャッフルランチでは、人事の苑子さんがオシャレなイタリアンレストランに連れて行ってくれて、テーブルマナーまで教えてくれました。笑

交通費・報酬・宿泊

交通費は全額支給して頂けたので道民の私にとっては非常に助かりました。

報酬は時給1,500円で、ありがたやという感じです。

宿泊は、アベマタワーから徒歩5分くらいの距離にある会社のシェアハウスを貸して頂いて、地方から来た他のインターン生や社員さんと泊まっていました。一人一部屋あるし、作業部屋やラウンジもあってとても過ごしやすかったです。出勤が徒歩5分なのも最高でした。

残念ながらこのシェアハウスは9月末までの契約だったので、次からはマンスリーマンションになるみたいです。

おわりに

1ヶ月間働いてみて、とても楽しかったです!

WinTicketチームや人事の方々をはじめに、関わっていただいたすべての方々に感謝の気持ちでいっぱいです。 🙏

本当にありがとうございました!