ごめんなさいタイトルタイプミスしました。直すの面倒(主に添付ファイル2つあるだけの理由)なので、そのままにしておきます。(おい)
処理指向のノードベースのエディターを作成するための、カスタマイズ可能な TypeScript? ファーストのフレームワーク
新しいバージョンを使おう!
何気に検索エンジンでバージョン1の以下のリンクが出てくることがあるから注意だ https://rete.js.org/
サンプルや、サンドボックス環境など、かなり充実している。すごい!
エコシステムは、調べていくとたくさん出てきそうだ。クオリティもすごい!
まずは、一番シンプルなハローワールド的なやつをやりたい。そんな自分には以下のドキュメントからが良いだろう。
https://retejs.org/docs/guides/basic
最新のnpm コマンドがインストール前提である。すぐにバージョンアップしてるから、念のため最新バージョンをダウンロードするくらいでちょうどいいぐらいかもしれない。
以下のドキュメントを読んでいろいろ思考錯誤がたいへんだったので、結論からというか ひとつひとつファイルを持ってきたりするのが大変だったから、この記事を読んだ人のために、圧縮したファイルを用意しておく。
とりあえず、最新の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しておく。
ガイドにはいきなりコードの保存ファイル名が無く、いきなりコードの解説から始まっている。
下のほうに実際のサンプルを触れるページのリンクがある。
四角が2つと、リンクが1つ
https://retejs.org/examples/basic/react
https://codesandbox.io/p/sandbox/rete-js-v2-yrzxe5?file=%2Fsrc%2Findex.tsx&from-embed=
ここから、ファイルを1つづつコピーして持ってくる。
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というのは、「世界のみんなよ、Typescriptの書き方をそろえようぜ!」というツールなのだが、Typescirptのバージョンに合ってないとか、「いや、このフレームワークでは、このルールを適用してるんで。。。」とかがある。
で、今回はsrcフォルダに以下の設定を入れる必要があるようだ。react用のルールっぽい
ファイル名: .eslintrc.yml
extends: [ 'react-app', 'react-app/jest' ]
"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
とりあえず実験用にはこんなもんでいいだろう。
だいたいググれば、対応策が出ているので何とかなるぞ。
今回のrete.js(タイトルがスペルミスだが、直すの面倒だから気にしない)の
create-react-appは長い間Reactの事実上のスタンダードでしたが、react-scriptsのメンテナンスが停止されたことで、今後のReactプロジェクトにとっては大きな問題になりそうです。
特にTypeScript? 5のリリースを考えると、create-react-appを使い続けることは難しくなるでしょう。react-scriptsはTypeScript? 4.xまでしかサポートしておらず、新しいTypeScript?のバージョンと互換性がありません。これは、最新のTypeScript?の機能を活用したいReactユーザーにとって大きな障壁となります。
一方、Viteは最新のTypeScript?バージョンとの互換性を維持しており、Reactユーザーにとって魅力的な選択肢となっています。以下は、ViteがReactユーザーにとって不可欠になりつつある理由です。
ViteはTypeScript? 5を含む最新バージョンのTypeScript?をサポートしています。 これにより、Reactユーザーは最新のTypeScript?の機能を活用でき、コードの品質と開発者の生産性を向上させることができます。
Viteは活発に開発されており、定期的にアップデートされています。 また、Viteの周囲には大きなコミュニティが形成されており、問題解決やプラグインの開発などで支援を得ることができます。
Viteは、ESLint、Prettier、Jest、StoryBook?など、Reactプロジェクトでよく使用される他のツールとシームレスに統合できます。 これにより、開発者は既存のワークフローを大幅に変更することなくViteを導入できます。
Viteは、将来のReactバージョンとの互換性を維持することが期待されます。 これにより、Reactのアップデートに伴う移行の手間を最小限に抑えることができます。
これらの理由から、多くのReactユーザーがcreate-react-appからViteへの移行を検討しています。Viteは、Reactの開発体験を向上させるだけでなく、最新のツールやフレームワークとの互換性を確保するための重要な選択肢になりつつあります。
以下にViteを使う記事が書いてあった。
https://qiita.com/takiguchi-yu/items/21f0c81b2c5ad198f7c1