サイバーエージェントのインターンに参加した備忘録
はじまして！sotaです！
2021年8月20〜23日の3日間、サイバーエージェントさんの3days 次世代トップエンジニア創出インターンシップ ONLINE ACEというインターンシップに参加してきました。３日間という短い間でしたが、学びが多くかなり充実した内容だったので備忘録として記事を残そうと思います。
インターン概要
以下公式HPからの引用です↓
「ACE」はサーバーサイドとクライアントサイドの合同開発インターンシップです。
志望する職種でご参加いただき、チームで3日間アプリケーション開発に取り組んでいただきます。本インターンシップでは、事前に与えられるテーマに基づいてサーバーサイド×クライアントサイドでチーム開発を実施しながら、サイバーエージェントで一線級で活躍しているエンジニア社員からのコードレビューや本気のフィードバックを受けることで、実際の現場で用いられるコーディング手法など実務レベルの開発に挑戦できるインターンです。また、インターン優秀者には以下特典が付与されます。
（1） サイバーエージェントのエンジニア採用選考の1次面接と2次面接をスキップ
└ 「なるべく早く就職活動を終わらせたい」という方にもおすすめです
（2） インターンシップ終了後に1か月のAWS使用権限（権限指定あり）＋現場エンジニアからの技術的な支援
またインターンシップ中には社員によるLTや懇親会も開催され、サイバーエージェンさんの技術・人・カルチャーについて幅広く知れるインターンシップとなっていました。(自分が感じだ社員さんの雰囲気や文化については後半で記載します)
選考について
選考フローは以下のようになっていました
1・ 書類選考
2・ エンジニア面接
3・ 人事面接
エンジニア面接ではエンジニアリング関連、人事面接ではESで記載した内容について話しました。人事の方もエンジニアの方も物腰柔らかで楽しい面接だったのを覚えています。
エンジニア面接後、1時間くらいして合否の連絡が来たのは驚きました、。
課題内容
ABEMAの番組表を以下の仕様で実装するという内容でした
- 番組を過去・現在・未来の放送がわかるように表示させる
- 見たいと思った番組を予約できるようにする
- 予約した番組の一覧を確認できるようにする
- 番組表を並び替え/フィルターができるようにする
評価ポイント
評価ポイントは以下のようになっていました。
- 技術選定
-非推奨なことをやっていないか
-要件に対して妥当か/チャレンジングか
-チャレンジングな場合も正当性があれば評価
- 非機能要件
-パフォーマンス
-対障害性
-運用のしやすさ
- コードの可読性
- コードの保守性
- チームビルディング
-情報の共有
-コミュニケーション
UIやアニメーション、他機能追加は評価対象外となっていてアウトプット重視のハッカソンというよりも、今後の運用を考えた技術選定や設計を考える能力が要求されるものでした。
当日までにしたこと
選考の際に、当日までに各チームで事前開発・チームビルディングを行ってくださいというアナウンスがありました。
個人的にチーム間のアイスブレイクは早めにしておきたいというのがあったので、Slackのワークスペースに参加後すぐに初回アイスブレイクの日程調整を行いました。(ここに関しては他チームより早く動くことができていたみたい)
そして具体的にインターン当日までにしたことは以下になります。
- アイスブレイク(雑談や自己紹介)
- MTGのスケジュール決め
- タスクの洗い出し・見積もり
- タスク優先度決め
- タスクのチケット化
- 技術選定
- 設計
- 機能実装
クライアントとバックエンドで依存関係のあるAPI周り(API スキーマやモデリング周り)などは早めに議論し、そこからはクライアントとバックエンドで各々タスクを進めていく方針で進めました。(週一で進捗共有などの全体MTGは行った)
ここでの反省点としては、APIスキーマの変更・修正・要望などの通知をSlack上でアナログで行っていたことです。
スキーマファイルの変更をCIで検知してクライアントのレポジトリとPRに投げるなどしてスキーマ共有を自動化しておけばよかったなと。。
技術的な話
ベースの技術スタック
1・React
- 対応ライブラリが多く、リッチなUIを実装できる
- DOM操作のパフォーマンスチューニングを自動でしてくれる
- コンポーネント指向であり、再利用性と拡張性が高い
- TypeScriptとの相性がvue.jsより良い
- チームメンバーのスキルセットのマッチしていた
2・TypeScript
- 型宣言をすることで、開発効率、コードの安全性と可読性を高める
- ビルドエラーを事前に解決することで修正コストを下げる
3・Next.js
- ssgにする(動的コンテンツ以外)ことで、初回レンダリングの読み込みを早くする
- ランタイムで画像の最適化を行ってくれる(番組表のサムネイルで使用)
4・Tailwind CSS
- 長期運用を見越した時に、他のCSSライブラリよりも仕様変更にも対応しやすい
- CSSのクラス命名をスキップすることで、スピディーに開発を行える
- クラス名を考える必要がない
- コンパイルが早く開発体験が良い
- 若干捨てにくいフレームワークなので少し反省している。。
5・Styled Component
- Tailwindでは ::before や ::after といった疑似要素が使えなかったり、 background-image の画像パスを指定したりはできないので、CSS Module(Sass)、CSS in JS(styled-component)どちらかを併用しようという結論に至り一部使用
7・husky + lint-staged
- コードの品質担保のためpush・commit前にlintとtype-checkを走らせる
CI/CDにgithubActionを乗せてテスト等のコマンドを走らせる方法も考えたが
- CI・CDの構築に工数がかかる
- push前にこけてる箇所を割り出せた方が開発体験も良いし人為的なミスを減らせる
といった観点から husky + lint-staged を採用
8・Jest
- テストを行うことで、プログラムの品質を保証するため
- 仕様変更時のエラーをなくすため
9・Vercel
- ホスティングに使用
- まず設定いらずにCI/CDが行えるVercelとNetlifyに絞った。そして今回、今後キャッシュ系のフェッチライブラリやレンダリング手法を採用することを考慮し、キャッシュサーバーが日本にないNetlify(有料にすると使える)は除外し、Vercelを採用
アーキテクチャ
├── __test__ ## UseCase & Domaiロジックのテスト
├── components. ## UIコンポーネントを定義(AtomicDesign)
├── domain ## ドメインモデルとドメインロジック
├── hooks ## 汎用的なhooksとuseCase周りのhooks
├── lib ## 例外クラスとAPIクライアントクラス
├── mocks ## ドメインモデルに紐づくmockObject
├── repository ## API呼び出し & ApplicationModelの変換を行う
├── useCase ## repositoryの実体を定義
└── pages ## Next.jsにおける自動ルーティングファイル定義
- ドメイン知識がそこまで複雑ではない
- 開発工数の削減
- 責務の切り分けを行いたい
- 変更に強い設計にしたい
- UIとロジックをできるだけ疎結合にしたい
という観点からこのような設計にしました。結果的にフロントのタスクをUIとロジックで分割し、円滑に開発を進めることができました。lintの設定や細かい技術選定の話は、全て話すと長くなりそうなため別記事にして残そうと思います。
社員さんやインターン全体感の雰囲気
結論、皆さんめちゃくちゃいい人で、インターンの内容も最高だった
学生という立場の自分達にも、積極的に技術的アドバイスや業務での雰囲気を教えてくださったり、1on1でのエンジニア面談を複数回行ってくれたりと最高でした。みなさん物腰柔らかな人で、本当に接しやすかったです。またコードレビューひとつとってもCAの社員さんは、ユーモアがありおもしろいなあと思いました笑
これとか笑
また批判ベースでコードレビューをするのではなく、議論に必ず持ち込んでくれたりするところも流石だなあという感じでした。
まとめ
長くなりましたが、それくらい濃く成長できた3日でした。
参加学生もメンターさんも人事さんもみなさん優秀でいい人が多く最高のインターンでした！チームメンバー, メンターさん, 人事の皆様、本当にありがとうございました！
サイバーエージェントさんでは、その他様々なインターンやイベントをやっていて、どのインターンでも最高だと思うので興味があれば参加してみてください！
この記事が気に入ったらサポートをしてみませんか？