やったこと

• Design It! 10章 設計判断を可視化する 読了

学んだこと

ポイント

• 図を描く際の注意点
• 良い図を描くためのポイント

学び

• ビューを描く際の注意点
  • 関心事一つにつき、一つのビュー
  • 図での表現が難しい部分は、注釈・表・説明文で補足する
  • 品質特性、優先度の高いリスクを説明するために、拡大ビューを描く
  • アーキテクチャが品質特性を保証する方法を示す
• 良いビューを描くためのポイント
  • 図に凡例を書く
  • 選択したアーキテクチャパターンに合わせて、図を構成する
  • 図の一貫性と、単純さを目指す
  • 叙述的散文を挿入し、アーキテクチャの補助的説明としてストーリーを表現する

所感

「単一責任の原則」というが、これは作図にも当てはまることになるみたい。
「シンプルにする」の一つの具体例が、「焦点を一つに絞る」になりそう。

メモ

アイデアを共有する最良の方法は、アイデアを可視化する事。
可視化することで、認識を素早く共有でき、議論も可能。

共有するだけなら、アナログツールにて作成したスケッチで十分。
綺麗に作図する必要はない。

図を使い、設計判断によって品質特性が向上するストーリーを伝える。
ストーリーと図がかみ合うと、アーキテクチャの理解促進につながる。

異なる視点からアーキテクチャを示す

アーキテクチャの詳細を一つの図で描くことはほぼ不可能。
たとえ描くことが出来たとしても、誰も理解できないような非常に複雑な図になる。

一つにまとめるのではなく、一つの関心事に絞った図を、表現したい関心事の数だけ作成する。

一つの関心事に絞った、アーキテクチャに関するストーリーを、ここでは ビュー と呼ぶ。

要素責務ビューで要素が何をするのかを把握する

箱で要素が何をするのか、線で箱をつなぎ、要素間の関係を表現する。
図での表現が難しい共有すべき必須情報は、注釈・表・説明文などを使用して埋め込む。

絞込ビューで拡大または縮小する

図に、より詳細な情報を詰め込むこともできる（≒解像度を上げる）。

三層アーキテクチャの解像度を上げる例。

![[Drawing 2024-01-13 16.36.46.excalidraw]]

より詳しいパッケージ関係を図示したことで、保守性について詳しく知ることが出来る。

モデルレイヤーとユーティリティレイヤーは、全コンポーネントから参照される。
全部描くと図が煩雑になるため、あえて記載していない。

解像度を上げると、図が煩雑になる可能性がある。
図で表現したいことを一つに絞り、特化させることを意識すると、ある程度マシになる。

以下を共有する際、詳細化は非常に有効。

• 特定の品質特定を説明する
• 優先度の高いリスクを減らす

アーキテクチャが品質特性をどう促進するか示す

品質特性の実現方法を示したビューを、品質特性ビューと呼ぶ。
品質特性と関係ある情報のみ記載することで、品質特性に焦点を当てることを目的とする。

例）可用性を満たすために、冗長化できるアーキテクチャを選択し、図示する

図だけで品質特性の説明が困難な場合は、説明文や表で補足する。

ビュー間の要素を結びつける

分割した複数のビューの関連を示したい場合、ビューの関連を明示した情報（マッピングビュー）を作成する。

コンポーネント	割り当てられたチーム	備考
Web UI	A	チームはフロントエンドWeb開発の専門家で構成
表示ビジネス	A	このコンポーネントは、Web UI と密接に関係している
検索サービス	B
検索インデックス	B
...	...	...

ビューの関連を示すことが出来れば、形式に拘る必要はない。
表で十分な場合も多い。

ラフスケッチでアイデアを感じる

アイデアを共有する目的であれば、図の精密さは重要ではない。
むしろ、素早い反復と形式ばらないコミュニケーションを前提とするなら、精密な図を描く時間や修正する時間が無駄になりかねない。

アイデアを広げて試行錯誤している際は、単純な図で構わない。
精密な図を描くのは、アイデアが固まり、設計判断が収束してきたらでも遅くはない。

カスタムビューを作成し、必要なものを正確に示す

ユースケースをうまく説明できる図は、図の作成ルールから外れた図であっても、価値がある。
この場合、特定の目的に合わせた、カスタムビューを作成する。

素晴らしい図を描く

素晴らしい図とは、アーキテクチャの概念や土台を正確に反映した図。
素晴らしい図を描く際のポイント。

すべきこと	避けるべきこと
図に関連するメタモデルの各部分を要約した判例を作成する	読者が表記法を知っていると仮定すること（UMLでも）
説明的なタイトルを追加して、図にどのような種類の構造があるかを伝える	全ての要素を一つの図に含める
精密さを高めるためにテキスト注釈を追加する	白黒で印刷すると意味が失われる表記を使う
全ての図にわたって一貫した表記法を使用する	余計な飾り、多種多様な形や線を使い過ぎる
パターンをわかりやすくする	説明文を省略する

凡例を上手に使う

図内で何が起こっているかを表現するためにも、凡例は必須。
凡例が無ければ、何が起こっているのかを理解するのは困難。

例え一般に普及している表記（UMLなど）でも、凡例を載せる。

• すべての読み手が、一般的な表記を理解しているわけではない

パターンを際立たせる

選択したアーキテクチャに合わせて図を描くことで、アーキテクチャを直感的に理解できる。

例）レイヤー構造であれば、層に合わせて要素を並べ、どの層に属するか記述する。

![[Drawing 2024-01-13 16.36.46.excalidraw]]

以下のような戦略が考えられる。

• パターンを反映した名前を選択する
• 強調表示する
• パターンを反映するよう、要素の配置を工夫する
• 語彙を統一する

一貫性と単純さを目指す

伝えたい焦点を絞るよう、余分な詳細を避ける。

• 詳しすぎる詳細は、読み手の注意があちこちに分散し、本当に伝えたいことがぼやける

伝えたいことに応じて、要素の色や形を統一し、読み手の理解を促進する。

• 色や形を選ぶのは、異なるアイデアを際立たせるためであり、綺麗に見せるためではない
• 読み手は、色や形からも意図を見出そうとする。要素の色や形の不統一は、意図しない誤解を与えかねない

叙述的散文を提供する

アーキテクチャについてのストーリーをビジュアル的に補助する手段として、叙述的散文を使用する。

◆叙述的散文
物事を客観的な説明によって順に並べた文章のこと

叙述的散文によって、アーキテクチャのストーリーを語る。

• アーキテクチャはどこから来たのか
• どう動くか
• どこに向かっているのか
• など

表やテキストの段落、箇条書きなどに用いる。