Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
設計初心者のための「伝わる」フロー図 / How to draw a communicativ...
Search
rs_tukki
September 15, 2022
Programming
1
710
設計初心者のための「伝わる」フロー図 / How to draw a communicative flow diagram for beginners
設計モデリングLT会 - vol.4の登壇資料です。
https://rakus.connpass.com/event/255782/
rs_tukki
September 15, 2022
Tweet
Share
More Decks by rs_tukki
See All by rs_tukki
はじめてのTypeScript × はじめてのChrome拡張 / frontend_lt typescript and chrome-extension
rs_tukki
0
800
Twelve-Factor Appで読み解く、モダンなアプリの理想とレガシーなアプリの現実 / Rakus Meetup Tokyo 5 Twelve Factor App
rs_tukki
4
1.8k
Other Decks in Programming
See All in Programming
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
140
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
140
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.4k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Golang と Erlang
taiyow
8
1.9k
Tuning GraphQL on Rails
pyama86
2
1k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
Featured
See All Featured
Scaling GitHub
holman
458
140k
Code Reviewing Like a Champion
maltzj
519
39k
What's in a price? How to price your products and services
michaelherold
243
12k
RailsConf 2023
tenderlove
29
880
Bash Introduction
62gerente
608
210k
A designer walks into a library…
pauljervisheath
202
24k
Statistics for Hackers
jakevdp
796
220k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
680
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Transcript
設計初心者のための「伝わる」フロー図 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で作りました
ご清聴ありがとうございました。