Webアプリの設計やってみた①

はじめに

「自己研鑽＋ポートフォリオ+趣味」という位置づけでWebアプリを作り始めようと思います。

業務を遂行する中で、設計やテスト等の重要性を腹落ちして理解出来てきたので、設計とやらをやってみようと思います。

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

キーワード

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

目次

1. 全体
2. 企画
3. 要件定義

全体

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

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

企画

技術選定

参考記事では以下のように書かれています。

技術選定からはじめない
FWや使う言語はツールの一つでしかないため、最初のフェーズで「最近流行っているからRailsを使おう！」みたいに技術選定から入るのは「目的」と「手段」が逆転しちゃっています。

また、FWに引っ張られた設計にしてしまうと、変更する必要に迫られた際に苦労する可能性があるので、その際に柔軟に対応できるよう、まずは「何を作るのか」というのを固めてから使う技術を考えていきましょう。

そのかわり、開発の「目的」が「自己研鑽」の場合は、「自身の成長」を開発のゴールと設定してゴリゴリに技術を盛り込んでいきましょう！

僕の目的は、「自己研鑽＋ポートフォリオ+趣味」なので、技術選定はしてしまいます。

最低限

rails: 7.0.4

ruby: 3.2

mysql: 8.0.3

react: 18

曖昧

GraphQL

環境構築の記事を以前に書きました。

https://qiita.com/kajiyai/items/46958afbecb0a4f941a7

フロントエンドの選定にはこちらの記事を参考にしました

https://blog.uzumaki-inc.jp/rails

何を作るか

僕は「30日」だけなら頑張れる人間、「30日チャレンジャー」です。

このブログも30日間だけ書き続けてみようと思って、書いています。

なので、「30日チャレンジ」専用掲示板を作ります。

今回はユーザーと開発者が同じ人(?)なので、少し混乱しますが、設定していきます

ユーザーゴール

ユーザーゴールとは、利用者が解決したい目的のことです。

サービスが目指すべきゴールは、「企業側が利益を生むこと」ではなく「ユーザーが目的を達成できるようにすること」であり、これが実現できないアプリはユーザーからの支持を集めることはできません。

ユーザー側のメリットを優先的に考え適切なUXを提供することが、後述のビジネスゴールの達成に繋がるため、まずはユーザーゴールをしっかり固めましょう。

利用者が解決する目的を考えてみました

• 継続する習慣をつけることが出来る

ビジネスゴール

目標の立て方は以下の基準を満たすように立てます

「Specific」（具体性）

「Measurable」（計量性）

「Achievable」（達成可能性）

「Realistic」（関連性）

「Time-bound」（期限）

以下の目標を立てようかと思います

• 財務的な目標
  • マイナスにならない事
• 個人的な目標
  • 30日単位でリリースをする

要件定義

さて、ここまででざっくりと何を目指して、何を作るのかを考えました。

さらに具体的に掘り下げていき、

何を作るか、何を作らないのかを明確にしていきます

付けたい機能達をとりあえず書いてみた

• ログイン機能
• 投稿機能
• 通知機能
  • 外部のサービスと連携する必要がある
• SNS機能
  • いいねやユーザー同士のフォロー等
• マルチメディア
  • 画像・音声・動画を投稿できる
• AI機能
  • 質問に答えてくれたり、コメントしてくれたりする

機能要件

機能要件は「ゴール達成のために必ず必要がある機能」のことです。

ユーザーゴール

継続する習慣をつけることが出来る

ビジネスゴール

マイナスにならない事

30日単位でリリースをする

目標を以上のように設定したので、重要順に、以下の四つが必要だと思いました。

• ログイン機能
• 投稿機能
• 通知機能
• SNS機能

「サービスとして使用する」ために、ログイン機能や投稿機能

「継続する習慣をつける」条件付けのために、通知機能やSNS機能

それぞれ機能要件を定義してみました。

現在の僕の技術レベルでは実現できないかもしれないですが、一旦定義しました。

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

非機能要件

ここは正直具体的にイメージできていないので、以下のように書いておきます

• リッチなUXのために出来ることの全て
  • UI
    • パチンコのような依存性
  • レスポンスが早い
    • 平均xxミリ秒以下
  • サーバーが落ちない
    • xxx
  • セキュリティが高い
    • xxx
  • etc

おわりに

次回は外部設計,内部設計,テストについて書いていこうと思います。

こんな機能をつけたい！と妄想を膨らませるのは本当に楽しいです。(実装できるかは別の話です)

ではまた。