見出し画像

Noodl で React を動かす

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 も動かせそう.

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

😀

🎃
9
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。