インターンシップ ホスティング ロリポップ! for Gamers

GMOペパボ サマーインターン 2024 参加記(はく)

インターンシップ ホスティング ロリポップ! for Gamers

はじめに

こんにちは!2024 年の GMOペパボのサマーインターンシップに参加しましたインターン生のはくです。インターンではホスティング事業部の LOLIPOP! for Gamers チームに配属され、10 日間という期間で多くの知識を学び、たくさんの素晴らしい思い出を作ることができました。この記事では、私の感想や学びについてまとめていきます。

  1. はじめに
    1. この記事を読んでほしい人
  2. このインターンシップに応募した理由と選考過程
    1. インターンシップの概要
    2. 応募した理由
    3. 選考
    4. インターンシップで期待していたこと
  3. インターンシップのタスクについて
    1. インターンシップのタスク紹介
    2. 実際の実装
  4. 日常について
    1. 1 日目
    2. 5 日目
    3. 2~9 日目の他のイベント
    4. 10 日目
  5. 感想
  6. おわりに

この記事を読んでほしい人

  • GMOペパボや LOLIPOP! for Gamers に興味がある方
  • アウトプットをしたい方
  • 夏のインターンで成長したい方
  • 自分の制作物をリリースしたい方
  • 楽しくチーム開発を体験したい方
  • スキルに自信がなく不安な方

このインターンシップに応募した理由と選考過程

今回参加したインターンシップの概要と、私の参加に対するモチベーションについて紹介します。

インターンシップの概要

  • 業務概要:ペパボのエンジニアと学生チームを組み、以下の 3 サービスへの機能開発を体験する
  • 期間: 10 日間(07/29 - 08/09 の平日)
  • 勤務形態:オフィス出社

参考 ・GMOペパボ サマーインターン 2024

私は LOLIPOP! for Gamers に配属され、インターン生 4 人で認証関連のタスクを担当しました。以下にその詳細を示します。

応募した理由

このインターンシップを知ったきっかけは魔法のスプレッドシートでした。

魔法のスプレッドシート

そこから以下の理由で応募しました:

  • 10 日間のインターンシップであること(5日間だと雰囲気を感じ取るには短すぎ、3 週間以上だと他の予定に影響するため、10 日間が理想と考えました。)
  • コーディングにしっかり取り組める環境で成長できそうだったこと
  • 会社のミッションが自分の考え方に合っていたこと(アウトプットの重要性など)
  • 他のインターン期間と重ならないこと
  • 時給が発生すること
  • BtoC のサービスであること(今まで BtoB のサービスしか経験したことがなかったため)

特に大きな理由としては、昨年の参加者であるりゅうせいさんのインターン体験談を見て、大変魅力を感じたことです。 体験談を読むと、非常に楽しそうな雰囲気と成長できる環境が伝わってきて、ぜひ参加したいと思いました。そして、実際に参加してみると、その雰囲気はりゅうせいさんが書いたものとそっくりでした。今年はバトンを引き継ぎ、私も体験談をアウトプットして、もし来年この記事を見て参加したいと思う人がいたら嬉しいです。

選考

選考フローは、エントリーシートと面接のみでした。10 日間のインターンシップとしては選考フローが非常に短く感じましたが、倍率は高いため、しっかりと対策する必要があります。

私はエントリーシートに、これまでの経験やアピールポイントをスライド形式でまとめて提出しました。面接の対策では、自分の経験を整理し、企業理念に照らして自分の過去の経験を振り返ることを意識しました。特に意識したのは、ペパボが最も大切にしている 「みんなと仲良くすること」、「ファンを増やすこと」、「アウトプットすること」 の 3 点です。

参考 ・GMOペパボ わたしたちが大切にしている3つのこと

面接本番では、2 人のエンジニアの方が対応してくれました。最初は緊張しましたが、エンジニアの方々が優しく対応してくれたおかげで、次第に緊張が解け、自分の考えていることを楽しく話すことができました。雰囲気がとても良く、まるで友人に趣味を話しているような感覚でした。

インターンシップで期待していたこと

インターンシップで期待していたことは主に 2 点ありました。 1 点目は、GMOペパボを内部からもっと知ることです。昨年のりゅうせいさんの体験談を読み、実際に会社の雰囲気を感じてみたいと思いました。また、これまで自分は BtoB の会社でしかインターンに参加したことがなかったため、BtoC のサービスに触れてみて、その違いを知りたかったのです。次に 2 点目は、他のインターン生から刺激を受けながら、自分の力を試し、成長することです。今回のインターンシップは倍率が高いため、参加するメンバーは技術力が高く、志の高い人ばかりだと思い、彼らから様々な分野の知識を学びたいと考えていました。また、自分の力を試し、チームで楽しく成果を残したいという期待もありました。

結果的に、期待していたことは 120%達成されました。

