React-SketchApp のpros/cons

先日話題になっていたReact-SketchAppのコードを読みつつexamplesを触ってみました。その中でいくつか気になった点をメモって置こうと思います。

関連リンク

• React Sketch.app
• GitHub/Airbnb/React Sketch.app
• API リファレンス
• Qiita “react-sketchapp で新規プロジェクトを作ってsketchに描画する”

😀 Pros

🍣 React Componentによるデザインの構造化

React Componentはprops（伝播）とstate（状態）を持つ部品の組み合わせで画面を構成します。

つまり、React Sketch.app を使うことで、これまでデザインカンプ上だけでは見ることのできなかったコンポーネントの役割、データの流れ、属性の明示化、状態管理をわかりやすくすることができます。

🍣 モデリングとコードの同居

GUI設計で重要なのはイケてるビジュアルをアーティスティックに作ることではなく、利用者が持つサービスやシステムに関するメンタルモデルを導いたり新たに形成する流れをわかりやすくすることです（ビジュアルは情報処理のためのそのひとつの要素として考える）。

そのためには雰囲気ではなくてモノゴトを構造的に分解してシステムに置き換える必要があります。 =モデリング

コンポーネントによって役割や属性・状態が明文化され、デザイン上のオブジェクトとユーザの持つメンタルモデルやサービス上のドメインモデルを合わせやすくなると思います。

例えばプロフィールを表示する場合を例にすると以下のように構造や属性、状態をコードという文書化を行うことができる。これはオブジェクト指向的発想なので、属人性の小さいデザインが可能になる（ただし、コードがリーダブルであることが前提）。

# プロフィール

- ユーザの公開できる個人情報のこと
-- プロフィールは、ユーザの名前を持つ 👉 Name
-- プロフィールは、ユーザの顔写真（URLを参照し）を持つ 👉 Photo

const Profile = ((props) => (
    <View name="Profile">
        <Text name="Profile__Name">
            {props.name}
         </Text>
        <Image name="Profile__Photo" src={props.photo} />
    </View>
));

こんな感じでコードで表すことができます。
つまり、コードはGUIの構造や属性・状態をドキュメント化しているわけです。

💡この辺の話はスライドにまとめていたりします…

🍣 バージョン管理がしやすい、ブランチ切って作業できる

Sketchにはすでに File > Revert to で薄いバージョン管理ができますし、git-sketch-pluginなどでgitリポジトリでバージョン管理など色々あります。

が、Sketchファイルそのものを管理はできても、部分的にブランチ切って変更を加えてPull Request投げてやIssue管理みたいなことは難しいです。

React-SketchAppだとReact Componentの管理になるのでgithub-flowのようなバージョン管理が可能になります。

エンジニアとの協業

よくある方法だとZeplinなどを使ってスタイル値の共有をします。

React Sketch.appの場合、Componentがコードになっているため、スタイル値も属性・状態もデータ化されています。

例えば、REST APIやGraphQLで属性や状態値を構築中のシステムと共有したり、スタイル情報もjsonなどで外部データ化しておけるため、エンジニアにとっても扱いやすくなるのかなと思います。

少なくとも自分がコードを書くとしたら余計なアプリやサービスを介さないぶん楽です。スタイル情報共有するだけなのに毎月お金払うのバカバカしいし…。

🍣 React Nativeでプロトタイピングの可能性について

React-SketchAppはCore Componentに View, Text, Image を持っています。React-Nativeも同様です。

しかし、React-NativeとReact-SketchAppとそれぞれライブラリをimportしてCore Componentを呼び出すとそれらがバッティングしてしまうのでそのままでは残念ながら使えません。

が、こちらのライブラリ react-primitives をreact-sketchappの代わりにimportして使うと可能になるようです。

import React from 'react';
- import { View, Text, StyleSheet } from 'react-sketchapp';
+ import { View, Text, StyleSheet } from 'react-primitives';

さらにいうとReact-DOMでも使えるようになるのだとか。Web AppのGUIプロトタイピングも捗りそうな予感。

詳しくはこちら React-Skecth.app — Universal Rendering

😫 Cons

色々書いてきましたが、とはいえエンジニアならこれらの内容はなんということはないものですが、デザイナーになるとやはりデメリットもあります。

🙉 デザイナーの学習コスト

デザイナーがコードフレンドリーなワークフローではないので、人によってはReactの初期学習のコストが高いです。

