rate.jsを使ってみる
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
* 目次 [#uddb0b3e]
#contents
* rete.jsとは [#oe7e03a4]
ごめんなさいタイトルタイプミスしました。直すの面倒(主に...
処理指向のノードベースのエディターを作成するための、カス...
#ref(rate.png)
* 環境構築 [#s1fab0ec]
新しいバージョンを使おう!
** フレームワークバージョン2を使おう [#i45688b3]
https://retejs.org/
*** 古いほう [#j84a1358]
何気に検索エンジンでバージョン1の以下のリンクが出てくる...
https://rete.js.org/
サンプルや、サンドボックス環境など、かなり充実している。...
エコシステムは、調べていくとたくさん出てきそうだ。クオリ...
* ガイド [#bc5eeab1]
まずは、一番シンプルなハローワールド的なやつをやりたい。...
https://retejs.org/docs/guides/basic
* 環境セットアップ [#wcb8c270]
最新のnpm コマンドがインストール前提である。すぐにバージ...
** 動作確認済みのファイルをご用意しました。 [#rb5be389]
以下のドキュメントを読んでいろいろ思考錯誤がたいへんだっ...
ひとつひとつファイルを持ってきたりするのが大変だったから...
#ref(rete_sample01.zip)
* 最新のTypescriptになっているかな? [#p325c663]
とりあえず、最新のnpm になっていれば、以下のコマンドを実...
npm install --save-dev typescript@latest
npm install --save-dev tslint@latest
アプリ用の適当なフォルダをつくる前に、以下のコマンドを打...
npm i rete rete-area-plugin rete-connection-plugin rete-...
誤って古いnodeでやってしまうと古いライブラリがダウンロー...
アプリ用のフォルダを作ってcdしておく。
ガイドにはいきなりコードの保存ファイル名が無く、いきなり...
下のほうに実際のサンプルを触れるページのリンクがある。
** 最初のサンプル [#v4e75918]
四角が2つと、リンクが1つ
*** サンプルコードの解説 [#u99d3b2e]
https://retejs.org/examples/basic/react
*** VSCode風にコードを触りながらプレビューが見れる [#s30e...
https://codesandbox.io/p/sandbox/rete-js-v2-yrzxe5?file=%...
ここから、ファイルを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のエラー [#xb4c9282]
tslintというのは、「世界のみんなよ、Typescriptの書き方を...
で、今回はsrcフォルダに以下の設定を入れる必要があるようだ...
ファイル名: .eslintrc.yml
extends: [
'react-app',
'react-app/jest'
]
*** react-scriptのメンテナンスなまけられちゃってる対応 [#...
"react-scripts"が、typescrit5にまだ対応していないので、ty...
以下が動作確認したときのpackage.jsonの内容だ。
"react-scripts": "5.0.1",
"typescript": "^4.9.5"
としたところ、動作確認できた。
*** 自分の場合は起動用バッチを作った [#bd30133b]
環境変数設定方法忘れがちなので、バッチファイルを作った。...
ファイル名: npm_start.bat
$env:NODE_OPTIONS="--openssl-legacy-provider"
npm start
とりあえず実験用にはこんなもんでいいだろう。
** で、コンパイルエラーがまだ起きている場合の対応 [#x7d97...
だいたいググれば、対応策が出ているので何とかなるぞ。
* create-react-appの後継?Viteについて [#j9e3f461]
今回のrete.js(タイトルがスペルミスだが、直すの面倒だから...
create-react-appは長い間Reactの事実上のスタンダードでした...
特にTypeScript 5のリリースを考えると、create-react-appを...
一方、Viteは最新のTypeScriptバージョンとの互換性を維持し...
** TypeScriptのサポート [#o17fc1ef]
ViteはTypeScript 5を含む最新バージョンのTypeScriptをサポ...
これにより、Reactユーザーは最新のTypeScriptの機能を活用で...
** アクティブなメンテナンスとコミュニティ [#x955dc23]
Viteは活発に開発されており、定期的にアップデートされてい...
また、Viteの周囲には大きなコミュニティが形成されており、...
** 他のツールとの統合 [#v1925e94]
Viteは、ESLint、Prettier、Jest、StoryBookなど、Reactプロ...
これにより、開発者は既存のワークフローを大幅に変更するこ...
** 将来のReactバージョンとの互換性 [#z4645981]
Viteは、将来のReactバージョンとの互換性を維持することが期...
これにより、Reactのアップデートに伴う移行の手間を最小限に...
** 結論 [#hd693b25]
これらの理由から、多くのReactユーザーがcreate-react-appか...
*** Typescript5からは、Viteとかを使う流れらしい。 [#r807c...
以下にViteを使う記事が書いてあった。
*** create-react-appで作成したアプリケーションをviteに移...
https://qiita.com/takiguchi-yu/items/21f0c81b2c5ad198f7c1
*** vite [#ebcd5b3a]
https://vitejs.dev/
終了行:
* 目次 [#uddb0b3e]
#contents
* rete.jsとは [#oe7e03a4]
ごめんなさいタイトルタイプミスしました。直すの面倒(主に...
処理指向のノードベースのエディターを作成するための、カス...
#ref(rate.png)
* 環境構築 [#s1fab0ec]
新しいバージョンを使おう!
** フレームワークバージョン2を使おう [#i45688b3]
https://retejs.org/
*** 古いほう [#j84a1358]
何気に検索エンジンでバージョン1の以下のリンクが出てくる...
https://rete.js.org/
サンプルや、サンドボックス環境など、かなり充実している。...
エコシステムは、調べていくとたくさん出てきそうだ。クオリ...
* ガイド [#bc5eeab1]
まずは、一番シンプルなハローワールド的なやつをやりたい。...
https://retejs.org/docs/guides/basic
* 環境セットアップ [#wcb8c270]
最新のnpm コマンドがインストール前提である。すぐにバージ...
** 動作確認済みのファイルをご用意しました。 [#rb5be389]
以下のドキュメントを読んでいろいろ思考錯誤がたいへんだっ...
ひとつひとつファイルを持ってきたりするのが大変だったから...
#ref(rete_sample01.zip)
* 最新のTypescriptになっているかな? [#p325c663]
とりあえず、最新のnpm になっていれば、以下のコマンドを実...
npm install --save-dev typescript@latest
npm install --save-dev tslint@latest
アプリ用の適当なフォルダをつくる前に、以下のコマンドを打...
npm i rete rete-area-plugin rete-connection-plugin rete-...
誤って古いnodeでやってしまうと古いライブラリがダウンロー...
アプリ用のフォルダを作ってcdしておく。
ガイドにはいきなりコードの保存ファイル名が無く、いきなり...
下のほうに実際のサンプルを触れるページのリンクがある。
** 最初のサンプル [#v4e75918]
四角が2つと、リンクが1つ
*** サンプルコードの解説 [#u99d3b2e]
https://retejs.org/examples/basic/react
*** VSCode風にコードを触りながらプレビューが見れる [#s30e...
https://codesandbox.io/p/sandbox/rete-js-v2-yrzxe5?file=%...
ここから、ファイルを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のエラー [#xb4c9282]
tslintというのは、「世界のみんなよ、Typescriptの書き方を...
で、今回はsrcフォルダに以下の設定を入れる必要があるようだ...
ファイル名: .eslintrc.yml
extends: [
'react-app',
'react-app/jest'
]
*** react-scriptのメンテナンスなまけられちゃってる対応 [#...
"react-scripts"が、typescrit5にまだ対応していないので、ty...
以下が動作確認したときのpackage.jsonの内容だ。
"react-scripts": "5.0.1",
"typescript": "^4.9.5"
としたところ、動作確認できた。
*** 自分の場合は起動用バッチを作った [#bd30133b]
環境変数設定方法忘れがちなので、バッチファイルを作った。...
ファイル名: npm_start.bat
$env:NODE_OPTIONS="--openssl-legacy-provider"
npm start
とりあえず実験用にはこんなもんでいいだろう。
** で、コンパイルエラーがまだ起きている場合の対応 [#x7d97...
だいたいググれば、対応策が出ているので何とかなるぞ。
* create-react-appの後継?Viteについて [#j9e3f461]
今回のrete.js(タイトルがスペルミスだが、直すの面倒だから...
create-react-appは長い間Reactの事実上のスタンダードでした...
特にTypeScript 5のリリースを考えると、create-react-appを...
一方、Viteは最新のTypeScriptバージョンとの互換性を維持し...
** TypeScriptのサポート [#o17fc1ef]
ViteはTypeScript 5を含む最新バージョンのTypeScriptをサポ...
これにより、Reactユーザーは最新のTypeScriptの機能を活用で...
** アクティブなメンテナンスとコミュニティ [#x955dc23]
Viteは活発に開発されており、定期的にアップデートされてい...
また、Viteの周囲には大きなコミュニティが形成されており、...
** 他のツールとの統合 [#v1925e94]
Viteは、ESLint、Prettier、Jest、StoryBookなど、Reactプロ...
これにより、開発者は既存のワークフローを大幅に変更するこ...
** 将来のReactバージョンとの互換性 [#z4645981]
Viteは、将来のReactバージョンとの互換性を維持することが期...
これにより、Reactのアップデートに伴う移行の手間を最小限に...
** 結論 [#hd693b25]
これらの理由から、多くのReactユーザーがcreate-react-appか...
*** Typescript5からは、Viteとかを使う流れらしい。 [#r807c...
以下にViteを使う記事が書いてあった。
*** create-react-appで作成したアプリケーションをviteに移...
https://qiita.com/takiguchi-yu/items/21f0c81b2c5ad198f7c1
*** vite [#ebcd5b3a]
https://vitejs.dev/
ページ名: