そーす

福岡在住のプログラマ

React Sketch.app で何ができるのか見てみた

f:id:saburesan:20170517103754p:plain

Introduction · react-sketchapp

ReactのシンタックスでSketchが動くらしい。

なんだかすごそう(小並感

インストー

公式のまんま

git clone https://github.com/airbnb/react-sketchapp.git
cd react-sketchapp/examples/basic-setup && npm install

basic-setupプロジェクトをエディタで開いてみると、

f:id:saburesan:20170517113237p:plain

おー、まんまReactですね。

package.jsonの中身は

{
  "name": "basic-setup",
  "version": "1.0.0",
  "description": "",
  "main": "basic-setup.sketchplugin",
  "manifest": "src/manifest.json",
  "scripts": {
    "build": "skpm build",
    "watch": "skpm build --watch",
    "render": "skpm build --watch --run",
    "render:once": "skpm build --run",
    "link-plugin": "skpm link"
  },
  "author": "Jon Gold <jon.gold@airbnb.com>",
  "license": "MIT",
  "devDependencies": {
    "skpm": "^0.9.0"
  },
  "dependencies": {
    "chroma-js": "^1.2.2",
    "prop-types": "^15.5.8",
    "react": "^15.4.2",
    "react-sketchapp": "^0.10.0",
    "react-test-renderer": "^15.4.2"
  }
}

ライブラリは特別なのはreact-sketchappくらいですね。Skech上でレンダリングできるコンポーネントライブラリでしょうか。

react-skechappの中身は

module.exports = {
  render: _render.render,
  renderToJSON: _render.renderToJSON,
  StyleSheet: _stylesheet2.default,
  Artboard: _Artboard2.default,
  Image: _Image2.default,
  RedBox: _RedBox2.default,
  Text: _Text2.default,
  TextStyles: _TextStyles2.default,
  View: _View2.default,
  Platform: _Platform2.default
};

使えるコンポーネントは多くはないようです。覚えることは少ないですね。

実行

> npm run render                                                      [master]

> basic-setup@1.0.0 render /Users/Ryohlan/dev/sketch-react/react-sketchapp/examples/basic-setup
> skpm build --watch --run

🖨  Copied src/manifest.json in 7ms


🔨  Built ./my-command.js in 2067ms

実行する前にsketchを立ち上げてプロジェクトを1つ開いておきましょう。 開かれてないと結果が描画されません。

f:id:saburesan:20170517113807p:plain

なるほど。

Hot Reaload動いてそうなのでコードを変更してみる。

f:id:saburesan:20170517114617p:plain

左上の色を黒に変更すると即座にSketchの方も変更されました。

まとめ

とりあえずちょっと触っただけ。 サンプルも結構あるので色々見てみます。