LoginSignup
1
1

Webアプリの設計④

Posted at

はじめに

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

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

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

キーワード

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

目次

  1. 全体
  2. 外部設計
    1. 画面設計
      1. レイアウト図
  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. モジュール間のテスト

レイアウト図

image.png

仮のフレームを作ってみました。

日本語がうまく変換されなくて少し手こずりましたが、作りやすかったです。

おわりに

今回はレイアウト図を途中まで描いたところで力尽きました。

次回は内部設計をする前に、設計のために色々触ってみる、という事を暫くしてみようと思います。

具体的には、認証やページネーションや画像のアバター等のライブラリを試してみたりしようと思います。

ではまた。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1