目次

React

Meta(旧Facebook)の開発したユーザインタフェース構築のためのJavaScriptライブラリ
シングルページアプリケーション(SAP)を作る.

useEffect内部のコールバック関数でuseStateの変数がが更新されない

useEffectで第2引数を空行列[]にして,初回時のみレンダリングのときに遭遇した症状.
初回レンダリング時の使われるstate(useState定義の第1引数,コンポーネント)は初回時の値で独立し,その後stateを更新してもコールバック関数内のstateには反映されない模様.
コールバック関数内部で反映させたかったらstateじゃなくてuseRefを使うと良い.
useEffect内のsetIntervalでstateを更新できない問題
[React] useEffect内のコールバック関数でstateが更新されない問題

Macでコンパイルが通らなかった。

なんでかわからんがMacだとコンパイル失敗した、Reactもnpmでインストールしてるはずなんだけど。まぁこれで動いたのでヨシとした。
Error : 'React' must be in scope when using JSX react/react-in-jsx-scope  

'React' must be in scope when using JSX react/react-in-jsx-scope?

Chart.js

chartjs-plugin-stremingでChart.jsのグラフを描画

Chart.jsのプラグインchartjs-plugin-streaming リアルタイムストリーミングデータ向け Chart.js プラグインを使う.
関連ライブラリの更新により2022年6月29日時点ではそのままコードをコピペしても動かない.

対応とその実装

Node.jsをインストールしてあり,npm,npxが動作する前提
create-react-appでひな形を作る

npx create-react-app chartjs-plugin-streaming_react

関連モジュールをインストールする.

npm install chart.js react-chartjs-2 luxon chartjs-adapter-luxon chartjs-plugin-streaming --save

チュートリアル上ではChartコンポーネントもreact-chartsjs-2からインポートして登録しているが,これで実行するとブラウザのデバッグ画面に以下のエラーが出る
Uncaught TypeError: react_chartjs_2__WEBPACK_IMPORTED_MODULE_5__.Chart.register is not a function
Chartchart.jsからインポートする.
Chart.register is not a function

import { Chart} from 'chart.js';

これだけではまだ駄目で,次はError: “linear” is not a registered scale.が大量に出る.
core.js:6241 ERROR Error: "linear" is not a registered scale. #4
このissueの中で解決策が示されているので,これに従ってChartのインポート部分の処理を少し変更する.
Chart.js公式ドキュメントにも書いてある…
Bundlers (Webpack, Rollup, etc.) - Integration - Chart.js

// インポート時にregisterablesも取り込む
import { Chart, registerables } from 'chart.js';
 
// インポート後,この処理を追記する
Chart.register(...registerables);

Mui

https://mui.com/
Material-ui
Reactで人気のUIライブラリ,これ使うと割りと最近(2022年)段階のUI作れる.コミュニティ版はMITライセンスあり

Lucide

https://lucide.dev/