Retty Tech Blog

実名口コミグルメサービスRettyのエンジニアによるTech Blogです。プロダクト開発にまつわるナレッジをアウトプットして、世の中がHappyになっていくようなコンテンツを発信します。

インターン参加したら学びしかなかった件について

自己紹介

Webチームのサマーインターンに参加しましたいぬさんチームです. 以下インターン生がいぬさんチーム配属となりました.

インターンでやったこと・成果物

現状のRettyではSNSにシェアをした際に適切なOG画像が設定されていないため,魅力が伝わりづらいという問題があります. そこで、私たちいぬさんチームはユーザ情報を合成してOG画像として生成するマイクロサービスを開発しました. このOG画像を生成するマイクロサービスはGo言語で実装し,クリーンアーキテクチャに沿って実装を進めました.

開発の過程ではデザイナーやプランナーも含めて仕様のディスカッションも行い,「どんなOG画像だと魅力的なのか」について議論したり,本番環境で必要になる複数ケースを考慮したOG画像のデザインもいただきました.

OG画像を生成する処理の流れは以下のようになります.

  1. HTTPでリクエストを受け取る
  2. ユーザの情報をgRPCサーバから取得する
  3. ヘッドレスブラウザにHTMLを出力し,スクリーンショットを撮影

マイクロサービスからの応答は以下のようなOG画像となります.

f:id:rettydev:20210910173724p:plain
生成したOG画像

Rettyインターンの流れ

一日の流れ

10:30にDiscordに集まり,前日設定したKPTの内のTryを見直して今日意識すること・気をつけることを全員で共有しました.それから既に話し合って決めていたタスクの中から,どれから着手するかを話し合って決め,開発に取り組み,19:30に業務を終了という流れで3週間開発を行いました.

開発はインターン生4人・メンター1人の5人で,Visual Studio CodeのLive Share拡張機能を用いたリモートモブプログラミングの形式で行いました.勤務時間中はDiscordに常時接続し,コミュニケーションをとりながら開発を進めました.

f:id:rettydev:20210910153903p:plaindiscordで集まっている図

KPTについて

大体19:15に開発を終え,1日の振り返りを行いました.それぞれKeep(続けたいこと), Problem(問題点), Try(次回意識すること)を書いていき,翌日に何を改善するかを設定しました.

1日の振り返りを行い,翌日にTryを見返すことで何を意識づけて開発を行うかの意識づけができたと思います.

モブプロとは

モブプログラミングとは,複数人で1つのプログラムを書き進めていくコーディングスタイルです.1人がドライバ(コードを書く人),他の人がナビゲータ(アドバイスや指摘をする人)として,協力しあってコードを書いていきます. 今回のインターンでは,ドライバは定期的に交代しながら行いました. 実はこのブログもモブプロと同じ要領(モブワーク)で作りました.

実際の学び

どんなことを工夫したのか・苦労したのか

モブプロを行ううえで苦戦したこととしては,意思疎通があります.オンラインでのコミュニケーションのため,相手の声が聞こえづらい,相手が今何をしているのか把握しきれない,などの特有の問題が生じました.これらはオンラインである以上,ある程度は避けられない問題であると感じています.

逆に,工夫次第で改善できたこともありました.日々の振り返りの時間でどうすれば解消できるのかを考え,下記のことに気を配ることで効果をあげられたと感じました.

ナビゲータの人は気になったところやリアクションを口に出していく

モブプロを初めて間もない頃は,ドライバとメンターだけが発言していて,ナビゲータの人はほとんど発言しないという場面が多く見られました.そこで,ナビゲータの人はコードを見ながら気になった点を積極的に発言する,ドライバの発言に対してリアクションをとる,といったことを意識するようにしました.これにより,議論が活発になり開発やデバッグが効率的に進むようになりました.

ドライバの切り替えるタイミングを意識する

