設計の大事さを3週間で学んだインターン

自己紹介

サマーインターン(フロントエンド)に参加した、ウマ娘ならぬウマ男のチームメンバーを紹介します。

インターンで行った業務

背景

Rettyには、ユーザーから新しくお店を登録できる画面があるのですが、古いページになっており、改善が必要になっていました。私たちのチームでは、この画面のフロントエンドを作り直す業務を行いました。

現状のページ

使用技術

以前の新店登録画面は、PHPを用いて書かれていましたが、今回Nuxt.jsで置き換えるということにしました。

以下が使用した主な技術や開発手法です。

作業の仕方

1日の流れ

10:30 出勤
10:30 ~ 朝会の準備
10:40 ~ 朝会
11:00 ~ 10分間の雑談
11:10 ~ 作業90分+休憩10分のモブワーク (3~4回)
18:30 ~ 1週間の振り返り (金曜日のみ)
19:30 退勤

朝会の準備・朝会

朝会の内容としては、まずタスクの確認、メンバーの予定確認、前日の振り返り・反省を行いました。朝会の準備はPCやマイク、カメラの準備ではなく、各自前日作業の振り返りをする時間にあて、朝会のスムーズな進行に繋がったと感じています。タスクの確認や前日の振り返り・反省は主にmiroを使っていました。

miroのkanbanを使ったタスク管理

反省は皆で一度共有しただけではなく、その反省が活かせているかを確認するために残しました。下記のように日数が経つにつれて、反省点が増えていきました。作業内容の濃さはもちろんですが、加えて皆が考える観点が増えた証拠とも考えています。

miroの付箋を使った反省記録

朝会後の10分間の雑談

これは途中から採用したものです。タスクとは関係ない話をすることによって、お互いのことを知る機会となることはもちろん、一回通話から抜けることはなくスムーズにタスクに臨めるようになりました。

作業約80分+休憩10分のモブワーク (3~4回)

今回はVSCode拡張機能であるLiveShareを使い、モブプログラミングをしながら作業を進めていきました。LiveShareを初めて使用する方も多く、最初は接続までに滞っていましたが、インターンが終わりに近づくとスムーズにLiveShareが行えるようになりました。モブプログラミングにおけるドライバーの変更は10~15分毎で交代しながら作業をしました。この作業周期の中で一番重要だと感じたことは「タイムマネジメント」です。ドライバーの交代や作業90分と決めていても、作業に集中してしまい延長してしまうこともありました。段々とチーム内で時間を意識するようになり、結果的に作業時間が延長することは少なくなりましたが、最初にチーム内でタイムマネージャーをしっかりと決めておくべきだった、という反省点が残っています。

1週間の振り返り (金曜日のみ)

毎週金曜日の最後の1時間を使って、その週の振り返りを行いました。ふりかえりカタログの中から本インターンYWTFun/Done/Learnという二つの手法を行いました。YWTではでやったこと・わかったことをmiroに書き出していくことで、次にやることが決まり、そのためにすべきことを明確化することができました。もう一つのFun/Done/Learnでは、特に楽しいことを共有できたことが重要です。やはり完成に向かって作業をしていくのも重要ですが、その中にある楽しいことを書き出すことによって、そのモチベーションにも繋がりました。またその傾向を見るとLearnが多く、本インターンで学んだことが多いと再実感しました。

成果

完成ページ

完成ページ
デザインやUIなどを改善し、以前よりもイケてる画面にできたと思います!

※完成がインターン完了間際だったため、検証ののち、近日公開予定です。

改善内容

  • 見やすいバリデーションの表示
  • インタラクティブな住所検索と重複店舗検索
  • ジャンルのグループ分け
  • 登録フローの改善

振り返り

3週間のインターンの中で難しくも楽しさを感じたのが「設計」でした。今回作成した新店登録ページではコンポーネント設計やディレクトリ構成、状態管理の方法、フォームの送信というような考えるべき点が多くありました。これら全ての設計を初めから完璧に作ることは難しく、実際に設計を1から考え直すという大きな手戻りが発生しました。 また今回、コンポーネントの共通化やファイル分割などの意義についても深く考える機会となり、意味のあるコーディングが大事だと実感しました。設計がうまく行ってないと、メインの実装にも皺寄せが来るので、軽んじてはいけない行程ですね。

そして、もうひとつ大きな学びを得たのが、「レビュー」に関してです。GitHubのプルリクエスト(PR)は、第三者のエンジニアの方に見てもらう為、分かりやすいPR作りが大切です。何を目的としたがわかりやすいタイトルや説明文は勿論、意味を持ったひとつのPRの区切り方や適切なコード量が大事であることを学びました。また、文章やコードだけでは伝わりにくい部分もあるため、レビュワーに対してのコミュニケーションを取ることでスムーズにレビューを行えました。

今回のインターンを通して学んだ事は、今後の開発にも活かしていきたいです。また、今回のインターンに参加することで、Rettyの魅力や、開発体制、環境を知ることができて最高の体験をさせていただきました!メンターを担当してくださった木村さん、様々な相談に乗ってくださったRetty社員の皆さん、ありがとうございました!