Webアプリの設計②


## はじめに

前回の記事から、「自己研鑽＋ポートフォリオ+趣味」という位置づけでWebアプリを作り始めました。

https://qiita.com/kajiyai/items/f66ba5d9659ef87c3247

「自己研鑽＋ポートフォリオ+趣味」

自分のフェーズに合致したとてもいい記事があったので、こちらの記事を参考に進めています。

https://qiita.com/takahirocook/items/3cfa6585e74effafe5da

## キーワード

設計書, 設計, 設計プロセス, 外部設計

## 目次

1. 全体
2. 外部設計
    1. 方式設計
    2. 機能設計
3. おわりに

## 全体

各フェーズのざっくりとした自分の理解です

1. 企画
    1. どんなものを作るか決める
        1. ユーザーゴール
            1. サービスを使う人のゴール
        2. ビジネスゴール
            1. サービスを作る人のゴール
2. 要件定義
    1. 機能要件
        1. 最低限の機能
    2. 非機能要件
        1. +αの機能
3. 外部設計**←イマココ**
    1. 方式設計
        1. 使用するサーバー,言語,フレームワーク,DBなどの環境整備を行う
    2. 機能設計
        1. 実装する機能の洗い出し
            1. DB設計, バッチ処理等もここで設計する
    3. 画面設計
        1. 画面遷移図の作成
            1. トリガー, 流れを図示する
4. 内部設計
    1. データ設計
        1. 概念設計
            1. 概念図
        2. 論理設計
            1. ER図
        3. 物理設計
            1. テーブルの図
    2. モジュール設計
        1. モジュールの分割を行う
    3. プログラム設計
        1. 設計内容を具体的に落とし込む
5. 開発
    1. goooooooooooooooooooooo
6. テスト
    1. 単体テスト
        1. モジュール内のテスト
    2. 結合テスト
        1. モジュール間のテスト

## 外部設計

前回の記事では機能要件、非機能要件を定義しました。

それぞれ曖昧に定義しましたが、そのまま進めてみようかと思います。

名前を知らなかったのですが、**********方式設計**********という設計もあるようです。

使用するハードウェアや、開発言語、フレームワーク等の設計のようですね。前回記事の冒頭で、ざっくりそのようなことはしましたが、改めてここで明記しておこうかと思います。

また、非常～に詳しい記事を見つけたのでここに示しておきます。

https://pm-rasinban.com/bd-write

### 方式設計

#### ハードウェア構成図

#### ネットワーク構成図

GCPでいい感じにやろうと思いますw

ほとんど何も分からないので適宜キャッチアップしていきます。

#### ソフトウェア構成図

- ローカル環境
    - 環境管理：Docker
    - エディタ：vscode
    - バージョン管理：Git
    - コードベース：Github
    - タスク管理：Notion
    - 通信：自宅の光回線とルータ
    - 使用端末：win11 Home, 2020年製のEnvy(僕のノートPC)
- 本番環境
    - Webサーバー：GCPのApache(?)
    - DBサーバー：GCPのSQL server(?)
        - 未知の世界だからやりながら試していく
    - アプリケーション
        - 言語：Ruby, TS, JS
        - フレームワーク：Rails, React
        - ライブラリ：Devise,
    - DBMS
        - MySQL
    - 外部API：discord api

chatgptにmermeid.js書いてもらいました。

```mermaid
graph LR
    A[local] --> B[Docker]
    A --> C[エディタ:vscode]
    A --> D[バージョン管理:Git]
    A --> E[コードベース:Github]
    A --> F[タスク管理:Notion]
    A --> G[通信:自宅の光回線とルータ]
    A --> H[使用端末:win11 Home 2020年製のEnvy]
    I[本番環境] --> J[Webサーバー:GCPのApache]
    I --> K[DBサーバー:GCPのSQL server]
    K --> L[DBMS:MySQL]
    I --> M[アプリケーション]
    M --> N[言語:Ruby, TS, JS]
    M --> O[フレームワーク:Rails, React]
    M --> P[ライブラリ:Devise]
    M --> Q[外部API:discord api]

```

### 機能設計

前回の記事で、以下のように機能要件を定義しました。

> 
> 
> - ログイン機能
>     - 任意のIDとPWで行う
>     - 新規登録が必要
>     - ログアウト出来る
>     - 他のユーザーの情報の閲覧権限は限られている
> - 投稿機能
>     - 投稿・編集・更新・削除を出来る
>         - テキスト
>         - 画像
>     - コメントの投稿・編集・更新・削除を出来る
> - 通知機能
>     - メールが送られる
>     - discordと連携できる
> - SNS機能
>     - プロフィールの投稿・編集・更新・削除を出来る
>         - ユーザー名
>         - アバター
>         - ひとこと
>     - フォローできる
>     - 記事にいいね出来る

これらの要件に基づいて、設計をしていきます。

バッチ処理については思いつかないのでスルーします。

#### 各機能の設計

ざっくりですが、表にしてみました

| 機能 | 機能詳細 | 使用する技術 |
| --- | --- | --- |
| ログイン | 任意のIDとPWでログインができる | Devise |
|  | 新規登録が必要 | Devise |
|  | ログアウトできる | Devise |
|  | 他のユーザーの情報の閲覧権限は限られている | Railsの権限制御機能 |
| 投稿 | 投稿・編集・更新・削除ができる | Railsのデータモデル、CRUD機能 |
|  | テキスト | text型のカラム |
|  | 画像 | CarrierWave、Asset Pipeline |
|  | コメントの投稿・編集・更新・削除ができる | コメント用のデータモデル、CRUD機能 |
| 通知 | メールが送られる | Action Mailer機能 |
|  | discordと連携できる | discordのAPI |
| SNS | プロフィールの投稿・編集・更新・削除ができる | ユーザー情報用のデータモデル、CRUD機能 |
|  | アバター | CarrierWave、Asset Pipeline |
|  | フォロー・フォロワー機能 | フォロー用のデータモデル、フォロー・フォロワー一覧表示機能、フォロー・フォロワーの追加・削除機能 |
|  | いいね機能 | 投稿データに紐付ける、いいねの数表示機能、いいねの追加・削除機能 |

#### テーブル

ER図などは次回書きます。

今回は必要になりそうなテーブルを列挙します。

- ユーザー
- 投稿
- コメント
- フォロー
- いいね

## おわりに

今日は外部設計の機能設計まで書いてみました。

設計は無限に時間が取れてしまうので怖いですね。。。

どうやら僕は設計が全然うまくできないことが分かりました。

次回は画面遷移図と画面のレイアウトなどを書いていきたいと思います。

ではまた。