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