react

アプリ

ゲームキャラ・アイテム入手確率計算機

ゲームなどでキャラクターやアイテムを入手する確率を計算するアプリ。自分の感覚と入手の期待値が結構ずれてることが多いので作ってみた。 アプリを起動する reactにチャートライブラリを組み込んで作...
react

useStateが返すstateをイベントで更新する時に気をつけること

react HooksのuseStateから受け取るstate値をinputフォームなどから発生するイベントで更新する際に、書き方を間違えると落ちてしまう。 落ちる例 export default function Inpu...
アプリ

マルチタイマーアプリ

複数のタイマーを同時に動かすことができるアプリをreactで作成してみた。初めてreact Hooksで作成したアプリだったが、正味2~3時間ぐらいで出来たと思う。 アプリを起動する 誰...
react

react HooksでsetTimeoutやsetIntervalなどからstateを参照する

react HooksでsetTimeoutやsetIntervalなどからstateを参照する場合はuseRefを使用するといいらしい。カスタムイベントなど独自のものを実装する際にも同じ手が使えると思う。 stateの値を読み出す...
react

react hooksのuseEffect実装3パターン

useEffectは、第二引数に渡す値によって動作が変わってくる。ここさえ掴んでしまえば結構便利な機能だと思う。 第二引数に空の配列を使用するパターン コンポーネントがマウント(DOMへ挿入≒表示)された時とアンマウント(DO...
react

react Hooksを扱ってみた所感

reactほぼ初心者の自分がいきなりreact Hooksを使ってみた。最初の頃はなかなか自分の感覚と合わないところがあったが徐々に慣れてくると、  実装を1箇所に集約できるバグが発生しにくくなる 関数型のスタイルによって再利用が容...
react

reactでリストをレンダリングする際に気をつけること – key指定

reactにおいてリストを動的にレンダリングする場合、key要素に正しい値を指定すべきである。未指定、配列のインデックスを使用する、ということを避け、なんらかのロジック(ここではshortidを使用)で採番した一意なIDを指定すべきである...
react

reactでリストをレンダリングする際に気をつけること – 配列操作

reactでリストをレンダリングするためにstateに配列を持たせる。この配列の操作を謝ると、リストは期待通りに更新されない。reactを始めたばかりの頃はハマってしまうことも多いと思われる。 だめな例 App.tsx ...
react

create-react-appでsource mapを出力しない方法

create-react-appで作成したアプリをビルドすると、ソースマップ(*.js.map)が自動的に作成される。ソースマップを作成したくない場合は、".env.production"あたりに GENERATE_SOURCEMA...
react

create-react-appで作成したwebアプリのファイルサイズを削る

create-react-appで作成したアプリをクラウドにリリースしようとしたが、ファイルサイズが少々気になったため、これを削ってみることにした。 npx create-react-app コマンドで作成したreactアプ...
タイトルとURLをコピーしました