本記事は、22卒1年目の成長シリーズ 7日目の記事です。

はじめに

こんにちは、2022年度にWeb フロントエンドエンジニアとして新卒入社した 藤嶋 稜 (@Co9xsR) です。

現在は株式会社AbemaTV で ABEMA 内の回遊体験を向上させるための機能開発などを行うサービスグロースチームに所属しています。

本記事では、新卒1年目のエンジニアがどんな課題に直面し、どうやって解決していったかについて紹介します。

これからサイバーエージェントで働いてみたいと考えている方や、新卒1年目の働き方について興味がある方の参考になれば幸いです。

 

1年でどんなことをしたか

サイバーエージェントに入社してから大まかな1年の流れは以下のような感じです。

2022/04 ~ 2022/05 全社研修・エンジニア研修・メディア事業部研修

2022/05 ~ 2022/07 ジョブローテーション制度で Ameba・ABEMA を1ヶ月間ずつ経験

2022/07 ~ 現在 ABEMAに本配属され、サービスグロースチームで開発に従事

入社してからの 1ヶ月半は様々な研修に参加し、会社への理解を深めていきました。

特に別職種のエンジニアとチームを組んで要件に沿ったサービスを仕様作成から設計、実装までを行うエンジニア研修はかなり楽しかった思い出があります。

研修終了後はメディア事業部への配属となり、ジョブローテーションという制度でメディア事業部内の Ameba と ABEMA でそれぞれ 1ヶ月間ずつ開発に参加しました。

サービスごとに異なる技術スタックでの開発を経験したり、それぞれのチームの雰囲気を感じたりすることができました。

7月からは ABEMA に本配属され「FIFA ワールドカップ カタール 2022」に向けた機能開発や、サービス内回遊体験を向上させる機能をチーム内で提案・開発・検証するなど様々な経験をしました。

ここからは具体的にどんなことに取り組んで、どんな課題があったかを簡単に紹介します。

 

直面した課題とその解決

ドメイン知識や既存コードベースへのキャッチアップ

配属当初は ABEMA 固有のドメイン知識や既存のコードベースへのキャッチアップが最初の課題になりました。

ABEMA はサービスの規模が大きいため様々な機能が存在し、その分キャッチアップすべき知識も多くありました。

ドメイン知識に関してはユーザーとしてサービスを触る機会を意識的に増やす、分からない用語はすぐに質問するなど基本的なことを続けることで段々と理解できる用語を増やしていきました。

しかし、既存のコードベースに関しては、ABEMA がリリースされてから時間が経っているサービスということもあり、全体像を理解するのにさらに苦労した記憶があります。

そこで、日々の 1on1 で ABEMA 固有の知識や技術的な学びを言語化し、トレーナーと共有する時間を設けるようにしました。

毎日の 1on1 で学びの言語化が習慣になったことで、普段の業務の中で意識的に学びを見つけ、自分の理解が正しいかをトレーナーと確認するというサイクルを回すことができるようになっていきました。

そのおかげもあり、技術的な部分に関しても自分一人で悩む時間が少なくなり、スムーズに開発を進められるようになりました。

 

技術的な知識の幅

入社時のスキルセットとしては React や TypeScript を使った基本的な UI やロジックの実装はできるものの、SSR 時に利用している Node.js サーバーに関する深い知識や、 一般的な Web 開発で使われる CI/CD 周りの知見はほぼない状態でした。

そこで1年目は知識の幅を広げることを目的に、ABEMA Web Browser 版のアーキテクチャの中で様々な領域にチャレンジすることを意識しました。その中で行なったいくつかの取り組みを紹介します。

1つ目は GitHub Actions を用いたワークフローの構築です。

ABEMA Web Browser 版ではマイクロサービスと Node.js サーバー間で Protocol Buffers と gRPC を使った通信を行なっている部分があります。

その際に利用する proto ファイルから TypeScript の型定義を生成する仕組み自体は整備されていましたが、サーバーチームの proto 更新に合わせて Web エンジニアが手動で型定義を生成し直す必要がある点が課題になっていました。

そこで GitHub Actions で毎日定時に TypeScript の型定義を生成し GitHub Packages で社内パッケージとしてリリースするところまでを自動化するワークフローを整備しました。

個人的には GitHub Actions によるワークフロー構築の知見が得られただけでなく、結果として ts-proto を用いた型定義の生成周りや TypeScript として配布したパッケージを利用する側のビルドシステムなどに深く触る機会を得られたのがよかったです。

またこの仕組みを整備したことによって、今まで Web エンジニアが手動で行なっていたフローを効率化できたり、proto に合わせた最新の型定義を異なるレポジトリから参照することができたりとチームとしても様々なメリットがありました。

2つ目は Critical CSS の仕組みに関してのドキュメント整備です。

ABEMA Web Browser 版ではパフォーマンス向上の観点から Critical CSS を活用しています。

しかし普段の開発で頻繁に更新される領域ではないこともあり、詳細なデバッグ方法などについてチームで明確にドキュメント化されていないという問題がありました。

そこで自分が実際にデバッグ時にはまったことなどをベースにドキュメントにまとめ、勉強会で知見をチームに還元しました。

ドキュメントを整備していくにあたって既存の Critical CSS 抽出の仕組みを深く理解できただけでなく、既存の仕組みに存在する課題も多く見つかったのでさらに改善を続けていきたいです。

より技術的な詳細について興味がある方は外部向けの勉強会でも発表しておりますので Muddy Web #5 をぜひご覧下さい。

まとめ

ここまで読んでいただきありがとうございます。

技術的な面でも、仕事の進め方などを含めたソフトスキルの面でも1年前と比べるとかなり成長を実感できました。

ただ、1年目は既存の課題を解決するような動きはできた反面、チーム全体の課題を発見し解決方法を提案したり、全体としての方針を決定する動きに関しては課題を感じました。

2年目はチャレンジする技術領域をさらに広げると共に、サービスの課題や性質を理解した上でそれを技術で解決できるエンジニアを目指していきたいと思います。

 

 

一緒に働くエンジニアを募集しています

25卒以降の学生を対象としたプレエントリー受付中。

選考情報などをいち早く受け取れます。

24卒も一部職種は現在も受け付けておりますので、こちらよりご確認ください。

また、社会人向け新卒採用制度「Re:Career」や、キャリア採用の求人一覧、カジュアル面談もございます。

インターンシップも！

サイバーエージェントでは、現在インターンシップの募集をしております。

どのインターンシップも共通している特徴は4つ！

• 社員が全力
• 社員との接点が多い
• 視座の高い仲間に出会える
• 交通費支給・宿泊場所手配

内容も数日で終わるものから2週間のもの、職種や難易度もさまざまなので、
自分に合うものを見つけてぜひエントリーをお待ちしております。