OOUIを実装してわかった、同じ「目当て」を見る大切さ

マネーフォワードのデザイナー、河原です。

最近、社内のデザイナーで「オブジェクト指向UIデザイン　使いやすいソフトウェアの原理」の輪読会をしました。

それまでは、なんとなく「オブジェクト指向UIデザイン」という言葉を聞いてわかった気になっていたのですが、みんなで読み、演習形式でオブジェクト抽出からレイアウトまでやってみたことで、オブジェクト抽出の難しさと、上手く整理できたときのシンプルさを学ぶことができました。

(※オブジェクト指向UI = Object Oriented User Interface = OOUI です。)

その流れで自身のさらなる理解のため、4章の最初のワークアウト「メモアプリケーション」を実装してみました。実装してみると、同じ「目当て」を共有することの大切さに気づくことができたので、紹介したいと思います。

ここから先は、演習問題の内容を元にしていますので、演習をしてから読むとより想像しやすいと思います。

また、出てくるコードは説明のために大幅に省略しています。コードの全体は最後にリンクを貼っている codesandbox で見ることができます。

モデルの実装

まずは演習で抽出した以下のメモオブジェクトを元にモデルを実装してみます。

まずはメモそのものを表す Memo モデルです。

Memo では、「タイトル」と「内容」はオブジェクト抽出されたままですが、管理の必要上 「id」 というプロパティを追加しました。

次に、コレクションを表す Memos モデルを実装しました。

Memos には、複数のメモをまとめるための「コレクション」プロパティがあります。また、抽出したアクションのうち「新規作成」と「削除」は実装の都合上、Memos に紐付けました。

「タイトル」と「内容」を変更するためのアクションがどこにもありませんが、それぞれ単純な文字データなので「変更する」というアクションは明示的に実装せず、必要なタイミングで Memo のそれぞれのプロパティを直接書き換えることにしました。

ビューの実装

続いてビューの実装です。以下のような画面を作ります。

一覧ビューも詳細ビューも、Memo モデルを表示するビューです。

一覧ビューの1件分

詳細ビュー

これらのビューを左右にレイアウトすれば、完成です。

完成したメモアプリとコード

完成したアプリケーションと、コードの全体は codesandbox にありますので、是非見てみてください。コードに詳しくなくても、オブジェクトに関するものは日本語で記述してみたので、なんとなくの雰囲気は掴めると思います。

実装して深まる理解と、気づく違い

こうして実際に実装してみると、1つのメモモデルに一覧と詳細の複数のビューを作ったりすることで、モデルレイヤーとインタラクションレイヤーの関係性を実感することができました。

また、抽出したオブジェクトの構造は、実装するモデルの構造と多少差異が出るだろうということもわかりました。

・実装上必要なプロパティが追加されたり、MemoとMemosのように構造を整理することがある
・単純な文字列の編集など、内容によってはアクションがモデルに実装されないことがある

などです。
（設計や使用言語でも、また変わってくると思います。）

同じ「目当て」を見る大切さ

実装する視点でもOOUIのメソッドを使うことで、多少の差はあってもシンプルにUIを実装することができると感じました。

同時に、もしデザインと実装とで違うオブジェクトの構造で考えてしまうと、その差を埋めるためにどこかに無理が出たり、複雑になってしまうことも想像できました。

OOUIを「デザイン」だけの話にせず、周りに広げて同じ「目当て」を見ることが大切だと感じます。より良いUIをデザインするために、改めてチームで一緒に考えていこうと思います。