見出し画像

Noodl で React を動かす

itabashi.mp3

Noodl とは

Topp というスウェーデンのデザイン会社がつくっているプロトタイピングツール
- Noodl
- Topp Design & Innovation
- Why we built Noodl

Noodl の特徴

- macOS アプリで作業して Web 用に書き出せる（WebGL か Canvas でレンダリング）
- Node と呼ばれる要素を繋いで作っていく
- アニメーションやインタラクションを簡単につけられる
- HTTP 通信もできるので API とか色々使える
- IoT デバイスや各種センサーとの連携もできる
- Unity との連動もできる
- JavaScript を動かせる

React を動かす準備

JavaScript を動かせるみたいなので React を動かしてみました．
使用する Node は次の3つです．
- JavaScript Node
- Script Downloader Node
- HTML Content Node

Script Downloader Node を作成して React と ReactDOM を CDN から読み込む
- React (https://unpkg.com/react@16/umd/react.production.min.js)
- ReactDOM (https://unpkg.com/react-dom@16/umd/react-dom.production.min.js)

JavaScript Node を作成して inputs を設定する
コードエディタを開いて inputs を次のようにする（プロパティ名は例なので実際はなんでも良いです）

inputs: {
    scriptLoaded: "string",
    domElement: "domelement"
}

HTML Content Node を作成して div 要素を作る
- Element type を div に設定する
- Dynamic Content にチェックを入れる

各 Node を繋ぐ
- Script Downloader から JavaScript にドラッグして Source を Loaded に， Target を scriptLoaded に設定する．
- HTML Content から JavaScript にドラッグして Source を DOM Element に，Target を domElement に設定する．

これで React が読み込まれたときに JavaScript を実行して HTML Content に反映できるようになります．

React を動かしてみる

とりあえず Hello World の文字列を表示してみます．
Script Downloader から Loaded が発火したときに run が呼ばれるのでここにコードを書いていきます．

run: function(inputs, outputs, changedInputs) {
    if (!inputs.scriptLoaded) {
        return
    }

    const app = document.getElementsByTagName('div')[0]

    const HelloWorld = React.createElement('div', {style:{color:"white", textAlign: "center"}}, `Hello World`)
    ReactDOM.render(HelloWorld, app)
}

実行結果

動いた！

JSX

今回は React.createElement でコンポーネントを書いてみましたが，React を書くならやはり JSX 記法を使いたい．
しかし，JSX 記法で書くには CDN から babel を読み込み（https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js），コードが <script type="text/babel"></script>  の中に書かれている状態にしなければならないので Noodl 上でこれを実現するのはちょっと大変かも．
babel を使えるようになれば Vue も動かせそう．

🎃
9
itabashi.mp3