CodePen

React+TypeScript: form関係コピペ集

はじめに form関係、とかすぐわからなくなるので自分のコピペ用に見える化したいと思う。付け加えて行く予定。なぜすぐわからなくなるかと考えるとそもそもhtmlが頭の中で整理されていないのだと思う。まあいいか。 例01 submitするとconsole.logに複数input…

React+TypeScript: アコーディオン その1

はじめに 元記事: Reactによるアコーディオンメニューの実装方法 https://nishinatoshiharu.com/react-accordion/#_react-spring が、ReactNodeと言うのを使ってアコーディオンを実装していて、codesandboxで実際に動いていました。 が、そのままcodepenに持…

React+TypeScript: clickでclassをadd,removeしてanimate

はじめに 前回の記事ではclickでisActiveをtoggleしてその結果をif分でclassを書き換えていました。 それでも良いのですが、あるべき形としてはclickの結果classをつけたり外したりをするのが良いと思います。ネットの記事を参考に出来たみたいなので載せま…

React+TypeScript: clickでanimationする

はじめに div要素をクリックしてanimationする方法が出来たのでとりあえず載せます。 Clickするたびにboxが変化します。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 解説 参考にしたサイト 詳細cssアニメーション編 dotinstall Add or Re…

React+TypeScript: SVGを埋め込み表示する

はじめに ReactでSVGを表示するのに何か必要かな、と考えました。 結論 => 素直にsvgタグで書けました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 解説 svgコードはdotinstallのsvg入門の最初の方にあるやつと、ネットで使われていたし…

React+TypeScript: csv2json実験

はじめに JSONデータを作るのがめんどうなのでデータをjsonに変換してついでにidもつけたツールを作りました。その実験です。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 解説 元記事: [Tips] JavaScript で CSV を読み込んで JSON を作…

React+TypeScript: Hello Names

はじめに React本家のdocument hello names の翻訳 => conponent を使わない。 props を使わない。 list 表示は map を使う。そのために id が必要。 今回は手作業でつけたが、自動化したい。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. …

React+TypeScript: Hello World Clock

はじめに React本家のドキュメントの最初の方にあるハローワールドの下に時間表示のあるプログラムをなるべく元の形を残しながら翻訳しました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 解説 元のままのプログラムでは、create-react-…

React+TypeScript: 在庫管理 トータル付き

はじめに 前々回の買い物リストのtotalの状態管理はuseEffectを使いました。 今回、useStateだけでどうにかならないかと工夫して、データのそれぞれに全体のトータル(同じもの)を入れてみました。一応目的通りには動いている。 状態管理に階層がある場合、ど…

React+TypeScript IDの自動生成

はじめに reactではリストをmapで書きますが、するとkeyを指定せよと警告が出ます。 ネットの例を見るとindexを使っているのが多いのですが、indexではkeyの意味がないので良くないらしい。 リストの対象となろオブジェクトやJsonの長さをkeyにしている例も…

React+TypeScript 買い物リスト 数量入り

はじめに 元記事 : 【 React Hooks 入門】useState を使って買い物リストを作るチュートリアル がやっと動いたので載せて置きます。 Todoリストと似ているけど、それぞれに数量があって、合計が表示されるのをhookでどうやるのかなぁ、と思っていました。普…

React+TypeScript : Todo リスト

はじめに 元記事(YouTube): https://www.youtube.com/watch?v=nRCNL9T3J98&t=2301s をなぞってやっと私の環境で動くようになったので、載せて置きます。 とても参考になった。 実行例 See the Pen todo-with-typescript by kalz2q (@kalz2q) on CodePen. お…

百人一首読み上げプログラム その2

はじめに 昨日のプログラムは自動で次々と読み上げるものでしたが、それはそれで環境ソフトにもなるし良いのですが、スマホでうまく動かないことが判明したので作り変えました。 ボタン「次の札を引いて読み上げる」を押すと次の札が選ばれて読み上げられま…

百人一首読み上げプログラム

はじめに 音声読み上げ(WebSpeechAPI)を使って、百人一首の読み上げサイトが作れるのではないか、と思いついてReact+TypeScriptで作ってみました。 startボタンを押すと読み上げが始まります。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen.…

百人一首の map 表示

はじめに Reactでlist表示はmapを使うのですが、使い方が分かって来たのでサンプルプログラムとして百人一首を使いました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 リロードするたびにランダムな順序になります。 データとして…

音声読み上げ

はじめに ネットにテキストの読み上げ方法が載っていたのでReac+TypeScriptベースに書きなおしてみました。 元記事: Web Speech API の音声読み上げ機能の実装方法 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. おわりに 音声読み上げの部…

標的 bullseye を描く

はじめに 標的とか目玉とかで同心円を書きたい時にgradientをどう使うかの実験です。 2通りやってみた。 実行例 See the Pen bullseye by kalz2q (@kalz2q) on CodePen. 説明 左は background: linear-gradient で右は background: radial-gradient です。 …

はっぱ(leaf)を描く

はじめに 葉っぱをCSSで描く例がネットに上がっています。 あの鋭角をどうやって出すのかなぁ、と疑問に思ってチャレンジしました。 実行例 See the Pen react-css-leaf-eye by kalz2q (@kalz2q) on CodePen. 解説 意外にも三角形を描くときのようなborderを…

CSSでヒゲ(mustache)を描く

はじめに TEDのhttps://www.youtube.com/watch?v=mNKz3devFAw と言う動画でCSSでヒゲを描いていた。 border-bottom: 0 0 0 100% とかで、ひげの先、鋭角を作ることが出来る のが参考になりました。 再利用が出来るように box の中に配置してみました。 実行…

正三角形を回転する(その2)

はじめに CSSで正三角形を描くのにborderを使う技がありますが、CSSのコマンドにpolygonがある。 clip-path: polygon(0% 87%, 50% 0%, 100% 87%); 紙と鉛筆で中心を割り出したりしなければいけないけれど、ボーダーで描くより頭は楽かもしれない。 実行例 Se…

ランダムに人名を表示する

はじめに ちょっと前に作った色とその名前をランダムに表示するプログラムを応用して人名を表示するページを作りました。 実行例 See the Pen react-random-name-picker by kalz2q (@kalz2q) on CodePen. 解説 背景色を変えるのを残したのはその方が画面が変…

React+TypeScript+Canvasで迷路

はじめに Canvasに少し慣れて来た。 今回はuseEffectで出来ました。 再読込すると迷路が書き換わります。 棒倒し法と言うアルゴリズムだそうです。 実行例 See the Pen react-maze by kalz2q (@kalz2q) on CodePen. 解説 Reactのhookの使い方ですが、リアル…

Canvasでお絵描きアプリ

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

CodePen+React+TypeScripでのCanvasのminimumセットアップ

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

CSS変数とsetIntervalのランダムカラーピッカー

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

CSS変数で名前付きカラーをランダムに表示する

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

CSS変数を使って色を変える

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

CSSで半円を描く

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

ReactでのonChangeの研究

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

React+Typescriptでrandomを使う

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