UIアプリの設計はどうあるべきか?

UIアプリの設計はどうあるべきか、です。

ここで言う、UIアプリは、スマホアプリやWEBアプリなど画面を持つモノを指します。

まず、UIが無い組み込みアプリとかは、皆さんどう設計するでしょうか?すごいザックリ言うとレイヤ構造にして、機能単位でコンポーネント分割とかでしょうか。規模感とかも多少は影響しますが、ある程度慣れてくると、それなりに納得のいく設計が出来るかと思います。
では、ここにUIが入るとどうでしょうか?UIもアプリの振る舞いに影響するため、当然ソフトウェア的な実装が必要です。実装が必要となると設計の対象になるはず。じゃあUIも組み込んで設計してみよう!

・・・

な、何かやり方わかんねえ・・・

何なんでしょう。得も言われぬ気持ち悪さというか、一般的な機能の追加というレベルとは何かが異なります

昔、WEBコンテンツを積んだ組み込みアプリの開発をしましたが、UI以外のコンポーネントについては、色々設計をしなければいけませんでしたが、UI(Webコンテンツ配信コンポーネント)については免除されていました。一応他の担当者にこんな感じで実装すれば良いよ、という形で設計っぽい事はしましたが、その時は、URLアクセス時にどういったクエリを渡して、CGIの中ではそのクエリを元にどういった処理する、ぐらいをサラッと書く程度だったと記憶しています。ただこのレベルだとどうなんでしょう。UI以外の部分の設計と比べると何となく粗いですね。とりあえず、このUIの違和感についてもう少し突っ込んでみます。

以前、何となく違和感を感じたとこから手当たり次第検討してみます

画面仕様と設計の関係

どうして違和感を感じたか、真っ当な理由は現時点で無いんですが、何かここら辺がキーになってそうな気がするわけですよ。くんくん。書きながら深ぼりしていこうと思います。ちなみに例の如くandroidをベースに進めます。
まず、UIがあるソフトには、通常のソフト仕様とは別に画面仕様が存在します。書いてる内容は、各画面のレイアウト(外観)、画面遷移は、間違い無くあるでしょう。
で、ここからがたぶんバラつくんですが、こんな事まで書いている場合もあります。

  • UI上の○○ボタン押したら
  • インジケータ出して
  • 通信走らせて
  • 応答返ってきたら応答結果を画面に反映させて
  • インジケータ消す

ここまで来ると、仕様じゃなくて設計じゃんと感じる方も多いと思います。じゃあ仕様書仕様書として、設計は設計としてしっかり分けましょう。
それでは、仕様書にはどこまで書くべきでしょうか?
ボタン押下したら、何が起きるかはさすがに仕様書に書かないと不味そうですよね。
で、インジケータの表示/非表示も画面表示に影響する部分ですからこれも仕様に明記しとかないと不味そうですよね。。
となると、インジケータの表示/非表示のトリガも仕様に書いとく必要がありそうですね。。。
・・・

やっぱ設計っぽい事になってきてもうた・・・

こうならないようにするためには、やはり画面仕様書は、各画面のレイアウト(外観)、画面遷移だけに徹するほうが良いのかも。ほんで、設計書には、先程の押下時の処理を書くと。。
さてさて、では設計書書いてみますか。
画面上のどのボタン押下した時に行う処理なのか、またその処理で最終的に画面上のどこの情報を更新するかが分かるようにするためには、文言だけじゃ分かりにくいし、いちいち名称つけるのもめんどくさいし。。。

せや! 画面のレイアウト貼り付けたろ!

これで、画面のどこで紐付くかが一発ですな。よしよし。ってもうこんな事するなら画面仕様書にまとめてかけばええやん、二度手間やん、という指摘間違い無しです。
結局のところ、やはり画面仕様書+設計書的なモノである事は、しょうがなさそうです。

と、前行を書いてから実は、あれこれ2日程経過しているんですが、本日改めて思ったのが

画面個別の振る舞いは全て画面仕様書で書くべき。

現在担当している開発はそもそも画面仕様書がまだ無く(それもおかしな話なんですが)、後付で書く事になっており、設計のほうが先行してしまった経緯があります。だからと言っては何ですが、本来仕様フェーズで決めるべき+書かれるべき内容(各画面の振る舞い)が、設計フェーズで決めた風になっています。画面絡みの内容を設計時に決めているので、必然的に画面依存の細かい内容が膨大に出てきます。仕様書に書いてないんだったら、設計書で書くしかありませんよね。。。とこれが最大のミスです。以前は画面トリガの処理はどっちか(仕様書or設計書)で書いといたらええやろと思ってましたが、やっぱ駄目です。画面に関連する事は全て画面仕様書内に書くべきです。各画面のレイアウト(外観)、画面遷移のみに徹して書くのではなく、UIの振る舞いまで含めて全て画面仕様書に書くべきです。遠慮はいりません。

結論

UIがあるアプリにとって、画面は全て仕様である。設計ではない

当初は、”設計っぽい事になってきたもうた…”、と感じてた部分も、設計ではなく仕様ですね。

設計では画面のトリガで引き起こされる内部のロジック処理のみを記載する。ロジック処理と画面のトリガ自体は紐付けない事※ここ重要

つい紐付けたくなるのですが、紐付けてしまうと画面の振る舞いに巻き込まれてしまい仕様書+設計書が出来上がるので敢えて避けます

ロジック処理と画面の紐付けは、必要があればマスタの設計書ではなく、付帯資料でやる

これは、まだハッキリしない部分も多いため、今後、必要か否か検討しようと思います