インターンシップのタスクについて

インターンシップでの具体的なタスク内容と、それに対する実際の取り組み方を紹介します。

インターンシップのタスク紹介

背景

LOLIPOP! for Gamersでは現在マジックリンク方式を採用しています。この方式では、ユーザーがサインアップ時にメールアドレスを入力します。その後、ユーザーがそのメールアドレスを実際に所有していることを確認するために、入力されたアドレス宛にメールを送信し、メール内のリンクをクリックしてもらうことで所有確認を行います。ただし、メールアドレスの入力に使用したデバイスと、リンクをクリックするデバイスが異なる場合、所有確認が失敗することがあります。

方針

この問題を解決するために、マジックリンク方式から認証コード方式への変更を検討しました。今回採用した認証コード方式では、メールアドレスを入力したのちに認証コード入力画面に遷移します。メールアドレスの入力をトリガーとしてメールで共有される認証コードを入力することで、メールアドレスの所有を検証します。

認証コードへ変更するに当たって考慮しなければならないこと

LOLIPOP! for Gamersのサインアップでは、ユーザが入力したメールアドレスに「マジックリンク」を送信し、そのリンクを踏むことでメールアドレスの所有確認を行います。このプロセスでは、ユーザがメールアドレスを入力した段階でサーバー側で「セッションID」が生成され、リンクを踏んだ際にこのセッションIDが認証エンドポイントで参照されます。認証エンドポイントは、リンク上のIDとセッションIDの関連性を確認し、ユーザがリンクを踏んだことを認証してサインアップを完了させます。

この仕組みを「認証コード方式」に変更する場合、セッションIDとリンク上のIDの関連性を確認する代わりに、認証コードとセッションIDの関連性を確認する必要があります。しかし、認証コードはリンク上のIDよりも桁数が少ないため、悪意のあるユーザが適当なセッションIDを使って認証コードを無制限に試行することが可能であり、ブルートフォース攻撃のリスクが高まります。特に、セッションIDが何らかの方法で漏洩した場合、攻撃者が特定のユーザアカウントに対して連続的な試行を行う危険性があります。

タスク

以上を踏まえて、私たちのタスクは以下のようになりました。

  1. 基本タスク:ブルートフォース攻撃を防ぐための実装
  2. 応用タスク:認証方式をマジックリンクから認証コード方式へ変更

10 日間という限られた期間のため、まずは基本タスクを優先し、応用タスクは時間に余裕があれば取り組むことにしました。

タスクの実施で用いた技術は以下の通りです。

  • Go
  • Next.js
  • Connect
  • Protocol Buffers
  • sqlc
  • runn

実際の実装

1 日目

初日の午前は貸与 PC のセットアップ、環境構築を行いました。 それらを私たちのチームは速やかに終えることができたため、午後には基本タスクの要件定義に入ることができました。要件定義の際は、セキュリティに詳しい同じチームのインターン生に多くの質問をし、非常に勉強になりました。翌日から実装に入れる見込みで、インターンシップへの期待が最高潮に達しました。

2~5 日目

基本タスク(ブルートフォース攻撃を防ぐための実装)は、2〜5 日目で終わらせることを目標に、チーム全員で時間を意識しながら協力して要件定義と実装に取り組みました。要件定義では、実装の容易さとセキュリティ対策の有効性を考慮し、セッションに回数制限および時間制限を設け、これらの制限に関するログを記録することにしました。Protocol Buffers、sqlc、runn など、初めて触れる技術ばかりで、学びながらにぎやかに進めた一週間でした。Go の知識が浅かったため、同じチームのインターン生に多く質問し、その結果、Go の理解が一気に深まりました。また、git についても曖昧だった部分を同じインターン生の助けを借りて、rebase などに対する理解が向上しました。自分が期待していたチームメイトからの刺激を受けながら成長する経験ができ、自分もチームのために頑張ろうとモチベーションが上がりました 🔥

実装で最も苦労したのは、動作確認の部分でした。実装の初期段階では、とにかく速く実装することを優先し、定期的な確認を行っていませんでした。その結果、実装が一通り完了した段階で正しく動作しない箇所が見つかった際に、問題の特定に時間がかかってしまいました。この経験から、定期的に動作を確認し、テストコードをしっかりと書くことを意識するようになりました。具体的には、下記のような取り組みを行いました。

  • fmt.Println() をコードの適切な箇所に挿入し、現在のセッションの失敗回数を出力して、正しい動作をしているかを確認する
  • APIシナリオテストツールの runn を使用し様々なケースのテストを実装する runnはエンジニアのk1LoWさんが開発したAPIシナリオテストツールです。runnのloop機能とsteps機能は非常に便利であると感じました。loop機能は特定のテストを繰り返し実行する機能です。これを使うことで、テストを繰り返し実行でき、異なるリクエストとレスポンスの組み合わせを簡単にテストできます。例えば、リクエストとレスポンスの配列を用意するだけで、さまざまなテストパターンをシンプルに記述することができました。また、steps機能は複数のテストケースを一連のステップとしてまとめて記述できる機能です。これを使うことで、複数のテストケースをまとめて記述でき、一つのテストケースのレスポンスを次のテストケースで参照することも容易にできました。これらの機能のおかげで、効率的かつ効果的にテストを実施することができました。

