2つの日付の間の営業日と、「何営業日後」の日付を出すコンポーネントを React で作りました。祝日は npm の @holiday-jp/holiday_jp の一覧を使い、日付を文字列のまま照らし合わせて、タイムゾーンによるずれを ...

長い文章を「1つあたり何字まで」と決めて分け、1つずつコピーできるコンポーネントを React で作りました。Intl.Segmenter で文字数を数える方法、文の切れ目で分ける方法とかぎかっこの扱い、番号を付けても上限に収まる分け ...

入力欄に打った文章を、20字×20行の原稿用紙のマス目に1字ずつ並べるコンポーネントを React で作りました。Intl.Segmenter で1字ずつに分ける方法、縦書きと横書きを同じ CSS で切り替える書き方、長い文章でも入力 ...

選んだ複数の画像を横・縦・格子に並べ、1枚の PNG にして保存する仕組みを React で作りました。手元にある何枚かの画像を、1枚のコラージュ画像にまとめて保存したい場面で使えます。大きさの違う画像のそろえ方、正方形への切り抜き、 ...

2つの JSON を読み込み、追加・削除・変更された項目について「toys.name」のような場所と変更前・変更後の値を、表に並べて見せるコンポーネントを、ライブラリなしの React で作りました。配列を id で対応させる方法や、 ...

本文の文字数と「1分に読む文字数」から、「この記事は約3分で読めます」を出すコンポーネントを React で作りました。日本語は見た目の1文字ごと、英語は単語ごとに数える方法、四捨五入の境目、time 要素への入れ方、長い文章で速く数 ...

バブルソートが2本の棒を比べて入れ替える様子を、React の棒グラフで1手ずつ見せる部品を作りました。並べ替えの途中を配列に記録してから再生する作り方と、棒をすべらせて動かすための key と DOM の並べ方を、Chromium ...

予定の入力欄から、カレンダーアプリに取り込める .ics ファイルを作ってダウンロードさせる方法です。必要な行、UTC での日時、終日の予定の終わりの日、カンマや改行の書き方、日本語を75バイトで折り返す方法を、保存したファイルを読み ...

ボタンを押すたびに、長さと使う文字を選んだランダムなパスワードを作る部品を React で作りました。乱数は Math.random() ではなく crypto.getRandomValues() から取り、割った余りで文字を選ぶとき ...

画像の明るさとコントラストを2本のスライダーで調整し、PNG で保存するコンポーネントを React で作りました。画面では CSS の filter、保存では canvas の ctx.filter に同じ文字列を渡します。値が 2 ...