Webアプリの設計②

はじめに

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

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

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

キーワード

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

目次

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. モジュール間のテスト

外部設計

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

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

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

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

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

方式設計

ハードウェア構成図

ネットワーク構成図

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書いてもらいました。

機能設計

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

• ログイン機能
  • 任意の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図などは次回書きます。

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

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

おわりに

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

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

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

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

ではまた。