こちらの記事にプロダクト実装前に行うべき事がまとめられておりました。
私自身も成果物作成の際に、要件定義などを行ったので、今回の記事はこちらに沿って残していこうと思います。
https://qiita.com/Saku731/items/741fcf0f40dd989ee4f8
成果物のURL▼
http://share-noske55.com/top
要望：解決すべき課題（仮想サービスなので自分があったらいいなと思うサービスを作成）
現状の課題
今回想定したのは、コンビニの廃棄商品について
コンビニでは日々大量の廃棄物が出ている。
本来捨ててしまうその食品を通常価格より安く販売したら、コンビニ側も売上が増え、利用者側（廃棄を買う側）も安く食品を手に入れられる。
幅広く誰でも簡単に使えるように、シンプルに購入できるようなアプリを作る事をゴールとする。
要求
具体的に実装したい機能一覧
① 利用者側は、メールアドレス、パスワードでユーザー登録ができること
② コンビニ側はコンビニ名、支店名、住所、TEL、店長名、メールアドレス、パスワードでユーザー登録ができること
③ コンビニ側と利用者側のユーザ登録画面、ログイン画面はそれぞれ作成する
④ コンビニ側も利用者側も、ログイン・ログアウトできるようにする
⑤ コンビニ側も利用者側も、パスワードリマインダーでパスワード忘れの際に変更対応が可能である
⑥ コンビニ側は商品を投稿機能、商品情報編集機能、商品編集画面から削除できる機能がある
⑦ 利用者側もコンビニ側も、登録された商品を商品一覧画面で一覧表示でみれる
⑧ 利用者側は「購入済でない商品」ならば商品詳細画面内の購入ボタンを押すことができるようにする
⑨ 購入ボタンを押すと、コンビニ側・利用者側の両方に必要な情報を記載したメールを送る
⑩ 購入ボタンを押すと、商品が「購入済」状態になり、一覧画面で表示するときに「購入済」のラベルを付ける
11 「購入済」状態の商品の、商品詳細画面では、購入ボタンが押せないこと
12 自分が購入した商品の、商品詳細画面では、「購入をキャンセル」ボタンが表示されるように
13 コンビニ側のマイページからは、「ユーザ情報の編集」「商品出品」「商品情報編集」「出品した商品の一覧表示」
「購入された商品の一覧表示」が行える
14 ユーザ側のマイページでは、「ユーザ情報の編集」「購入済み商品一覧」「購入キャンセル」が行える
15 Twitterで商品を不特定多数の人がシェアできること（ブログにあるようなシェアボタンと同じ）
以上の項目を最低でも組み込んで制作する事を目指しました。
その他注意する事
① 食品を扱うので、食欲をそそるようなサイトカラーで制作をする
② レスポンシブ対応をする
③ CSS設計を行い、回収しやすい状態を目指す。
開発環境
LAMP環境
Laravel 5.8
PHP 7.4
CSS SASS 設計はFLOCSS
laravel.mixを使いコンパイル・バンドルを行った。
フロントは、Vue.js Javascriptを使用
画面設計・データ設計
必要な画面をまず洗い出しました。
今回の場合、ユーザーとコンビニサイドに分けて考えてあります。
ー共有画面ー
1.TOP画面
2.お問い合わせ
3.ヘッダー
4.フッター
ーコンビニサイドー
1.コンビニ側ユーザー登録
2.コンビニ側ログイン
3.コンビニ側プロフィール編集
4.コンビニ側出品した商品一覧
5.商品詳細画面
6.コンビニ側マイページ
7.コンビニ側購入された商品一覧
8.コンビニ商品出品画面
9.商品編集画面
ーユーザーサイドー
1.利用者側ユーザー登録
2.利用者側ログイン
3.利用者側プロフィール編集
4.利用者側商品一覧
5.利用者側マイページ
6.利用者側購入した商品一覧
洗い出した各画面をXDを使って作成
今回画面遷移の流れを書かなかったので、次回以降は画面遷移の流れも書き込んでおくとより分かりやすいと感じた。
データベース設計
ER図を作成して、事前にデータの流れを可視化する事で、開発をスムーズに進める事が出来た。
※後に、マイグレーションを使ってカラムの追加を行っている。
お気に入り機能とカートに入れる機能も後に追加できるように一応テーブルを作成した（現在未実装）
データベースの具体的な中身
ユーザー情報
名前
メールアドレス
ストアー情報
店名
支店名
住所
メールアドレス
パスワード
商品情報
商品名
商品カテゴリー
値段
賞味期限
画像
商品出品店舗
商品カテゴリー
カテゴリー名
購入履歴
購入された商品ID
購入したユーザー
出品していたストアー
購入された日時
CSS設計に関して
前回アウトプットを作った際に、Sassを入れるのにてこずったこともあり、今回は最初に何をどこに書くのかを想定して望んだ。
ディレクトリ構成は下記のようになる。
命名規則については、https://qiita.com/manabuyasuda/items/dbb76ed36970bec95470
こちらの記事を参考にさせていただきました。
BootStrapのCSSの付け方を参考にして付けている。
深くても、２回ネストする程度の深さを意識して設計を行った。
上記の項目を制作前に設計し臨んだ。
成果物を作り終えて
今回成果物を作る工程に入る前に設計をした事で、作る際にはかなりスムーズに作成する事が出来た。
CSS設計に関しては、まだまだ経験不足を感じる事もあり、かなり不要なディレクトリもあったので今後も経験を積んでこの辺の感覚を掴んでいきたいと思う。
今回は自分用の成果物であった為、このくらいの設計でもよかったが、チームで共有する場合も考慮すると
もっと情報がわかりやすく整理されているものを作成する必要があるとも感じた。
今後は、こちらの参考記事にもあるような詳細な設計を書けるようにしようと思う。
今後について
laravel、PHPについてはかなり触ったと感じているので、今後はJavaScriptだけを使ったアプリの制作を行い
JavaScriptについての知識を深めると共に引き出しを増やしていこうと考えている。
こちらに関しては、大きなプロジェクトではなく部品をちょこちょこ作成していく。
理由としては、実際の業務でも機能ごとに実装する方が多いと感じた為である。
今回の記事についてはこれで終了とする。