チームでの協力のおかげで、5 日目に基本タスクの実装が無事に完了しました。

6~9 日目

2 週目は応用タスク(認証方式をマジックリンクから認証コード方式へ変更)に取り組みました。システム設計の際、すべての関数を変更すると、移行時にユーザーがすでに発行されたマジックリンクを使って認証できなくなることにチームで気づきました。そのため、システムの後方互換性を考慮して、既存のコードを変更せずに新しく関数を実装しました。また、既知の問題として「認証コードの検証回数を制限することでアカウント登録に対するブルートフォース攻撃は防げるが、メールの送信そのものは防げず、コストの増加につながる」という課題がありました。このため、追加の対策として Cloudflare Turnstile の導入を行いました。

取り込み中に工夫した点は主に以下の通りです:

  • コンフリクト解決の苦労と反省: 実装の中で最も苦労したのはコンフリクトの解決でした。チーム全員が頑張ってコードを書いて実装を進める一方で、コンフリクトの発生も止まりませんでした。ここで反省したのは、タスクやプルリクエストをもう少し分割するべきだったという点です。

  • 命名規則に関する課題と改善策: 初期の開発段階では、チームで変数名や関数名、コンポーネント名の命名規則を決めていませんでした。そのため、各メンバーが独自に命名を行い、途中で命名に関する混乱が発生し、作業に支障をきたすことがありました。この問題を解決するために、チーム全員で命名規則を策定し、そのルールに従って実装を進めるようにしました。その結果、後半の開発では命名に関する混乱がなくなり、スムーズに進めることができました。

  • フロントエンド開発での課題と対応: Next.jsを使用した認証コード入力画面の作成も課題の一つでした。私は普段バックエンド開発をメインに勉強していたため、ReactやNext.jsに関する知識が十分でなく、特に親コンポーネントと子コンポーネント間での属性(props)の受け渡しに苦労しました。この問題を解決するために、チームメイトと一緒に、子コンポーネント固有の属性と親コンポーネントから渡される属性を明確に決めてから実装を始める方針をとりました。また、まず動作するプロトタイプを作成し、その後必要に応じて修正を行うことで、システム全体への影響を把握しやすくし、理解を深めるようにしました。

  • ユーザー体験の向上を目指した工夫: 認証コードを毎回手動で入力するのは煩わしいことに気づき、チームで認証コードのペースト機能を実装することにしました。具体的には、ユーザーがコピーした認証コードを簡単に貼り付けられるよう、入力フィールドにonPasteイベントを設定し、コピーしたコードを自動的に検出して入力欄に反映させる仕組みを作りました。この工夫により、ユーザーは手間をかけずに認証を完了できるようになり、より快適な体験を提供することで、ユーザーの登録率向上につながることを期待しました。

この一週間を通じて、Next.js、Go、Protocol Buffers を用いた Connect による通信、OTP による認証フローなどの理解がかなり深まりました。

また、フロントエンドのデザインについては、デザイナーさんとコミュニケーションを取りながら実装するのが新鮮で、貴重な経験となりました。パートナーさんの chun さんには本当に大変お世話になりました。

タスクやコンフリクトが増える中で、結局予定されていた 9 日目までに実装を終えることができませんでした。そこで、10 日目が勝負となりました。

10日目

開発パート

最終日はコンフリクトを解決するために多くの時間を費やしました。最終的に発表の 10 分前になってようやく動作するものの動画を撮ることができました。時間が足りなかったため、最終的にバックエンドとフロントエンドのつなぎや Cloudflare Turnstile のフロント側の調整が完了せず、パートナーさんの nacal さんに引き継ぎをお願いすることになりました。悔しい気持ちもありましたが、チーム全員が全力で取り組み、たくさんのプルリクエストと Issue を残し、やり切った感がありました。

発表パート

成果発表会で、午前中に作成した資料を発表しました。発表では以下の内容を説明しました。

  • 自己紹介およびインターンシップに期待していたこと
  • インターンシップでやったこと
  • インターンシップで学んだこと・成長したこと

発表会

作成したフロントエンド側の画面は以下の通りです。

メールの入力画面 認証コードの入力画面

発表会は和やかな雰囲気で進行され、オフラインで集まったパートナーさんは 30 人以上いました。インターン生の皆さんの発表はどれも素晴らしく、非常に楽しい時間でした。中でも、オリンピックを題材にした発表がとても面白かったです。

