rate.jsを使ってみる
Top / rate.jsを使ってみる目次 †
rete.jsとは †
ごめんなさいタイトルタイプミスしました。直すの面倒（主に添付ファイル２つあるだけの理由）なので、そのままにしておきます。(おい）
処理指向のノードベースのエディターを作成するための、カスタマイズ可能な TypeScript? ファーストのフレームワーク
環境構築 †
新しいバージョンを使おう！
フレームワークバージョン２を使おう †
古いほう †
何気に検索エンジンでバージョン１の以下のリンクが出てくることがあるから注意だ https://rete.js.org/
サンプルや、サンドボックス環境など、かなり充実している。すごい！
エコシステムは、調べていくとたくさん出てきそうだ。クオリティもすごい！
ガイド †
まずは、一番シンプルなハローワールド的なやつをやりたい。そんな自分には以下のドキュメントからが良いだろう。
https://retejs.org/docs/guides/basic
環境セットアップ †
最新のnpm コマンドがインストール前提である。すぐにバージョンアップしてるから、念のため最新バージョンをダウンロードするくらいでちょうどいいぐらいかもしれない。
動作確認済みのファイルをご用意しました。 †
以下のドキュメントを読んでいろいろ思考錯誤がたいへんだったので、結論からというか ひとつひとつファイルを持ってきたりするのが大変だったから、この記事を読んだ人のために、圧縮したファイルを用意しておく。
最新の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
とりあえず実験用にはこんなもんでいいだろう。
で、コンパイルエラーがまだ起きている場合の対応 †
だいたいググれば、対応策が出ているので何とかなるぞ。
create-react-appの後継？Viteについて †
今回の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ユーザーにとって不可欠になりつつある理由です。
TypeScript?のサポート †
ViteはTypeScript? 5を含む最新バージョンのTypeScript?をサポートしています。 これにより、Reactユーザーは最新のTypeScript?の機能を活用でき、コードの品質と開発者の生産性を向上させることができます。
アクティブなメンテナンスとコミュニティ †
Viteは活発に開発されており、定期的にアップデートされています。 また、Viteの周囲には大きなコミュニティが形成されており、問題解決やプラグインの開発などで支援を得ることができます。
他のツールとの統合 †
Viteは、ESLint、Prettier、Jest、StoryBook?など、Reactプロジェクトでよく使用される他のツールとシームレスに統合できます。 これにより、開発者は既存のワークフローを大幅に変更することなくViteを導入できます。
将来のReactバージョンとの互換性 †
Viteは、将来のReactバージョンとの互換性を維持することが期待されます。 これにより、Reactのアップデートに伴う移行の手間を最小限に抑えることができます。
結論 †
これらの理由から、多くのReactユーザーがcreate-react-appからViteへの移行を検討しています。Viteは、Reactの開発体験を向上させるだけでなく、最新のツールやフレームワークとの互換性を確保するための重要な選択肢になりつつあります。
Typescript5からは、Viteとかを使う流れらしい。 †
以下にViteを使う記事が書いてあった。
create-react-appで作成したアプリケーションをviteに移行する †
https://qiita.com/takiguchi-yu/items/21f0c81b2c5ad198f7c1
vite †
rate.png
