はじめに Canvasでお絵描きアプリをReact, TypeScript, CodePen環境に翻訳と言うか移植しようとして、いろいろやって一つ成功しました。 実行例 See the Pen react-doodle by kalz2q (@kalz2q) on CodePen. 解説 この例ではhookはuseRefしか使っていない。us…

はじめに Canvasの勉強を始めようと思います。 そのための最小限のセットアップです。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 解説 canvasの入門サイトを読むとhtmlでcanvasと呼ばれるタグを書くとデフォルトで描画エリアが出来て、j…

はじめに 前回CSS変数を使ってbackground-colorを自動で変える、と言うのをやってみて start / stop ボタンを付けようとしたらrequestAnimationFrameではちょっと無理みたいだったので、setIntervalベースに書き換えました。 呼び出すたびにrandomで選ぶのを…

はじめに いろいろ使い方を覚えて来たので、組み合わせてみよう。 色名をリストに持って、そこからランダムに色名を取得してCSS変数に入れる。 これをsetIntervalを使って1秒ごとに実行する。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. …

はじめに CSS変数を使う練習です。ボタンを押すと背景色が変わります。 実行例 See the Pen react-change-background-color by kalz2q (@kalz2q) on CodePen. 解説 特になし。 よくわかりません。

はじめに start stop のようなトグルスイッチをreact+typescriptでどう書くか 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 onClickで関数を呼び出して呼び出された関数の中でifを使って分岐している。

はじめに CSSで半円を描く方法をサンプルコード付き解説！ qumeru.com をReact, Typescript, CodePenベースに書き直してみました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 感想 なぜこういう絵が描けるのかよくわからないのであとで…

はじめに Reactでhtml のinputタグやtextareaタグの処理をrどうするか。 実行例 See the Pen react-onchange-study by kalz2q (@kalz2q) on CodePen. 考察 htmlの素のママでも記入はできるけど、入力データを扱えません。 2と3ではreactが用意している型とho…

はじめに randomが大好きです。簡単な例があったので react+typescriptに翻訳してみました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 感想 random の部分は普通に javascript の Math.random() を使うので react も typescript も関係…

以下Qiitaに書いた記事そのままでcodepenの埋め込みが出来るかどうかの実験です。 => 出来た。いいね!!!! はじめに CSSでborderを使って正三角形を書く方法は分かったのですが、これを回転rotateさせると、borderで描いたので中心がわからないのできれいに回…