こんにちは！新入社員のNです。
入社してから約1ヶ月、ついにWEBアプリ開発研修の発表を迎えました。今回は、チームで取り組んだ「SNS風WEBアプリ」の開発を振り返りながら、技術的な挑戦やチームで動く難しさ・楽しさについてお伝えします！

プロジェクト概要

テーマ:

SNS風WEBアプリの開発
期間: 4/20 〜 5/11
チーム: 5人
技術スタック:
• フロントエンド：React + TypeScript
• バックエンド：Kotlin + Spring Boot + Flyway + MyBatis
• DB: PostgreSQL
• インフラ: Docker
最低要件として、ログイン・会員登録画面、ホーム画面、プロフィール画面、検索画面の実装が求められました。

実際に完成した画面の一部がこちらです。

ホーム画面

プロフィール画面

チームの役割分担

まず行ったのが、担当の割り振りです。先輩がタスクを決めてくれていたので、それぞれの得意分野を活かす形で役割を分担しました。私が担当したのはプロフィール画面と投稿機能（フロントエンド）です。プロフィール表示・編集、投稿ボタン・モーダルの実装を中心に進めました。担当が決まったあとは、いよいよ仕様書の作成です。ここで大切にしたのが、ときどき全員で手を止めて話し合うことでした。各自で仕様を書いていると、どうしてもフロントエンドが想定しているデータの形とバックエンドが作ろうとしているデータの形にズレが生じてしまいます。それを防ぐために、「今の部分、認識が合っているか？」と頻繁に確認し合いながら進めました。一見遠回りに思えるこの足並みをそろえる時間があったからこそ、後の実装フェーズで大きな手戻りを防ぐことができたと感じています。

チーム開発で意識したこと

開発を進めるにあたって、チームで決めたルールのひとつが「Backlogの課題ごとにGitのブランチを切る」という運用です。ブランチ名を見るだけで今誰が何に取り組んでいるかが一目でわかるため、チーム内の進捗管理が非常にクリアになりました。また、適切な粒度でコミットを積み、プルリクエストで先輩方にレビューしていただく流れも徹底しました。レビューを通じて、自分では気づかなかったコードの改善点や、より良い書き方を知ることができ、技術的な学びの場にもなりました。こうしたプロの現場を意識した開発フローを研修の中で体感できたことは、非常に貴重な経験だったと感じています。

発表会の様子

迎えた発表会は、先輩方が足を運んでくださっただけでなく、オンライン会議ツールも活用したハイブリッド形式で実施されました。先輩方は私たちのアプリの事前情報を持っていなかったため、いきなり技術の話をするのではなく、まずはどのような課題に着目し、どのようなSNSアプリを作成したのかというコンセプトから丁寧に説明することを心がけました。

他のメンバーの発表も非常に刺激的で、特に以下の2つのエピソードが私の心に強く残っています。

1. ユーザー視点に立った「共有機能」のアイデア

ホーム画面を担当したメンバーは、ポスト詳細画面でのコピー機能と共有機能を実装していました。ただ投稿を表示するだけでなく、ユーザーがこの投稿を誰かに教えたいと思ったときの導線まで深く考えられており、画面設計における想像力の大切さを痛感しました。

2. バックエンドと画面を連動させる「フォロー機能」の苦労

バックエンドに初挑戦したメンバーは、フォロー機能のデータ連携で大きく苦戦していました。ボタンを押した瞬間のデータ保存はできているものの、画面を再読み込みするとボタンが元の状態に戻ってしまい、フォロー解除もできなくなるというバグが発生していました。原因は、画面表示時に「すでにフォローしているかどうか」という状態データを、バックエンド側から正しく返せていなかったことでした。最終的には、データの取得・計算方法を見直すことで無事に解決したそうです。

【私自身の考え】

私が担当していたプロフィール画面でも、検索画面で他のユーザーをフォローしたにもかかわらず、「フォロー中」の一覧に反映されないという問題が発生しており、どのように画面同士を連動させればよいのか頭を悩ませていました。当初は「フロントエンド側のコードがおかしいのではないか」と考えていました。しかし、裏側のデータの流れを泥臭く紐解いていく仲間の姿を見て、問題の根本は画面そのものではなく、見えないデータの流れやバックエンド側の仕組みにある可能性があることに気づきました。今回の経験を通して、単に画面を作るだけではなく、システム全体のデータの流れを俯瞰して考えることの重要性を学ぶことができました。

まとめ

今回の研修と発表会を通して、技術の楽しさだけでなく、チームで1つのプロダクトを完成させる難しさや達成感を実感することができました。次回は「Salesforce設定研修＋Agentforce研修」についてお届けする予定です。ぜひお楽しみに！