React+TypeScript: chatGPTとcodepen

はじめに

2ヶ月ほどプログラミングの勉強をサボっていたらなにもかも忘れてしまいました。

その間 chatGPT と言うのを知ったのでこれが思い出しに使えるかもしれない、と思い、実験がてら云々。

次の例は chatGPT に while を使ったなにかを React と TypeScript ベースで作って、とお願いしたら作ってくれたものです。 codepen 用に少し直しました。

実行例

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

感想

なんとなく納得が行かないプログラムだけど、まずは動いた。ちゃんと while を使っている。
react の useState と useEffect を使っているけどこれもすごくちゃんとしている。

とりあえずきれいさっぱり忘れていた React と TypeScript を思い出すのに成功した!!!!

マスクについて今の考え

はじめに

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を使っています。

WSLからchromeでhtmlファイルを開く方法

はじめに

最近はWSLでVSCodeのターミナルでnpm startでchromeを開いていたので、wslにある素のhtmlファイルをchromeで開く方法を忘れていたので検索した。

方法1

.bashrcに

function chrome(){
    /mnt/c/Program\ Files/Google/Chrome/Application/chrome.exe $(wslpath -w $(realpath $1))
}
alias chrome='chrome'

としておいて、chrome temp.html とかする。

方法2

explorer.exe temp.html

説明

2番目の方が圧倒的に簡単だが、どうしてこれでchromeでhtmlが開かれるのかわかりません。 1番目の方法はファイルを指定しなかったりファイルがなかったりすると動作が不安定です。

React+TypeScript: CSSアート練習

はじめに

作りかけ。材料。

プログラム内で使うためのcss画像の練習です。

実行例

See the Pen css-art by kalz2q (@kalz2q) on CodePen.

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

説明

特になし

React+TypeScript: CSS Battle Solutions

はじめに

CSS Battle と言うサイトがあって、問題が画像で出題されてそれを解いて送信すると合否を返してくれる。できるだけ短いプログラムにすると点数が高いようなのですが、それでは勉強にならないので地道に解いてみようと思います。

まだ1題しか解いていないので、今後付け足していく予定です。

実行例

See the Pen css-battle-solutions by kalz2q (@kalz2q) on CodePen.

解説

参考サイト: https://github.com/chokcoco/css-battle-answer

色は出題画像の下にあるのでコピペできるけど、サイズはどうやって知るのだろうか。

React+TypeScript: clickable checkbox css art

はじめに

作りかけ。材料。

イデア
clickable checkbox css art

と言う物で、css で描いた画像を並べた (css art) コレクションで、クリックすると何らかの変化があるものでクリックは onClick ではなく、html の checkbox を使う。

とりあえずクリックしてみて下さい。

実行例

See the Pen checkbox-css-art by kalz2q (@kalz2q) on CodePen.

説明

以前に画像をクリックすると大きくバツ、バッテン、cross が表示される記事 (React+TypeScript: checkboxを使った画像の書き換え) を書いていて、そこでは checkbox の変化を onChange で取得して useState hook で className を書き換えた。

これではせっかくの checkbox の機能を使っていないので checkbox の checked 擬似クラスを使って単純にならないか、と思って試行錯誤中です。