ただし、React.js自体には実は大した学習コストはないです（開発環境整えるのに戸惑うかもだけど）。かつこの場合はライフサイクルやEvent類は必要ないので、jsxの扱いをマスターすれば良いわけです。

例えば先ずは以下の程度を覚えれば良いです…。このくらいなら集中してやれば長くても3日もあれば習得できると思います…。

“プロフィール（Profile）” コンポーネント
src/components/entities/Profile.js

// 必要なライブラリの読み込み
import React from 'react';
import { Image, View, Text, StyleSheet } from 'react-sketchapp';
​
// このコンポーネントのスタイルを定義
let profileStyles = {
    container: {
      width: 100
    },
    name: {
      color: "#000000",
      borderRadius: 10,
      marginBottom: 20
    },
    photo: {
      width: 100,
      height: 100,
      borderRadius: 100
    }
}
​
// Componenntの構造を定義
const Profile = ((props) => (
    <View name="Profile" style={profileStyles.container}>
        <Text name="Profile__Name" style={profileStyles.name}>
            {props.name}
         </Text>
        <Image name="Profile__Photo" src={props.photoUrl} style={profileStyles.photo} />
    </View>
));
​
// Componentの登録
export default Profile;Sketchにレンダリング
src/sktetchRender.js
// 必要なライブラリの読み込み
import React from 'react';
import { render, Artboard } from 'react-sketchapp';
import from './components/entities/ListItem.js';
​
// Sketch上のPageのスタイルを定義
let styles = {
    screenHome: {
        width: 750,
        height: 1334
    }
};
​
// プロフィールのデータを作る
let data = {
    profile: {
        name: '織部金次郎',
        photo: 'https://goo.gl/HC0fsO'
}
};
​
// ページの構造を定義
const PageHome = (() => (
    <Artboard name="Screen/Home" style={styles.screenHome}>
        <Profile name={data.profile.name} photoUrl={data.profile.photo} />
    </Artboard>
));
​
// PageHomeをSketch上の選択中のPageに書き出し
render(<PageHome />, context.document.currentPage());

🙉 直感的にGUIが描けない

コードで組み立てていくため直感性に劣る。アート作品を描くようにGUIデザインができない問題があります。

ただし、そもそも人間が扱うシステムの一部を作ろうというのに直感に頼って構造的な物の見方をしないのはUIデザインとしてどうなのだろうという感覚が自分にはあり、Sketchなどのグラフィックツールで直感的に構築していく流れの方が不自然だなぁと思います。

そのモノの本質を捉え、その本質を短い一文にし、それをブレークダウン(分解)すると、本質に関する要求事項を抽出することができる。更に、抽出した要求事項を分解してゆくと具体的なデザイン項目を探し出すことができる。このような具体的なデザイン項目を基に可視化すれば、本質に対応したデザインが可能となる。

第81回 構造的にとらえる(モノやシステムの本質を把握する) より

🙉 Sketchのシンボルが使えない

React-SketchAppでは以下のCore Componentが用意されています。

View

• レイヤーグループの生成
• Wrapper Component

Text

• SketchのTextを内包するレイヤーグループを生成
• ちなみに <Text /> でラップしなくても、文字列か数列をコード上に記入しておけばSketchのTextを生成できます。

Image

• SketchのRectangle Image fillを内包するレイヤーグループを生成

Artboard

• <Artboard>…</Artboard> でラップするとSketchのArtboard を生成

と、このようにSymbolの扱いがありません。まぁカスタムComponentを生成できるので必要ないというのがもっともなところでしょう。そう考えるとだんだん別にSketchじゃなくてよくね？って思えてきます…。

🤔 所感

React Sketch.appに期待できることは…

GUIを人間やシステムの概念に沿わせて構造的にかつ宣言的にコードというドキュメントで扱う文化をデザイナーの世界に持ち込むことだと勝手に思っています。

これは別にじっくり設計しようということではなく、日々何度も見直して徐々に良くしていくために、その変化に合わせていきやすい形で作っていこうという考え方です。

あと…
余計なツールを使ったり（そのためにサービスと契約して余計なコスト払ったり）、無駄なドキュメントを書いたり、デザインシステムのようなファットなものを無駄に作るはめになったり、概念のモデリングもないような主観と属人的なビジュアルオブジェクトをこねくり回さなくてもいい世界で生きたい。