Zenn
🌊

外部設計 と 内部設計 (図付き攻略)

2024/06/27に公開
要件定義
GPT
外部設計
詳細設計
内部設計
tech

対象読者

  • 要件定義がおわり設計フェーズに入る方
  • ER図や画面遷移図など、要件定義でつかう図を理解したい方

外部設計と 内部設計とは

クライアントの要望を聞き、方針が定まった段階で機能に落としていく段階で通る道のことです！

外部設計…ユーザーが実際に利用する外側部分の設計工程
内部設計…ユーザーから見えない内側の設計工程

前提

図を作成するときは このサイトを使うといいと思います☆

本サイトは、sns のアプリを例にとります！！

外部設計

外部設計では主に以下を決めます。

  • 方針設計
    アプリの使用技術や言語、システム全体のアーキテクチャ設定
  • 機能設計
    どんな機能が必要かなどの洗い出し
  • その他
    開発費用、期間、セキュリティ

どんな図をつかうの？？

①システム構成図 : システムの全体像
AWS の記事ですと こちらが大変わかりやすいと思います☆

AWS使っている方はこちら
https://aws.amazon.com/jp/architecture/icons/

Azure使っているかたはこちら
https://docs.microsoft.com/ja-jp/azure/architecture/icons/

②画面遷移図 : ユーザーインターフェイスの設計と、画面間の遷移を定義するために使用されます。

コード
@startuml
[*] --> ログイン画面
ログイン画面 --> ホーム画面 : ログイン成功
ホーム画面 --> 投稿画面 : 投稿を作成
ホーム画面 --> 投稿詳細画面 : 投稿を選択
投稿詳細画面 --> コメント画面 : コメントを追加
投稿詳細画面 --> いいね : いいねをする
ホーム画面 --> メッセージ画面 : メッセージを送る
ホーム画面 --> プロフィール画面 : プロフィールを見る
ホーム画面 --> 設定画面 : 設定を変更
@enduml

③ ER図

コード
@startuml
entity "ユーザー" {
  *ユーザーID : int
  --
  ユーザー名 : string
  メールアドレス : string
  パスワード : string
}

entity "投稿" {
  *投稿ID : int
  --
  ユーザーID : int
  コンテンツ : text
  作成日時 : datetime
}

entity "コメント" {
  *コメントID : int
  --
  投稿ID : int
  ユーザーID : int
  コンテンツ : text
  作成日時 : datetime
}

entity "いいね" {
  *いいねID : int
  --
  投稿ID : int
  ユーザーID : int
}

entity "メッセージ" {
  *メッセージID : int
  --
  送信者ID : int
  受信者ID : int
  コンテンツ : text
  送信日時 : datetime
}

ユーザー ||--o{ 投稿 : "投稿する"
ユーザー ||--o{ コメント : "コメントする"
ユーザー ||--o{ いいね : "いいねする"
投稿 ||--o{ コメント : "コメントされる"
投稿 ||--o{ いいね : "いいねされる"
ユーザー ||--o{ メッセージ : "メッセージ送信"
ユーザー ||--o{ メッセージ : "メッセージ受信"
@enduml

ここら辺は、ChatGpt が優秀です。
このサイトに要件定義とChatGptの活用が書かれて興味深かったのでお勧めです！！！

内部設計

さて、次は内部設計です。詳細設計ともいわれます。

内部設計では主に以下を決めます。

  • 機能分割
    開発する機能を分割する。たとえば、タイムライン機能、チャット機能。といった感じ
  • データベース設計
  • 入出力の詳細設計
    システム内部のデータ処理、デフォルト値、error処理など

どんな図を使うの？？

①データフロー図 : システム内のデータの流れを視覚化するために使用されます。

コード
@startuml
FirebaseAuth -> (ログイン) : 認証結果
(ログイン) -> ホーム画面 : 認証成功
(ホーム画面) -> Firestore : 投稿データ取得
Firestore -> (ホーム画面) : 投稿データ
@enduml

②クラス図 : システムの静的な構造・関係性を視覚的に表現するための図

コード
@startuml
class ユーザー {
  - int ユーザーID
  - String ユーザー名
  - String メールアドレス
  - String パスワード
  + ログイン()
  + ログアウト()
}

class 投稿 {
  - int 投稿ID
  - int ユーザーID
  - String コンテンツ
  - DateTime 作成日時
  + 作成()
  + 削除()
}

class コメント {
  - int コメントID
  - int 投稿ID
  - int ユーザーID
  - String コンテンツ
  - DateTime 作成日時
  + 作成()
  + 削除()
}

class メッセージ {
  - int メッセージID
  - int 送信者ID
  - int 受信者ID
  - String コンテンツ
  - DateTime 送信日時
  + 送信()
  + 削除()
}

ユーザー "1" --> "0..*" 投稿 : 作成
ユーザー "1" --> "0..*" コメント : 作成
ユーザー "1" --> "0..*" メッセージ : 送信
投稿 "1" --> "0..*" コメント : 含む
@enduml

まとめ

主要な図はおさえられたかと思います。

また、その他 モジュール詳細などまだまだ現場では詳細におさえないといけない部分が多いかと思います。
そのために、おすすめのテンプレートをがあるリンクをはっておきます！！

Discussion