フロントエンド開発 画面設計書のフォーマットについて考える
目次
はじめに
画面設計書とは？
案件で使った(作った)フォーマットで設計書かいてみた
まとめ
はじめに
チームラボのフロントエンド 開発では案件によって画面設計書を作成したりしなかったりします。
社内案件や、小さいプロジェクトでは設計書なしでデザインと要件定義書だけで気合いで作ってたりすることもあります。
ある案件で画面設計書を作ってみて、設計書あったほうがスムーズに開発できて引き継ぎも楽になって保守性も上がるのでチーム共通のフォーマットあったらいいかもしれないと思いました。
今日は実際にチームラボの案件で作成した画面設計書のフォーマットを用いて簡単なTODOリストの設計書を書いてみました。
より良い設計書フォーマットを考えるキッカケになれば嬉しいです。
画面設計書とは
そもそも画面設計書とはなんのために作るか、 どういう事が書いてあるのか
画面に配置されているテキストやボタンの各項目の説明。
ボタンをクリックした時の動作。
APIリクエスト時に送るパラメータ。
画面遷移先のURL。
↑に書いてあることを設計段階で決めて(記述して)おけば開発時に迷うことがありません。
そして仕様を詳細に把握しなくても開発することができます(そんなはずない)
案件で使った(作った)フォーマットで設計書かいてみた
https://gyazo.com/70c67a1ecbff3ccc8a0f15923c1a3614
https://gyazo.com/dc7b7d15d7a8011be27fd7a958d9c748
https://gyazo.com/514eac65aea0e4ee5dc10d3048db293e
https://gyazo.com/a80b7a10d09bb1045accf4d3d4dc492e
https://gyazo.com/fdcc9a050b0d6e83c7abd23425371a3c
今回設計書を作成するTODOリストのデザインです。
TOPページ
https://gyazo.com/0d51efbba332127e64dc4d047999acd1
https://gyazo.com/57d51b92f0d23139c246b40548866409
履歴ページ
https://gyazo.com/6d7d4abbe990e58871026e1d926474eb
https://gyazo.com/006d4483ce9e577401d0d87e6fb5db40
設計書
Googleスプレッドシートで作成。 各シートのスクショ貼ります
シート一覧
画面一覧 / 項目一覧 / 画面プロセス / データチェック
https://gyazo.com/496b5098e1ae2fd29ed287cef5f044ed
画面一覧
画面の一覧。実際に案件で作成した時は無かったけど、今回改めて作ってみたらあったほうが良いと思って追加してみた
https://gyazo.com/1b9c563d893ddafbb8eaef1868dbd811
項目一覧
各項目に番号をつけてその説明を書く。
ボタンクリック時の挙動などをのアクションは別シート(画面プロセス)にまとめる
https://gyazo.com/daf52bbca29e9d807aa151f213d5a3e8
画面プロセス(アクション一覧 的な名前の方がわかりやすいね)
各項目に紐付くアクション
API叩く時のパラメータやAPIのpathもかく
フォームなどに関するアクションでバリデーションなどのチェック項目がある場合ははデータチェックIDが振られる。
データチェックシートでバリデーションルールが説明される
https://gyazo.com/f3a31b84052bc216e76035ad595062aa
データチェック
https://gyazo.com/bc78e082c03a18c4a1ff084cdfae2f1f
初期表示
認証とか ページ描画までのフロー
https://gyazo.com/ea198f565f1f772d31b876c5fb79feb8
まとめ
https://gyazo.com/25ed601e5756683a32ee831d14a1b20b
メモ
設計書を自動化できる？その場合はどっちに注力した方がいい？
設計書→コード
UMLからスケルトンコードは自動生成できる
コード→設計書
APIの実装からSwaggerを生成するとか