React+TypeScript: 在庫管理 トータル付き

はじめに

前々回の買い物リストのtotalの状態管理はuseEffectを使いました。

今回、useStateだけでどうにかならないかと工夫して、データのそれぞれに全体のトータル(同じもの)を入れてみました。一応目的通りには動いている。

状態管理に階層がある場合、どうするのが正解なのか知りたい。

実行例

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

あとがき

在庫管理としては数量を減らす機能がないので、使い物になりませんが、プログラムとしては色んな点で綺麗に書けていると思う。自画自賛

元記事: ドットインストール React入門

のプログラムは跡形もないのですが、アウトプットはそのままなので書いておきます。

React+TypeScript IDの自動生成

はじめに

reactではリストをmapで書きますが、するとkeyを指定せよと警告が出ます。

ネットの例を見るとindexを使っているのが多いのですが、indexではkeyの意味がないので良くないらしい。

リストの対象となろオブジェクトやJsonの長さをkeyにしている例も多いのですが、これは元のデータにidが指定してあった場合問題ではないか。

元データをIDが指定してあるデータに限りますがidを自動生成するプログラムを書いてみました。

実行例

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

解説

ロジックはデータがカラならば0を返し、そうでなければ、idのリストを作って、ソートして、最大の数値に1を足して返します。

uuidを使ってインターネット上でユニークなidを取得する、と言うとんでもないのがあるらしいけれど、自分の環境では動かなかった。

React+TypeScript 買い物リスト 数量入り

はじめに

元記事 : 【 React Hooks 入門】useState を使って買い物リストを作るチュートリアル

がやっと動いたので載せて置きます。

Todoリストと似ているけど、それぞれに数量があって、合計が表示されるのをhookでどうやるのかなぁ、と思っていました。普通にuseStateで書き換えていました。(追記: useEffectを使う方式に書き換えました。)

このチュートリアルもそうですがHooksが現れてからComponentもclassも使わずにまるでElmの様に書くのが普通になりつつある。Reduxも使わない。良いことだと思います。

実行例

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

解説

元記事はfontawesomeを多用していたのをfontawesomeを使わない形にしました。
済にするのをcheckboxを使う形に変えました。
autofocusを足した。
formを使う形にしてenterでsubmitになるようにした。

当初動かなかったのはItemの型が決まっていなかったからのようで

  const [items, setItems] = useState<Item[]>([]);

  type Item = {
    itemName: string,
    quantity: number,
    isSelected: boolean,
  };

としました。

id が無いのでワーニングが出ますがとりあえず動いたのでこのままにします。

totalの書き換えが元記事ではuseStateだけで書き換えていますが、新たなitemが生じた時にもcalculateTotalが発火するようにuseEffectにしないと駄目だと思います。

React+TypeScript : Todo リスト

はじめに

元記事(YouTube): https://www.youtube.com/watch?v=nRCNL9T3J98&t=2301s をなぞってやっと私の環境で動くようになったので、載せて置きます。

とても参考になった。

実行例

See the Pen todo-with-typescript by kalz2q (@kalz2q) on CodePen.

おわりに

元のビデオは
【React 入門】完全初心者 OK!1から簡単な Todo アプリを作って React の1歩を踏み出してみよう ~React チュートリアル~
と言う表題です。

わたし(完全初心者)がこれをなぞって作ってみての感想ですが、Conponentを使っていない、hookはuseStateしか使っていないなど、たぶん今からReactを勉強する人には最適だと思います。とても分かりやすくスッキリと書けている。

event処理は元のビデオではtypeをつけていないけど、私の環境では叱られて前に進めないので、anyで逃げるか

e: React.ChangeEvent

とか書く必要があります。私はこれについては今はanyで逃げる主義です。

百人一首読み上げプログラム その2

はじめに

昨日のプログラムは自動で次々と読み上げるものでしたが、それはそれで環境ソフトにもなるし良いのですが、スマホでうまく動かないことが判明したので作り変えました。

ボタン「次の札を引いて読み上げる」を押すと次の札が選ばれて読み上げられます。

ボタンを押すたびにシャフルするのではなく、起動時にシャフルするので100枚読み上げるまでダブりで読むことはありません。

実行例

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

追記

データをだいぶきれいにしました。

読み上げデータ、プログラムのなかではspeechと言う変数に入っているデータですが、単語の間をスペースで切ると単語と認識されて読み上げが綺麗になるので、対応しました。

私の環境ではイヤホンで読み上げの頭が切れるので、データの頭に「ん。」を入れていますが、必要なければエディターで一括削除して下さい。

百人一首読み上げプログラム

はじめに

音声読み上げ(WebSpeechAPI)を使って、百人一首の読み上げサイトが作れるのではないか、と思いついてReact+TypeScriptで作ってみました。

startボタンを押すと読み上げが始まります。

実行例

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

解説

読み上げはwindows.speechSynthesisと言うのを使っています。あまりナチュラルな日本語に聞こえないけど頑張っている!
とりあえず百人一首に聞こえるものね。

音声の頭が欠けるのを防ぐために、「ん。」を出だしに入れているので不要な人はエディターで一括削除して下さい。

一枚読み上げるのに8秒かかるので、intervalを8000にしたところ、startを押しても8秒経たないと始まらないのをどうにかしたいが、方法が思いつかない。

最近の作品の中では一番の大作です。 百人一首のデータだけでも使い道があるかもしれない。

百人一首の map 表示

はじめに

Reactでlist表示はmapを使うのですが、使い方が分かって来たのでサンプルプログラムとして百人一首を使いました。

実行例

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

説明

リロードするたびにランダムな順序になります。
データとしては前回の読み上げ用のデータも入っているので音声読み上げプログラムも作ろうかと思っています。