こんにちは、2023年の8月に「CA Tech JOB」生としてインターンシップに参加しました、土佐凜斗です。約1ヶ月の間、AmebaLIFE事業本部 開発局にて、Webフロントエンジニアとして業務に携わらせていただきました。
本インターンシップでは主に「Amebaブログ」の新機能開発を行いました。この体験記では、私が「Ameba」のWebフロントチームでの開発を通して学んだことや感じたことを紹介します。
目標
私が「CA Tech JOB」に応募した理由は、大規模なサービス開発の経験をしてみたかったからです。規模が大きく歴史も長い自社サービスを持つサイバーエージェントでは、これまで自分が体験してきた開発とは異なる視点や目標を軸にチーム開発が行われているに違いないと思い、そのエッセンスを吸収するためインターンシップに応募しました。
やったこと、学んだこと
文頭でも紹介したように、このインターンシップでは「Amebaブログ」の新機能開発に携わりました。来年で20周年を迎える「Ameba」は非常に歴史のあるWebサービスで、その機能開発の現場を体験できたことは自分にとっては願ったり叶ったりでした。
実際の業務ではフロントエンドでとある機能を実装するフローに設計から実装まで一通り携わりました。システムはNext.jsで動いており、基本的にReactベースでTypeScriptを書いて実装しました。実装の流れとしては、UIコンポーネントで使用するデータを取得するためのBFF（Backend For Frontend）を設計、実装し、そのBFFを用いてUIの実装を行いました。またAsanaというタスク管理ツールを用いて、タスクをチケット化して期日を見積もりながら作業を進めました。
Design Docs
「Ameba」の開発局ではDesign Docsを取り入れており、コードを実際に書く前に機能実装の前提についての整理や、開発の目指すことや目指さないこと、実装方針などについてさまざまなレビューを受けました。結果として、実装段階ではほとんどDesign Docsの設計をコードに書き落とすだけで、手戻りの少ない開発ができました。
またDesign Docsを書くなかで、デザインやバックエンドAPIの仕様がまだ固まっていない部分も見つかり、各担当のデザイナーさんやエンジニアさんとコミュニケーションをとりながら仕様を詰めていくというリアルな開発体験ができました。仕様詰めに関するコミュニケーションはサービスについての深い知識が必要で難しいところもあったのですが、多方面から詳しい方々が議論に参加してくださって進めることができ、サービスを作っている実感が湧いて楽しかったです。
レビューはかなりオープンに行われ、多くの方がコメントをしてくださり、抜けのない設計書に仕上げることができました。またこのような議論が文章として残るので、機能開発ごとにコードを見るだけではわからないコンテキストが蓄積されていくのをみて、Design Docsをしっかり書くことの大切さを実感しました。
他にもDesign Docsを書くことで、デザインや決まった仕様をソースコードに落とし込むにあたっての想像力が養われました。社員の方がどのような点を意識してコードを書いているのか、システムを設計しているのかなどの言語化し難い能力を間近に見て吸収できた気がしました。
BFFの実装
私が担当した部分ではバックエンドAPIを呼び出す際、BFFを採用していました。
BFFとは、フロントエンドとバックエンドの中間に配置されるもので、双方の複雑な処理を緩和させる目的を持ちます。フロント側のさまざまな要求に対して似たようなAPIをバックエンドでたくさん用意したり、逆にフロントで何種類ものバックエンドAPIを叩いたりすることを防いで、フロントエンドからの要求に対しシンプルに応えるAPIを実現します。
初期の開発コストはかかりますがフロントエンドとバックエンドがより疎結合化されるのでメンテナンス性が向上し、またフロントはUI/UX等、バックエンドはDB操作等により注力できるようになるというメリットがあります。他にもBFFサーバーでのキャッシュ管理やフロントに必要なデータだけを返すことができるので、通信パフォーマンスの面でも大きなメリットがあります。
デザインシステムSpindleに準拠した実装
私がこのインターンシップで1番感銘を受けたのは「Ameba」のデザインシステムであるSpindleでした。
開発ではこのSpindleに準拠するために、GitHubで公開されているopenameba/spindleのコンポーネントを使用したり、同様に定義されたカラーのトークンやアイコンを使用しました。またレビューではSpindleで定められているアクセシビリティやパフォーマンスの観点から議論されることが多く、Spindleに準拠した品質を意識する機会が多くありました。
テストの実装
サイバーエージェントでインターンシップを始める前までテストを書く経験値がほとんどなかったのですが、このインターンシップでは自分が追加した機能のテストをレビューを受けながら実装する経験ができました。
具体的にはBFFのユニットテストと、CIとStorybookを用いたUIコンポーネントのビジュアルリグレッションテストです。
ユニットテストはJestに変わる最新のテスティングライブラリであるVitestで実装されており、高速な自動テストを体験できました。またnockを用いてバックエンドAPIへのリクエストをモック化し、あらかじめ用意したレスポンスを受け取ることで、バックエンドAPIから切り離してBFFの振る舞いをテストするというフローも学びました。
ビジュアルリグレッションテストはアプリケーションのUIが予期せぬ形で変更されていないことを確認するテスト手法で、UIの見た目（スナップショット）をコードの変更前後で比較してビジュアルの変更を検知します。本プロジェクトではStorybookで生成されたコンポーネントのスナップショットがCIプロセスで比較され、ビジュアルリグレッションテストを行う仕組みになっていました。
テストを書くにあたって、「Ameba」のフロントエンドチームはドキュメントなど参考にできる資料が多く、テスト入門者の私とって非常に学びやすい環境でした。またテストを書くことによって、BFFの振る舞いやコンポーネントごとの表示パターン、ユースケースなどを詳細に想定することになり、開発している機能についてより理解が深まっていき、テストを書くことの大切さを実感しました。
おまけ
インターンシップ2日目にして、ビッグイベントがありました。複数部署に横断して交流する懇親会で、その規模の大きさにサイバーエージェントのイベント力を見せつけられました笑。
他にも、出社した日には色々な社員の方とランチをご一緒させていただきました。サイバーエージェントでは社員同士の交流を盛り上げるための様々な福利厚生があるらしく、連日豪華なランチをご馳走になり、舌が肥えてしまいました。もちろんご飯だけでなく、社員さんとしっかりお話ができる貴重な時間でもあり、仕事の話、技術の話、福利厚生の話、前職のお話、お子さんの話、、、会社の内側のお話や社会人生活のお話をたくさん聞けて楽しかったです！
さらに、「CA Tech JOB」のインターンシップでは週に一度人事の方とも面談させていただくことができ、私自身の就活アシストをしていただきました。人事の方直々に自分の仕事先に求めるもの、環境、仕事を通して自分が将来どのような人間になりたいか、そのためにはどのような就活の軸を立てれば良いのか、などの手厚いサポートをしていただき、就活の右も左も分からない私にとっては大変ありがたい時間でした！
感想
最後になりますが、私が「CA Tech JOB」で出会った方々はみなさん暖かく、学生である私にも対等に向き合ってくださりました。そんなチームの雰囲気を一緒に仕事をしながら肌で体感できたことは、外側からの就活イベントだけでは知る由もない、非常に貴重な体験でした。
サポートしてくださったメンター、トレーナー、人事の方、そして迎え入れてくださったフロントエンドチームの方々、「Ameba」の方々、未熟な私でしたが皆様のおかげで、たくさんのことを学び、吸収できたと思います。ここで学んだことを持ち帰って、身につけられるよう頑張ります。本当にありがとうございました！