日常について

インターンシップ中のタスク以外での日常生活についても紹介します。

1 日目

初日はオリエンテーションを行いました。オリエンテーションでは人事の marin さんにオフィスを一周案内していただきました。まず感動したのは、無料でソフトドリンクが飲めることです。しかもソフトドリンクの種類が豊富で、カプチーノ、抹茶ラテ、牛乳など様々なものがありました。これでインターンシップへの期待が高まり、たくさん利用しようと決めました。実際、初日から最終日までチームの 4 人で 1 日に 4 回くらい一緒にソフトドリンクを取りに行き、飲みながら雑談をすることで、チームの仲が深まりました。

初日は都合がつかない人が 2 人いたので、インターン生 9 人で集合写真を撮りました。

1日目のインターン生集合写真

お昼はチームのパートナー1さんと一緒に会社の近くの中華料理店に行きました。とても美味しく、ここでもインターンシップへの期待がさらに高まりました。

1日目のランチ

5 日目

5 日目の夜はオフィスでパートナーさんたちと一緒に一週間の終わりを祝う打ち上げをし、Switch でみんなで協力するゲームを楽しみました。協力しながら遊ぶゲームのおかげで、さらに絆が深まった気がしました。

みんなでゲーム

2~9 日目の他のイベント

インターンシップ期間中、ありがたいことに毎日さまざまなイベントが用意されていました。おかげで、実際にペパボで働いた時の雰囲気を感じることができました。

  • 人事面談
  • 配属サービスや今年入社したパートナーさんたちとのランチ会
  • CTO とのトークセッション
  • 配属サービスでパートナーさんたちの進捗報告会に参加し、リアルな業務の流れを体験
  • 毎日の困ってること相談
  • お茶会
  • etc…

お茶会は、インターン生同士や先輩パートナーの皆さんとお菓子を食べながら気軽に雑談を楽しむ場です。この場を通じて、他のチームのインターン生とも交流することができ、皆さんの素晴らしい経歴やスキルセットに大いに刺激を受けました。また、異なる価値観に触れることで視野が広がったと感じました。さらに新卒1〜2年目の先輩パートナーの皆さんには、ペパボでの実際の仕事やキャリアについて相談する機会をいただき、大変参考になりました。

毎日夕方に行われる「お困りごと相談」では、サポーターのdonokun さんに大変お世話になりました。要件定義から実装に至るまで様々なアドバイスをいただいたおかげで、開発をスムーズに進めることができました。

10 日目

発表が終わった後はピザパーティを行いました!今後のキャリアの話やペパボについてなど、多くの有意義な話ができました。また、チーム同士で振り返りを行い、本当に良いチームで楽しかったと感じました。ピザパーティが終わった後、二次会として近くのバーに行きました。

最高なチーム

感想

今回のインターンシップに大変満足しています。ここでの経験を通じて感じたことをまとめてお伝えします。

まず、ペパボのパートナーの皆様はどなたも技術力が高く、温かい方ばかりで、ペパボという職場が楽しく成長できる場所であると強く感じました。特に、社員の皆様がお互いを尊重し合い、協力し合っている姿勢には感銘を受けました。

また、インターンシップを通じて、技術力とチーム開発力を大いに向上させることができました。具体的には、Docker、Go、Next.js、Protocol Buffers など、バックエンドからフロントエンドまで幅広い技術に触れ、学ぶ機会を得られました。これらの経験は、今後のキャリアにも大いに役立つと思います。

さらに、大きなやりがいを感じることもできました。作業を引き継いでくださったnacalさんのおかげで、私たちが取り組んだ認証画面が本番環境にリリースされ、ユーザーの登録率が大幅に改善されたという報告を受けました。多くのユーザーがこの新しい画面を通じてアカウントを作成し、サーバーを立ち上げる姿を想像すると、とても感慨深い気持ちになります。nacalさん、本当にありがとうございました。

また、同じ業界を志す優秀なインターン生たちと楽しく交流し、新たな友人を作ることができたのも大きな収穫です。

そして、「アウトプット」の重要性を改めて認識することができました。毎日日報を書くことで、自分の学んだ知識の理解を深めることができましたし、他の人の日報を読むことで、自分が気づいていなかったことを学ぶこともできました。やはり「アウトプット」は常に意識していかなければならないと再認識しました。

おわりに

最後に、今回サポーターとして支えてくださった donokun さん、yukyan さん、そしてペパボのパートナーの皆様、一緒に過ごしたインターン生の皆さんに、たくさんの刺激と学びをいただき、非常に充実した 2 週間を過ごせたことを心から感謝いたします。本当にありがとうございました!

集合写真

  1. ペパボでは、いっしょに働いている仲間のことを「パートナー」と呼んでいます(参考: わたしたちが大切にしている3つのこと)。