24年新人研修グループ演習「メルカリ風フリマアプリ」
株式会社アクティブ・ワーク（以下、当社）では、例年4～6月末までの約3ヶ月の間、新人研修を行っております。新人研修では様々なカリキュラムがあり、研修の締めとして世の中にある著名なWebサービスを例題に、そのWebサービスを自分たちで1からプログラミングするグループ演習を行っております。
今回は、グループ演習の1つ「メルカリ風フリマアプリ」についてご紹介します。
開発背景
私たちは、新人研修の最終課題として、フリマアプリの代表である「メルカリ」の模倣アプリの「テンカリ」を作成しました。
開発未経験のメンバー6人でどのようにWebアプリを開発していったのか、記載していきたいと思います。
アプリ概要
テンカリはユーザーが商品の売買を行うことができるフリマアプリです。
主な特徴
・ユーザーが商品の出品や購入、取引をすることが可能
・商品に対してコメントをつけることやマイリスト、ユーザーのフォローなど、SNSのような機能を持つ
・カテゴリー検索や除外キーワード検索、色検索など多数の検索方法がある
・本家のブロックや通報、問い合わせなどの機能に加えて、オリジナル機能であるブロック共有機能(シャドウバン機能)を持つ
アプリの機能
アプリの機能一覧
トップ
・ヘッダー
・お知らせ/やることリスト通知機能
・ユーザー情報表示機能
・やることリスト一覧表示機能
・商品検索機能
・カテゴリー一覧表示機能
・トップ画面
・人気のブランド/カテゴリー表示機能
・キャンペーン表示機能
・最近閲覧した商品を表示
・閲覧履歴からのおすすめ商品の表示
・おすすめ商品表示機能
・いいねした商品表示機能
・マイリスト
・保存した検索条件表示機能
・興味のある商品表示機能
・フォロー中のユーザー表示機能
・フッター
・テンカリ関連のリンク機能
お知らせ機能
・お知らせ一覧表示機能
・ニュース一覧表示機能
出品機能
・下書き一覧表示機能
・画像登録/削除機能
・商品情報登録/変更機能
・手数料/売り上げ計算機能
・下書き保存/削除機能
・出品機能
取引機能
・やることリスト
・通知表示機能
・取引画面
・取引相手/商品情報の表示機能
・コメント機能
・発送方法の登録機能
・通知を送る機能
・配送状況表示機能
・配送状況登録機能
・取引相手に対して評価をつける機能
・取引完了機能
・評価を表示する機能
・売上を表示する機能
・商品を削除する機能
検索機能
・カテゴリー検索機能
・ブランド検索機能
・検索画面
・検索条件から絞り込み機能
・検索条件保存機能
・ページング機能
商品詳細表示機能
・いいね機能
・画像のスクロール機能
・商品情報の表示機能
・投稿された時間を表示する機能
・出品者情報を表示する機能
・コメント投稿機能
・類似商品の表示
・コメント削除機能
・出品者の他商品の表示
・通報機能
・カテゴリーのパンくず表示機能
商品購入機能
・購入機能
・売上金で商品を購入する機能
・ポイントで商品を購入する機能
・商品情報の表示機能
・購入者情報の表示機能
・購入者情報の更新機能
新規会員登録機能
・アカウントの新規登録機能
・2段階認証機能
パスワードリマインダ機能
・パスワードを忘れた際の処理機能
ログイン認証機能
・ログイン機能
・2段階認証機能
・ログアウト機能
プロフィール機能
・プロフィール画面
・プロフィール情報の表示機能
・他人のプロフィール画面ではフォロー、ブロック機能
・出品一覧画面
・出品一覧表示機能
・他人のプロフィール画面では販売中のみ表示する機能
・プロフィール編集機能
・画像アップロード
・ニックネーム、自己紹介の編集機能
・評価一覧の表示機能
・フォロー/フォロワー一覧の表示機能
マイページ機能
・マイページ画面
・売上表示機能
・いいね一覧表示機能
・閲覧履歴表示機能
・保存した検索条件で検索した結果を表示する機能
・出品した商品状態表示機能
・出品した商品の絞り込み機能
・下書き一覧画面に表示する機能
・キャンペーン機能(招待時に500ポイント付与)
・問い合わせ機能
・ヘルプ機能
・個人情報更新機能
・振込申請機能
・ポイント機能
・ポイント履歴表示機能
・通知設定機能
・ユーザーのアイコン表示機能
・ユーザーの評価表示機能
・いいね一覧画面
・販売中のみに絞り込む機能
・いいねを取り消す機能
・閲覧履歴表示機能
・保存した検索条件機能
・保存した検索条件を表示/削除する機能
・保存した検索条件から検索した商品を表示する機能
・出品した商品画面(出品中)
・出品した商品の情報を表示する機能
・出品した商品全体の公開/非公開設定機能
・出品した商品全体の値下げ機能
・出品した商品の絞り込み機能
・出品した商品画面(取引中)
・全ての取引中の商品を表示する機能
・発送済みの使用品のみ表示する機能
・出品した商品画面(売却済み)
・売却した商品と値段を表示する機能
・出品した商品画面(販売履歴)
・購入した商品画面
・商品、値段、完了日の履歴を表示する機能
・取引中の商品のみ表示するように絞り込む機能
・購入した商品を表示する機能
・下書き一覧画面
・下書きの編集をする機能
・下書きの一覧を表示する機能
管理者機能
・お問い合わせ機能
・キャンペーンの管理機能
・トラブル時の取引中止機能
・ポイント付与機能
・通報一覧表示機能
・アカウント規制機能
通知機能
・やることリスト通知機能
・お知らせ通知機能
・メール通知機能
オリジナル機能
・ブロック共有機能
・ブロックされた人数が一定以上のユーザーの商品が表示されないようにする機能
開発環境
フロントエンド ：BootStrap／jQuery
バックエンド ：Java8
データベース ：Oracle Database
アプリケーションサーバー：Apache Tomcat
実行サーバー ：CentOS
ソースコード管理 ：GitHub
ローカル開発環境 ：MacBook Air／Eclipse2024-03
設計書
画面遷移図（一部抜粋）
テーブル定義書（一部抜粋）
ワイヤーフレーム
制作過程
作業人数 ：6人
作業期間 ：2024年5月31日（金）～2024年6月26日（火）
作業日数 ：19日
日の作業時間：7時間30分
全体スケジュール
5/31〜6/2
スケジュール作成
最初に私たちが行ったことは、大まかなスケジュールの作成です。
まず、設計とテスト作成、実施に必要な時間を考えました。そして、テスト結果をもとにした修正時間を設けて、残りを実装の時間としました。その結果、実装の予定期間は丸6日間となり、余裕の無さを早くも感じ始めました。
機能の洗い出し
次に、本家メルカリの機能の洗い出しを行いました。機能一覧にまとめてみると、普段使っていても気付かないような機能がとても多く、機能数が膨大な数になりました。
機能の優先度決め
最後に、洗い出した機能に対し、実装する優先度を決めました。根幹をなす機能を優先して実装することで、他の機能のテストを簡単にするほか、DBを直に操作せずとも、正常な値を持つデータを生成できるなど、利点が多いと考えたためです。仮に実装に深刻な遅れが生じても、メルカリの模倣アプリとしての体裁を保つため、という意図もあります。
6/3〜6/6
画面遷移図作成
実際のメルカリの画面遷移を参考に、どの画面からどの画面に遷移するかの画面線図を作成しました。
画面ワイヤーフレーム作成
実際のメルカリの画面を参考に、画面に何を表示するかの画面ワイヤーフレームを作成しました。
DB定義書作成
仕様を洗い出した後、仕様を実装できるようにDBを設計していきました。最終的にテーブルの数は48個(うち2個は未使用)と、膨大な量になりました。
詳細設計書作成
洗い出した機能をもとに必要なjavaクラスやjsp、表示内容、大まかなロジックなどを決めていきました。
6/7〜6/18
実装
詳細設計書をもとに必要機能を実装しました。実装が完了した機能についてはメンバー間でレビューし、結合用のブランチにマージしました。レビューは最低2人が見るよう、チーム内でルールを定めました。
6/19〜6/26
単体テスト、結合テスト、デザイン修正
必要機能が実装できてからテストに取り組みました。単体テスト表を各機能を担当した人が作成し、テスト表作成者とは別の人がテストの実施をしました。単体テストの項目が全て正常な動作になっていることを確認したのち、本番環境に合わせるよう、細かな修正とデザイン修正、結合テストに取り組みました。
振り返り
Keep（継続すること、良かったこと）
・事前にコーディング規約を定め、表記揺れ、パッケージ分けの統一を行った。
・Canvas(Slack上の、チーム全員が閲覧可能な掲示板)を用い、口頭では正確に伝えることの難しい事項を共有した。
・朝夕で進捗状況の報告を行った。できている時は褒め合った。
・機能を細分化し、汎用性の高いメソッドを作る/共有することで、各自の無駄な工数を減らした。
・各タスクのリードタイムを減らすよう、なるべく掛け持ちでタスクを行わないようにした。
Problem（問題点、反省点）
・詳細設計書はあくまで「大まかな処理の流れ」を記載していたため、処理の具体的な内容やメソッドの流れ、DB操作などが含まれず、実装時の価値がかなり低くなってしまった。結果として、詳細設計書が役に立ったのはURLパターンの確認程度であり、時間リソースを無駄にしてしまった。
・詳細設計書を書く際、DB操作と明確に結びつけ、これを見れば実装が確実にできるレベルまで理解を深めておくべきだった。
・洗い出し/詳細設計が甘く、機能の見落としが多々あった。追加実装/修正分の時間ロスが大きかった。
Try（次回に向けて、改善点）
・どのコードにどれだけ時間がかかったか記録して、後のスケジュール調整に活かす。
・タイマーを使って制限時間を設けて危機感を持つ。
・よく使うメソッド(商品IDから商品の名前、値段、画像を取得する、時刻をyyyy/MM/dd hh:mmにフォーマットするなど)を共有する。
・コンフリクトに留意し、修正を行うクラス/ファイルを逐一報告する。
苦労した点
実装全般
・作成過程にもある通り、結合テストは納期の前日まで行われており、特定の機能については正常に動くかどうか怪しい状況が続いた。
・単純に機能数/画面数が多く、当初の予定では6日で110画面ほど実装する算段であった。難しいロジックを記述する箇所は少なかったが、画面遷移時の多量のデータの保持や10種類以上ある検索条件の絞り込みなど、パワーが求められる処理が多かった。
・タスクに依存関係があり、前の処理が終わらず、巻き取りが実質不可能となるケースが生じた。実装序〜中盤に割り振ったタスクであったが、より早期にする、もしくは擦り合わせを行えば、実装が難航することを防ぐことができたように思う。
まとめ
最初の機能の洗い出しで機能数が膨大なことを確認した時は、開発未経験メンバー6人が約1ヶ月でメルカリの模倣アプリを本当に作成できるのかとても不安でした。しかし、とてもタイトなスケジュールを設定し、それを達成するためにメンバー全員が一丸となって取り組むことでなんとか納期までに完成させることができました。チームで協力してアプリを作成することで、メンバー間で認識を共有することの難しさやグループワークの楽しさを学ぶことができました。このグループ演習で得られた経験を、配属後も活かしていきたいと思います。