勉強:TypeScriptでReactに入門するチュートリアル

はじめに

qiitaに
TypeScriptでReactに入門するチュートリアル
と言うのがあったので読み始めています。
以下はstarterです。

実行例

See the Pen admissionfeecalculatorstarter by kalz2q (@kalz2q) on CodePen.

メモ

いじくったところはクラスコンポーネントをすべて関数コンポーネントに書き換えています。 このプログラムはまだstateを使っていないけどstateを使った部分はhookに書き換える予定。

と言うことは適当なプロンプトでchatgptで自動で書き換えることができるかもしれない。やってみよう。

React+TypeScript ゼロスタート

はじめに

ちょっと間を置いたらまた何もかも忘れてしまったのでゼロスタートです。

やっぱNext.jsよりpure Reactが良い。自分の今の段階ではNext.jsの機能が要らない。npx create-next-appで作ったプログラムはそのままではcodepenに載らない。codepenはソースと結果resultを単純な形で同時に見ることが出来るのでわかりやすい。reactのtutorialはcodesandboxを使っているがcodesandboxを使うにしても整形が必要なので将来はnext.js+codesandboxにするかも知れないが今はnpx create-react-app appname --typescriptにする。

実行例

See the Pen yokoso-welcome by kalz2q (@kalz2q) on CodePen.

メモ

react新しいドキュメントのクイックスタートの初めにある例です。

ボタンはあるけど何もしません。

ドキュメントではコンポーネントを説明しているけど今の自分としては最初から関数コンポーネントで良いと思う。その方がわかりやすい。今回はhookは使っていない。

chatGPTにプロンプトで

write program xxx in react, typescript and functional component with hooks basis

とかすると大体こんな感じにしてくれると思う。

chatGPTのquickstartのlocalhostエラー

はじめに

備忘なので消すかもしれません。

ネットにchatGPTのopenAIにquickstartと言うのがあるらしい。と行ってみたらchatGPTの説明ではなく、chatGPTをAPIで自分のプログラムで使う方法だった。が、とりあえず最初の馬などの動物に名前を付けるのは出来上がってlocalhost:3000で動きました。このlocalhostを立ち上げる際のコマンドが

npm run dev

で、いつも使っている

npm start

ではない。

その後いつもの環境でnpm startを使うと

sh: 1: react-scripts: not found

と言うエラーになる。react-scriptsはcode_modulesの中にある。

npm install をやってみると色々エラーが出る。

再起動しても直らない。=> いまここ

今の考え

openaiのquickstartでnodejsを最新版にしたりいろいろ環境をいじったので環境が合っていないのだと思う。とりあえずnpx create-react-appで云々。

ちょうど、英語版のreactのtutorialが改訂されているのでそれをやってみる、と言うのが良いかもしれない。

また書きます。

追記

英語版のreactのtutorialを見たら

プロジェクトの作り方の所で

npx create-next-app

を使え、と書いてある。next.jsを知らないのなら先にnext.jsのtutorialを読め。いままでpureなreactで何でもできるとと思ってたのでまた新しいこと覚えるのめんどうだなぁ、と思わないでもないが、react本家がそう言うのならしょうがないので頑張ります。--template typescriptも使えるのかなぁ。

課題

  1. openai quickstartの復習。=>macbookの環境でも出来た。vercelでdeploy出来た。
  2. next tutorial
  3. npx create-next-app --typescript
  4. existing react projectをnextベースにする方法
  5. nextプロジェクトを通常のreactにする。こうしないとcodepnの載せられないかも。

数直線 number line

はじめに

web上で数直線を描くのをchatGPT4にお願いしたのですが、cssで描こうとしたらどうしてもうまく行かなくて結局svgで描いてもらいました。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

今の考え

cssで書きたいのですが、とりあえずまあいいか。

svgの書き方がいつも自分が書いているのと違う気がする。これから解析します。

react+typescriptでreviseしたらつぎのようになった。

See the Pen numberlinesvg by kalz2q (@kalz2q) on CodePen.

grocery list

はじめに

