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
790
設計初心者のための「伝わる」フロー図 / 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
980
Twelve-Factor Appで読み解く、モダンなアプリの理想とレガシーなアプリの現実 / Rakus Meetup Tokyo 5 Twelve Factor App
rs_tukki
4
2.1k
Other Decks in Programming
See All in Programming
AI Agent 時代的開發者生存指南
eddie
3
1.9k
CSC509 Lecture 03
javiergs
PRO
0
340
All About Angular's New Signal Forms
manfredsteyer
PRO
0
190
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
560
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
Le côté obscur des IA génératives
pascallemerrer
0
150
品質ワークショップをやってみた
nealle
0
540
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
460
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
860
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
It's Worth the Effort
3n
187
28k
Why Our Code Smells
bkeepers
PRO
340
57k
We Have a Design System, Now What?
morganepeng
53
7.8k
Navigating Team Friction
lara
190
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Side Projects
sachag
455
43k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Faster Mobile Websites
deanohume
310
31k
How GitHub (no longer) Works
holman
315
140k
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で作りました
ご清聴ありがとうございました。