ドライバの担当する部分によっては,なかなか実装がキリのいいところまでいかずに長時間同じ人がドライバを続けてしまうことがありました.そこで,ドライバの切り替えタイミングを意識し,キリが悪かったとしても交代するようにしたことで,ドライバの回転率を上げることができました.

困ったらどんどん聞いていく

主にナビゲータをしている際,開発で分からないことがあっても質問することを尻ごんでしまう場合がありました.分からないことをそのままにしておくことは理解度の差を生んでしまうため,ナビゲータのときであっても分からないことや気になったことはどんどんメンターに聞いていくように意識づけを行いました.

わからなかったことを解決する時間を作った

困ったことをどんどん聞いていこうといっても,自分だけ理解が遅れていそうな場合などは全体の開発を止めてまで質問することが申し訳ない,という場合もありました.そこで,休憩時間直前の15分に質問タイムを設けることで,開発中には聞きづらかった疑問も解消することができました.

クリーンアーキテクチャってなにがいいの

今回のインターンでは社内でも浸透しているクリーンアーキテクチャを用いてアプリケーションの開発を行いました. クリーンアーキテクチャは下図の通りExternal Interface・Interface Adapter・Usecase・Entityの4層になっており,依存の流れを外から中だけ一方向にし,抽象に依存することで役割を分離することを目的としたアーキテクチャです.

f:id:rettydev:20210910173858j:plain
Clean Architecture

クリーンアーキテクチャを採用するメリットとして以下のようなことが挙げられます.

  • 依存が一方向かつ抽象に依存しているので仕様や使用する外部ツールが変更してもコードは最小限の変更で済む.
  • 振る舞いが決まっているならば外部に依存しないアプリケーションロジックの実装がほとんど可能
  • チーム内でどこに何を書くのかがほとんど決まっている

クリーンアーキテクチャで実際に開発してみて

今回のインターンでクリーンアーキテクチャを本格的に触ったのは初めてというインターン生も多く,普段と異なる複雑な構成に戸惑い,それぞれの層を分離する理由や何をどの層に置くべきなのかを理解するまでに多くの時間を要しました.しかし,一度わかると後からソースコードを読み返す際や,ほかの人が書いたソースコードを読む際に,読みたい処理の場所がなんとなくわかり,目的の関数などを探す手間が省けます. また,後から関数を追加する際なども,それぞれの層が分離されているため,影響を最小限に抑えることができることを実感することができました.

今回は下図のようにデータの流れを整理することでみんなで確認をしました.

f:id:rettydev:20210910174422p:plain
データフローをまとめた図

今まで僕が書いてきたプログラムは動くことだけを目的としていて,ほかの人の読みやすさや,機能の拡張のしやすさ,保守性などのことについてはあまり考えることができていませんでした.今後チーム開発をする機会も増えてくると思うので,今回のインターンで感じたクリーンアーキテクチャのメリットに気を付けてプログラムを書いていきたいです.

感想

今回,3週間のインターンシップを通して0からのアプリケーション開発を実務に近い形で体験することができました. メンターの丁寧な指導もあり,今までの夏とは比べ物にならないほどの成長を実感することができ,メンターやアドバイスをくださったデザイナー,プランナーの方には感謝してもしきれません.

また,開発をする中で,

  • デザイナーやプランナーと交流できた
  • 技術選定をする際に保守性の担保などの点を考えることができた
  • 意見を出すとき以外もユーザの目線からなにがいいのかを前提に話し合うことができた

などの普段の個人開発やサークルでの開発ではあまり体験することができない貴重な経験することができ,有意義な日々を送ることができました. 今後アプリケーション開発をする際は,今回のインターンシップで学んだことを存分に使い,さらに磨きをかけていきたいと思います.

Rettyインターンしたい人へ

Rettyでインターンをしたい人がいたら是非エントリーしてみてください! 今回でいうクリーンアーキテクチャや初対面の人間でモブプロをしよう,といったようなかなり難しいことを求められる反面,わからなかったことの質問などにちゃんとレスポンスをもらえるような環境があるので大変だとは思いますが楽しいインターンになると思います.