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

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

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

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

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

名前を1行に1人ずつ書いてボタンを押すと、ランダムにグループへ分ける部品を React で作りました。混ぜてから順番に配って人数の差を1人以内にする方法と、分けた結果を描画のたびに作り直さないよう、ボタンを押したときだけ state ...

選んだ画像の全面に、斜めに並べた文字の透かしを入れて保存する仕組みを React で作りました。パターンを回して角まで埋める方法、縁取りした文字を均一に薄くする方法、JPEG で保存するときの透明な部分の扱いを、検証環境で確かめていま ...

入力した文字を UTF-8 のバイト列にして、16進数・2進数・%記法で表示する部品を React で作りました。TextEncoder の使い方、1文字ごとのバイト数、encodeURIComponent との違い、絵文字や孤立サロ ...

親に position: relative、再生ボタンに position: absolute; inset: 0; margin: auto を付けて真ん中に重ねます。三角の位置の合わせ方と、video の上で hidden が効か ...

URLを貼ると、ホストやパスに分け、クエリを名前と値の表で直せる部品をReactで作りました。状態をURLの文字列1つにする作り方と、書き戻したときに「+」や「%20」などの書き方が変わる点を、ブラウザで確かめています。