はじめに 2022年度の大学のプロジェクトで(今更すぎる)手書き風の画像を生成するWebサービスを開発したのでそれについての話です。 リンク tegaki.fun サービスのURL nkmr-lab/average-character-cloud-backend バックエンドのリポジトリ nkmr-lab/average-character-cloud-frontend フロントエンドのリポジトリ nkmr-lab/average-figure-drawer 平均手書き文字(手書き文字の合成文字)を生成するライブラリのリポジトリ。研究室で数年前に作られた物をTypeScript化(不完全)するなどしただけで、上2つと違って1人で書いたわけではない。 サービスの概要 下の画像のように、上のテキスト欄に文字列を入力すると、その文字列に対応する手書き風の画像を生成してくれます。背景画像はユーザが用意してきて、それに合わせて文字サイズや書字方向、行間字間などを設定する仕様です。各文字は、ユーザが登録した手書き文字を複数組み合わせて平均手書き文字とい

初めに 以下のコードはstateの値が変わった時どのような動作をすると思いますか？ 本質ではないのでclearInterval等の処理は省略しています。 const [x, setX] = useState(0); useEffect(() => { setInterval(() => { console.log(x); }, 1000); }, []); このコード、思うようには動かずstateの値が変わってもずっと0が出力され続けます。 何故でしょうか？JSのクロージャをある程度理解している人なら分かると思います。 コンポーネント関数が呼ばれた時の動作を考えてみましょう。 初回呼び出しではuseState(0)を呼ぶとxに0という値が入ります。 useEffectのコールバックも呼び出されます。この時setIntervalのコールバックはxという変数をキャプチャしています。 2回目以降の呼び出しではxは現在のstateです(このコードだけでは具体的な値は分からない) useEffectの第二引数が[]なのでコールバック