UIデザインにおける「オブジェクト指向」はフロントエンドエンジニアの考えるものと違う？

フロントエンドエンジニアの茶木です。

『オブジェクト指向UIデザイン』を読み始めました。

プログラミングの世界にもオブジェクト指向という言葉がありますが、UIデザインにおけるオブジェクト指向と同じなんでしょうか？

ここでは『オブジェクト指向UIデザイン』を参考にしながら、オブジェクト指向UIデザイン（OOUI）とオブジェクト指向プログラミング（OOP）の比較をし、フロントエンドエンジニア視点でOOUIを理解していこうと思います。

先にざっくり結論

OOUIとOOPのオブジェクト指向は違うのか？

違う。
原点部分では重なる部分も多いけれど、注視する点は違うため、分けて考えるほうが、エンジニアにとっては誤解が少ないだろう、という結論。

オブジェクト指向プログラミング

動作（メソッド）と状態（プロパティ）を持った モノ（オブジェクト）という考え方。

現実のモノは状態と動作を持つと捉えプログラミングに持ち込んでいます。たとえば「アコーディオン」なら「ウインドウの開閉」が動作で「表示テキスト」や「開閉状態」などを状態と捉えます。

• 現実のモノを模したもの＜オブジェクト＞
• 状態を持ち動作を行う

と、ここまでが基礎。基礎はUIデザインと重なりますが、実際のプログラミングでは、主にオブジェクト指向を実現する仕組み「クラス」に論点が寄りがちで、あまりオブジェクト指向そのものを意識してはいないかも。

オブジェクト指向UIデザイン

OOUIの原則を『オブジェクト指向UIデザイン』から引用します。

オブジェクト指向UIの原則
・オブジェクトを知覚でき直接的に働きかけられる
・オブジェクトは自信の性質と状態を体現する
・オブジェクト選択→アクション選択の操作順序
・すべてのオブジェクトが互いに協調しながらUIを構成する

オブジェクト指向UIデザイン p11

OOUIのオブジェクトも状態とアクション（動作）を持つので、似たようなものだと想像しているエンジニアが見落とす部分を記します。

項目1,3の「知覚でき直接的に働きかけられる」と「オブジェクト選択→アクション選択の操作順序」です。

知覚できる

OOPのオブジェクトでいうところのプロパティは、OOUIでは全て知覚対象（GUIなら目で見えるもの）を指します。OOUIはオブジェクトをユーザーが見て、それがクリック・ドラッグ・インプットできる見た目かが重要です。なぜならユーザーはこの認知を経て、アクションを取るからです。

この重要な知覚を、抽象的なデータに触れすぎた我々エンジニアはときどき見落とします。
たとえば、ボタンの disabled がグレーアウトしなかったらユーザーは押そうとけど、エンジニアはボタンの動作だけ止めちゃえば良いと思っていたりしますよね。

操作順序

OOPのオブジェクトのメソッドが「アクション」に相当するので簡単ですが、重要なのは操作順序です。

オブジェクト指向では「オブジェクト選択→アクション選択」の操作順です。
この逆順「アクション選択→オブジェクト選択」をタスク指向と呼び、デメリットが示されています。

旧式の飲み物の自販機は、お金を入れてから商品のボタンを押しますが、これがタスク指向です。

• お店で買う逆の順序で不自然（購入の意思決定は商品選択のあとが自然）
• 購入中止時は返金の操作が必要（オブジェクト指向なら立ち去るだけで良い）

この順番こそがキモです。

まとめ

エンジニア的な理解の文章にしています。

OOUIはユーザーの行動を含めたイベントドリブンである

インターフェースがクリックやキー入力のイベントを待って駆動するイベントドリブンであるのと同様にユーザーも、エラーメッセージやボタンのdisabled、ローディングのスピナーなどを見て駆動すると考える。OOUIはその全体の設計をしている様子。

OOUIの論点はどのように実施するか、OOPの論点はどのように恩恵をうけるかである

OOUIはユーザーとのインタラクションを加味して、どのようにして協調するかが重要。
OOPはどのように使うと恩恵（クラスでいうカプセル化や継承）がいい感じに得られるかが重要。

感想

どちらのオブジェクト指向も現実のモノを模す視点で始まっているが、熱量は異なる。

OOPは現在は支配的ではない認識。部分的には使えるケースもあるがロジックの深い部分ではプログラム世界は現実世界と似ていない、あるいは似せようとすると手に余るから。

OOUIは使えない箇所はほぼない。使えないなら、何か問題があり、使えるようにして使えという強いwill を感じる。これは、UIは人間が使うので現実のモノを模すのが人間にとって利便性が高いからでしょう。また、OOUIといったとき、それを適用するまでの方法論も含めてOOUIと言っているかもしれない。

『オブジェクト指向UIデザイン』の感想、また書きます。