rate.jsを使ってみる のバックアップ(No.3)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- rate.jsを使ってみる へ行く。
- 1 (2024-05-01 (水) 12:30:52)
- 2 (2024-05-01 (水) 14:39:27)
- 3 (2024-05-02 (木) 00:18:24)
目次 †
rete.jsとは †
処理指向のノードベースのエディターを作成するための、カスタマイズ可能な TypeScript? ファーストのフレームワーク
環境構築 †
新しいバージョンを使おう！
フレームワークバージョン２を使おう †
古いほう †
何気に検索エンジンでバージョン１の以下のリンクが出てくることがあるから注意だ https://rete.js.org/
サンプルや、サンドボックス環境など、かなり充実している。すごい！
エコシステムは、調べていくとたくさん出てきそうだ。クオリティもすごい！
ガイド †
まずは、一番シンプルなハローワールド的なやつをやりたい。そんな自分には以下のドキュメントからが良いだろう。
https://retejs.org/docs/guides/basic
環境セットアップ †
最新のnpm コマンドがインストール前提である。すぐにバージョンアップしてるから、念のため最新バージョンをダウンロードするくらいでちょうどいいぐらいかもしれない。
動作確認済みのファイルをご用意しました。 †
以下のドキュメントを読んでいろいろ思考錯誤がたいへんだったので、結論からというか ひとつひとつファイルを持ってきたりするのが大変だったから、この記事を読んだ人のために、圧縮したファイルを用意しておく。
rete_sample01.zip最新のTypescriptになっているかな? †
とりあえず、最新のnpm になっていれば、以下のコマンドを実行しておけば安心だ npm install --save-dev typescript@latest
npm install --save-dev tslint@latest
アプリ用の適当なフォルダをつくる前に、以下のコマンドを打ってみよう。このコマンドはガイドに書いてあるぞ。
npm i rete rete-area-plugin rete-connection-plugin rete-react-plugin rete-render-utils styled-components react@18 react-dom@18
誤って古いnodeでやってしまうと古いライブラリがダウンロードされて、削除しようとすると、ゴミ箱に大量にいらないファイルが格納されようとするので、shiftキーを押しながら削除することで、完全に削除することができるぞ。
アプリ用のフォルダを作ってcdしておく。
ガイドにはいきなりコードの保存ファイル名が無く、いきなりコードの解説から始まっている。
下のほうに実際のサンプルを触れるページのリンクがある。
最初のサンプル †
四角が２つと、リンクが１つ
サンプルコードの解説 †
https://retejs.org/examples/basic/react
VSCode風にコードを触りながらプレビューが見れる †
https://codesandbox.io/p/sandbox/rete-js-v2-yrzxe5?file=%2Fsrc%2Findex.tsx&from-embed=
ここから、ファイルを１つづつコピーして持ってくる。
package.jsonまで、コピーし終わったら、コマンドプロンプトで
npm install
と実行しよう。必要なライブラリがダウンロードされるだろう。
npm start
と実行すると、次のエラーが出るかもしれない。
code: 'ERR_OSSL_EVP_UNSUPPORTED'
react のバージョンもあげておこう
npm install react react-dom
それでも、まだ同じエラーがでる場合、power shellを使っている場合は、以下のコマンドで、今のセッションだけでも動かすことが可能だ。
$env:NODE_OPTIONS="--openssl-legacy-provider"
これでOKならば、環境変数を設定すると永続的に大丈夫になる。
tslintのエラー †
tslintというのは、「世界のみんなよ、Typescriptの書き方をそろえようぜ！」というツールなのだが、Typescirptのバージョンに合ってないとか、「いや、このフレームワークでは、このルールを適用してるんで。。。」とかがある。
で、今回はsrcフォルダに以下の設定を入れる必要があるようだ。react用のルールっぽい
ファイル名: .eslintrc.yml
extends: [ 'react-app', 'react-app/jest' ]
react-scriptのメンテナンスなまけられちゃってる対応 †
"react-scripts"が、typescrit5にまだ対応していないので、typescriptのバージョンを少し落とす必要がある。
以下が動作確認したときのpackage.jsonの内容だ。
"react-scripts": "5.0.1",
"typescript": "^4.9.5"
としたところ、動作確認できた。
自分の場合は起動用バッチを作った †
環境変数設定方法忘れがちなので、バッチファイルを作った。みんなも、それぞれのシェルに合わせて作ってみてもいいんじゃないかな？
ファイル名: npm_start.bat
$env:NODE_OPTIONS="--openssl-legacy-provider" npm start
とりあえず実験用にはこんなもんでいいだろう。
で、コンパイルエラーがまだ起きている †
