設計初心者のための「伝わる」フロー図 2022/09/15(木) 設計モデリングLT会 - vol.4 #modelinglt 株式会社ラクス 矢須健太

自己紹介 • 矢須健太(@rs_tukki)  株式会社ラクス  Androidアプリ開発担当  Java/JavaScript/Kotlin  Spring Boot/Apache Cordova • 趣味  旅行/温泉/野球観戦 etc..  Youtube巡り New!

はじめに • V字モデル

はじめに • V字モデル

概要設計での成果物(例) • フロー図  業務やシステムにおける工程やプロセスの各ステップやアルゴ リズムなどの流れを、長方形・ひし形・楕円形などの記号で表 示し、流れの方向を矢印でつなげて視覚的に表した図 引用:フローチャート(フロー図) 書き方 まとめ【基本のキ】 • UX設計書 • DB設計書 • …etc.

フロー図はなぜ作成するのか？ • 前提:概要設計は「要件定義」と「詳細設計」の間の段階 1. PdMに対して「要件定義」の不明点を問い合わせる  詰め切れていない仕様はないか？  〇〇のケースの場合どうすべきか？ 2. 実装者に対して「詳細設計」のイメージをしてもらう  仕様を実現するにはどのような実装が必要か？  どのモジュールに手を加える必要があるか？ • PdMにも実装者にも伝わる仕様、実装の指針=フロー図が必要

伝わるフロー図のポイント • ①フロー図にする処理を全て書き起こしてみる 例) 1. スマホアプリに表示されたログインボタンを押下する 2. 入力されたID・パスワードをもとに、実装済みの認証APIを実行する 3. サーバはID・パスワードがDBに登録したものと一致するか確認する 4. サーバは認証結果を返す。結果に応じてアプリは異なる画面を表示する

伝わるフロー図のポイント • ②フローに登場したモジュールごとにレーンを追加する

伝わるフロー図のポイント • ③既存処理も含めて、フローを余さず記載する

伝わるフロー図のポイント • ④新規に追加・改修する処理を赤字で記載する

伝わるフロー図のポイント • ⑤データの流れを記載する

まとめ • 概要設計のアウトプットとして「フロー図」を作成する • フロー図は仕様と実装の指針となる核の部分である • PdMにも実装者にも意図の伝わる書き方を心掛ける  フロー図にする処理全てを洗い出す  登場するモジュールごとにレーン分けする  既存処理も含めて、全ての処理を明確に記載する  新規追加、改修を含むフローは赤字で記載する  データのインプット、アウトプットも記載する

おまけ:ツール選定 • Excel(スプレッドシート)  〇:成果物のアウトプットとしては最も分かりやすい  ×:作成・修正に非常に手間がかかる • plantUML  https://plantuml.com/ja/  〇:コードベースで作成できるので修正が楽  ×:細かいレイアウトの調整ができない • draw.io  https://app.diagrams.net/  〇:インストール不要ですぐ使える  ×:Web上のツールなので社内ルールによっては禁止されるかも？

おまけ:ツール選定 • このフロー図はdraw.ioで作りました

ご清聴ありがとうございました。