24年新人研修グループ演習「スマートフォン販売ECサイト」
株式会社アクティブ・ワーク（以下、当社）では、例年4～6月末までの約3ヶ月の間、新人研修を行っております。新人研修では様々なカリキュラムがあり、研修の締めとして世の中にある著名なWebサービスを例題に、そのWebサービスを自分たちで1からプログラミングするグループ演習を行っております。
今回は、グループ演習の1つ「スマートフォン販売ECサイト」についてご紹介します。
開発背景
私たちは、メンバー6人から成る「ひとつなぎの〇〇コード」グループです。チームが一つにまとまり、 完璧な連携でプロジェクトを成功に導けるようにとチーム名をつけました。
また、〇〇の部分が『神』になるようなコードを書けるようにという意味も込めました。
これまでの研修で学んできたJava、HTML、CSS、JavaScript、SQLなどの技術を用いてECサイト「デバイスドットコム」を作成致しました。
アプリ概要
デバイスドットコムは、主にスマートフォンの販売を行うECサイトです。自分の好みに合わせて商品を検索することができ、来店予約やお問い合わせなど店舗と直接やり取りすることも可能です。
また、追加機能でレビュー機能も搭載し、商品のレビューができます。
アプリの機能
アプリの機能一覧
アカウント管理
・ログイン認証機能
・パスワード暗号化機能
・会員登録機能
・郵便番号で住所
・マイページ機能
・顧客情報変更機能
・パスワードお忘れ機能
・ログアウト機能・退会機能
・お問い合わせ機能
・お気に入り機能
商品管理
・カート確認
・購入機能
・商品登録機能
・絞り込み機能
・カート登録機能の実装
・アクセスランキング
・商品詳細
・商品登録機能
店舗管理
・店舗総合一覧機能
・店舗一覧機能
・店舗詳細機能
・交通アクセス方法表示機能
・店舗住所Googleマップ表示機能
・店舗アクセス方法切り替え機能
・店舗詳細ヘッダー機能
・店舗来店予約機能
・来店予約カレンダー機能
・パラメータチェック機能
・来店予約メール送信機能
・店舗別入荷速報表示機能
・店長おすすめ表示機能
・店内写真表示機能
・スタッフ紹介表示機能
・店舗メッセージ表示機能
・店舗詳細登録機能
開発環境
フロントエンド ：HTML／CSS／JavaScript
バックエンド ：Java8
データベース ：Oracle Database
アプリケーションサーバー：Apache Tomcat
実行サーバー ：CentOS
ソースコード管理 ：GitHub
ローカル開発環境 ：MacBook Air／Eclipse2024-03
設計書
画面遷移図
制作過程
作業人数 ：6人
作業期間 ：2024年5月31日（金）～2024年6月27日（水）
作業日数 ：20日
日の作業時間：8時間
全体スケジュール
1日目
グループ演習初日は、グループ名と何のアプリを開発するのか決めました。
グループ名は「ひとつなぎの〇〇コード」に決定し、ECサイトを作成することになりました。
役割分担することに決め、模範となるサイトの機能洗い出しをする人、マスタスケジュールの作成をする人で作業を進めました。
機能の洗い出し
模範とするECサイトは、初めてみるサイトだったため、機能の洗い出しを行う前に何のページがあるのか一覧で出すのに大変でした。情報量も多く、機能の洗い出しは大変でしたが、画面を分割し手分けして機能の洗い出しを行なったため、効率よく作業を進めることが出来ました。
また、Slackのキャンバス機能を使い、情報をまとめながら作業を進めたことで、作業が終わり次第他の人と情報共有ができ、すぐに次の作業に取り掛かることが出来ました。
マスタスケジュール作成
締め切りが決まっている中、逆算してスケジュールを立てるのはとても大変でした。設計から納品までと、初めての作業も多かったので、どうスケジュールを立てるべきか悩みました。
これまでの研修で立てたスケジュールを参考にし、どの作業にどれくらい時間を割きたいか考え、スケジュールを決定しました。
2~3日目
1日目に行なった作業の情報共有をし、DB設計/構築、要件定義書作成、ワイヤーフレーム作成、新機能案出し、結合テスト作成を各々行いました。その中で、グループ演習を成功させるためにルール決めをすることにし、以下のルールを設けました。
Eclipseの設定
・javadocの抜けをチェックする機能をON
・保存時フォーマット機能のON
・Apache tomcat v8.0.53
・JavaSE-1.8([JRE17.0.9])
・Dynamic web module version 3.1
詳細設計のルール
・クラス名/メソッド名/フィールド変数名まで決める
・パッケージ構造は細分化する
・Entityの変数名はDBのカラム名のキャメルケース版
Gitのブランチ命名規則
・feature/<user_name>/hogehoge
朝会のルール
・個人の1日のスケジュールを共有
→Slack キャンバスに記述
・進捗確認(進捗報告は15時に提出)
→15時/17時半/19時
テストのルール
・詳細設計が終わった時に一度作成すること
・ヘッダー、フッターは基本的に結合テスト
・機能ごとに単体テストを行う
・粒度を合わせる
・単体テスト
→大分類(正常系/異常系)
→中分類(画面の名前)
→小分類(テストするもの/表示/入力/〇〇機能など)
・結合テスト
→大分類(正常系/異常系)
→中分類(遷移する前)
→小分類(遷移した後)
コミットに関して
・コミットメッセージにファイル名と変更内容を記入
・専用のキャンバスに作業中のファイル名を記入する
4~6日目
詳細設計、単体テスト仕様書作成を行いました。
詳細設計では、その設計書をみただけで他の人が実装できるようにするということを意識して設計をしました。詳細設計をしている際に、必要なテーブルやカラムが増えたりし、DB構築が少し時間かかってしまいました。この要因として、機能の洗い出しが十分ではなかったことが挙げられ、再度漏れがないか確認し詳細設計を行いました。
詳細設計を終え、単体テスト仕様書の作成に入りました。まず、単体テストを先に作成した理由として、これまでの演習でテスト仕様書を作成するのに時間がかかってしまっていたこと、実装期間中にテスト仕様書を作成することにより焦って項目漏れなどが発生してしまうことがあり、それを避けるために余裕があるときに作成することになりました。(前もって作成したことにより、テストに時間をかけずに作業を進めることができました。)
7~19日目
実装、テスト、プレゼン資料作成を行いました。
詳細設計である程度詰めた分、最初はスムーズに実装に入ることが出来ました。ですが、新しい実装方法やCSSで時間がかかってしまい、大幅なスケジュール遅れが発生しました。また、あらかじめDBにデータを登録しなければならないため、そこでも時間がかかってしまいました。
機能の実装はある程度完成していましたが、後回しにしてしまっていた作業が多く、その作業がスケジュール遅れにつながってしまいました。
20日目
納品、プレゼン練習、グループ演習発表を行いました。
ギリギリの納品になってしまいましたが、なんとかグループ演習発表までに形にすることができました。グループ演習発表も無事に終えることができよかったです。
振り返り
Keep（継続すること、良かったこと）
・わからない部分は分かりそうな人にすぐに聞きに行ったこと
・進捗確認を定期的に行っていたこと
・話しやすい雰囲気作り
・報連相
・エンティティを先に作成したこと
Problem（問題点、反省点）
・実装に関するすり合わせができていなかった
・お互いの機能にあまり干渉しようとせず、誰がどのような実装をしているのかを正確に把握していなかった
・他の人の「わからない」に付き合いすぎて、自身の実装まで遅延してしまった
・平等にタスクを割り振ることができず、タスクの重い人と軽い人がいた
・DBの設計が甘くて、DBの構造の変更がたくさんあった
・作業があまり進んでないことを班の人に早く報告せず、結果他の人より作業が遅れてしまった
Try（次回に向けて、改善点）
・どれくらいの工数で実装できるのかをはじめに考える
・設計通りに作れば実装できるというレベルで設計する
・他人の進捗を他人事にせずグループ全員で把握し、遅れなどを把握する
・どこをどう実装するのか、正確な状況を報告し、しっかりとビジョンを共有する
苦労した点
〜絞り込み機能〜
・絞り込みページはURLによって表示する要素が変化するため、それを制御するために、どの画面でどの要素が表示するかのフラグで管理するようにした。
・絞り込み条件を選択すると、商品を絞り込む機能の他、その種類の条件以外の絞り込み条件毎の製品数も動的に変化させる必要があるため、どの種類のチェックボックスがクリックされたのかを管理することに苦労した。
→特に、カテゴリの絞り込みページなどではチェックボックスの入力状況によって絞り込む必要がある要素が変化するため、どの状態ではどう絞り込むのかをしっかりと考える必要があった。
〜カテゴリーの一覧を取得するメソッドの作成〜
・大カテゴリーのエンティティに中カテゴリーのエンティティのリストがあり、中カテゴリーに小カテゴリーエンティティのリストがある構造で、それを１回のDBへの接続で取得する実装。
While１回で、DBのデータの1行分が取得されるので大カテゴリのIDと中分類のリストを紐付け、中カテゴリのIDから小分類のリストを紐づけたマップを作成し、それらの結果から全部のカテゴリのデータを含むエンティティを作成した。
〜来店予約機能の実装〜
・モーダルウィンドウで予約画面を開き、Ajaxを使用して予約機能の実装を行なった。
モーダルウィンドウは、BootstrapとJSの両方を使って実装することで、画面の切り替えを可能にした。
→モーダルウィンドウの実装は初めてだったため、実装方法を調べるのに苦労した。
予約内容を登録するのに、Ajaxでデータを送信し登録することで、非同期通信を可能にした。
→Ajaxで複数のデータをJSON形式で送信するのに苦労した。
〜アカウント管理〜
・会員登録画面などの入力値検証。入力フォームが複数の画面であるため、不正な値が登録されないようにした。
・お気に入り機能の実装についてajax通信を用いての値の送受信やお気に入り解除された際に消す部分の実装に苦労した。
・退会機能のロジックについて、顧客テーブルから削除はできなかったため退会のロジックを考えるのに苦労した。
〜商品管理(商品詳細,ランキング)〜
・商品詳細画面を作成する際に、商品IDをもとにたくさんのデータをDBから一気に取得するのが大変だった。
・ １ユーザーにつき1回だけアクセスをカウントするようにした。
・実現方法として、ユーザーが初めて、ある一つの商品を閲覧した際に、閲覧履歴テーブルにユーザーIDと商品IDを登録する。その時にアクセスのカウントをプラス１するようにした。2回目以降は、閲覧履歴テーブルにユーザーと商品の組み合わせがある場合はアクセスをカウントしないようにした。
〜店舗側のページ(商品登録,店舗情報登録)〜
・画像をbase64で保存して表示すとろころ、パスをDBに保存して再取得するところがなかなか大変だった。
・画像登録ができても、画像をDBから取得した際に、表示されない不具合を修正するのが大変だった。
・複数画像を登録する機能の実装も想像していたよりとても大変だった。
まとめ
今回は、開発したいアプリケーション決めから機能の洗い出し、DB設計/構築、仕様書作成、詳細設計、実装など、設計から納品まで行いました。初めて行う作業が多く、詳細設計や実装の過程で、追加で機能が見つかるなど大幅なスケジュール遅れなどがあり、間に合うのか不安な時期もありました。ですが、焦らずチーム全員で助け合い何とか納品に間に合わせることが出来ました。この経験を活かして、配属後も活かしていきたいと思います。
今回Webアプリを開発し、下記のことがわかりました。
・タスクマネジメントを行う
・報告連絡相談確認を定期的にする
・一人一人の行う作業をみんなが把握する
・行き詰まったらすぐに質問しに行ける環境
・要件定義,詳細設計に時間をかけること