Elmで書かれたプログラムをReactとTypeScriptになおして、とchatGPT-4にお願いしたら出来ました。listが含まれていたのでmapにして、と注文したら出来ました。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

マスクについて今の考え

はじめに

2023年3月13日にマスクをしなくても良くなって、マスクを外す人がどっと増えると思っていたがいまのところ98%位がマスクをして外を歩いている(東京)。
これから夏に向けて暑くなるし、コロナの流行も収まるし、外国人観光客も増えるので次第にマスクなしが増えるものと思われるが本当にそうなるかどうかについて。

考察

事前のアンケートでは3,4割が外す、 6,7割がマスクを外さないで様子を見るみたいな感じだった。
現在の路上のインタビューではマスクを外す勇気がない、みたいな事が言われている。
いわゆる同調圧力

諸外国を見ると日本以上に猛威をふるったにもかかわらず全ての国がマスクを外しているのが普通になっている。
日本だけ異常。

歴史を見るとスペイン風邪で世界で4000万人が死んだ時、世界中でマスクをしていたらしい。その後流行が収まった後、世界中でマスクが外されたが日本だけマスクをしないのが普通になるのに時間がかかかった。コロナ前の状態でも日本人は冬になると相当数の人がマスクをするし、海外から見て日本人はマスクが多いと言う評価があった。

マスクはコロナの流行防止に効果があったかどうかについては、巨視的には効果があった事は否めないが医療用のマスクでない限り濃厚接触の際には普通のマスクでは効果があったとは証明されていない。その証拠に老人ホーム等でクラスターが発生している。

人間関係において顔は重要な役割を果たす。顔を見て話したい、顔を見せて話したいと言う欲求がある。特に幼児、低学年の教育には重要だろう。個人差、文化差が大きい。

マスクを外す勇気について。人生で勇気がなかったばかりに救える人を救えずに過ごしてしまったり、逆に浅はかな勇気を振りかざして後で後悔したりした経験のない人はいないだろう。今回の場合マスクを外す方が正しいが外す勇気がない、と言うセンチメントはある。

国の方針。個人の判断に任せる。=> と言うことはマスクを外して良い、と私は受け取ったが、個人の判断なのだから少なくとも人と接触の可能性がある限りマスクは付ける、と受け取っている人が相当数いるらしい。お店の中とか。

専門家やマスコミは課題として取り上げる際には無意識にバイアスがかかるので、マスクがあった方が安全と言わざるを得ない。表面的には外す方向には働かない。利益相反による無意識バイアス。確証バイアスが働く。

人間関係、会話においてどちらかがマスクをしている状況は本来問題ないが、なんとなく失礼ではないか、と言う意識が働く。これは自然なこと。これにも慣れなければいけない。

結論

マスクは邪魔だし暑いし、巨視的に見れば生産性を落としているし、みっともないので次第に外されて行くとは思うが思ったよりも時間がかかる。3年位。

訪日外国客の増加、外国人との接触がマスクを外す方向に影響をする。

教育現場、介護現場、接客現場などさまざまな現場の判断がゆっくりながらマスクを外す方向に作用するだろう。肉体労働者がマスクをつけて仕事をしているのはつらいだろう。とか。

私自身は美醜に関係なく人の顔を見るのは大好きなので、一刻も早くマスクなしの世界に戻って欲しい。率先してマスクを外して行く。

React+TypeScript: MathJax(LaTeX) を使う

はじめに

Reactで数式を書きたいと思いました。

素直にindex.htmlにmathjaxをlinkして、reactのdivの中でLaTeXを書いても反映されません。

QiitaにReactでMathJaxを使用して数式を表示する、と言う記事があってなぞってみたら出来ました。codepenに載せてみたら、ちゃんと動いた。

実行例

See the Pen react-mathjax by kalz2q (@kalz2q) on CodePen.

説明

reactの世界ではmathjaxではなくてkatexを使ってその上でreact-latexと言うのをimportするのが例として上がっていたけれどそれもそんなに多くないのと、なぞってみたらローカルでは動くけどcodepenにうまう載せられませんでした。katexがmathjaxより特に良いわけでもなさそうなので、今回のやりかたが一番良いと思います。

useEffectを使っています。