目次

rete.jsとは

ごめんなさいタイトルタイプミスしました。直すの面倒(主に添付ファイル2つあるだけの理由)なので、そのままにしておきます。(おい)

処理指向のノードベースのエディターを作成するための、カスタマイズ可能な TypeScript? ファーストのフレームワーク

rate.png

環境構築

新しいバージョンを使おう!

フレームワークバージョン2を使おう

https://retejs.org/

古いほう

何気に検索エンジンでバージョン1の以下のリンクが出てくることがあるから注意だ 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しておく。

ガイドにはいきなりコードの保存ファイル名が無く、いきなりコードの解説から始まっている。

下のほうに実際のサンプルを触れるページのリンクがある。

最初のサンプル

四角が2つと、リンクが1つ

サンプルコードの解説

https://retejs.org/examples/basic/react

VSCode風にコードを触りながらプレビューが見れる

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のエラー

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

https://vitejs.dev/


添付ファイル: filerete_sample01.zip 102件 [詳細] filerate.png 47件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2024-05-02 (木) 00:51:08 (78d)