選んだ画像を canvas に描いて画素を取り出し、jsQR に渡して QR コードを読む React のコンポーネントです。背景が透明な PNG、白黒が反対の QR コード、大きな画像、Shift_JIS の文字、QR コードが2つ ...

ひらがなとカタカナを互いに変換する関数と、ボタンで変換する入力欄、欄を離れたときにカタカナにそろえるフリガナの欄を React で作りました。「ヷ」や「ゝ」の扱い、半角カナ、wanakana との違い、ひらがなとカタカナを区別しない検 ...

camelCase、PascalCase、snake_case、CONSTANT_CASE、kebab-case を互いに変換する関数と、入力した名前を5つの書き方で並べてコピーできるコンポーネントを React で作りました。XML ...

貼り付けた一覧から重複した行を取り除くコンポーネントを React で作りました。new Set だけでは別の行として残る改行コード・前後の空白・全角と半角・大文字と小文字の違いを、比べるときだけそろえる方法と、10万行を貼り付けたと ...

YAML と JSON の欄を行き来して変換する React コンポーネントを、yaml パッケージで作りました。no や on が別の値になる問題、マージキー、エイリアスの展開の上限、.inf の扱いを確かめた結果を載せています。

貼り付けた JSON から TypeScript の interface を作って表示する React コンポーネントを、ライブラリなしで作りました。省略できるキーとユニオン型の出し方、型の名前の付け方、作った型を tsc で確かめた ...

ブラウザの speechSynthesis を使い、段落ごとに「読み上げる」「止める」を切り替えるボタンを React で作ります。日本語の声の探し方、別のボタンを押したときに読み上げが順番待ちになる原因、コンポーネントが画面から消え ...

選んだ画像の画素を canvas で読み、明るさ 0〜255 ごとの数を棒グラフにする React のコンポーネントです。明るさの計算に使う重み、透明な画素の扱い、画像を縮めてから数えたときの時間と結果の違い、縦軸を対数にする理由を、 ...

文章の中の URL だけを にして表示する部品を React で作りました。正規表現で URL を探して文字とリンクに分け、配列のまま描画するので、dangerouslySetInnerHTML は使いません。文末の「.」やかっこの ...

表の1行や文の中に収まる小さな折れ線グラフ（スパークライン）を、ライブラリを使わずに React と SVG の polyline で描きました。最小値と最大値で縦の位置を決める計算、全部同じ値や1件だけのときの扱い、最後の点の丸が切 ...