React
はじめに qiitaに TypeScriptでReactに入門するチュートリアル と言うのがあったので読み始めています。 以下はstarterです。 実行例 See the Pen admissionfeecalculatorstarter by kalz2q (@kalz2q) on CodePen. メモ いじくったところはクラスコンポーネ…
はじめに ちょっと間を置いたらまた何もかも忘れてしまったのでゼロスタートです。 やっぱNext.jsよりpure Reactが良い。自分の今の段階ではNext.jsの機能が要らない。npx create-next-appで作ったプログラムはそのままではcodepenに載らない。codepenはソー…
はじめに 備忘なので消すかもしれません。 ネットにchatGPTのopenAIにquickstartと言うのがあるらしい。と行ってみたらchatGPTの説明ではなく、chatGPTをAPIで自分のプログラムで使う方法だった。が、とりあえず最初の馬などの動物に名前を付けるのは出来上…
はじめに web上で数直線を描くのをchatGPT4にお願いしたのですが、cssで描こうとしたらどうしてもうまく行かなくて結局svgで描いてもらいました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 今の考え cssで書きたいのですが、とりあえず…
はじめに Elmで書かれたプログラムをReactとTypeScriptになおして、とchatGPT-4にお願いしたら出来ました。listが含まれていたのでmapにして、と注文したら出来ました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen.
はじめに Reactで数式を書きたいと思いました。 素直にindex.htmlにmathjaxをlinkして、reactのdivの中でLaTeXを書いても反映されません。 QiitaにReactでMathJaxを使用して数式を表示する、と言う記事があってなぞってみたら出来ました。codepenに載せてみ…
はじめに 作りかけ。材料。 プログラム内で使うためのcss画像の練習です。 実行例 See the Pen css-art by kalz2q (@kalz2q) on CodePen. See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 特になし
はじめに CSS Battle と言うサイトがあって、問題が画像で出題されてそれを解いて送信すると合否を返してくれる。できるだけ短いプログラムにすると点数が高いようなのですが、それでは勉強にならないので地道に解いてみようと思います。 まだ1題しか解いて…
はじめに 作りかけ。材料。 アイデアは clickable checkbox css art と言う物で、css で描いた画像を並べた (css art) コレクションで、クリックすると何らかの変化があるものでクリックは onClick ではなく、html の checkbox を使う。 とりあえずクリック…
はじめに checkboxはclickを認識しない、と思ってdivバージョン、buttonバージョンを作ってきたのですが、checkboxのlabelではclickを認識するだけでなく、onDoubleClickも使える!!!! と言うことを発見して、それならばcheckboxが一番便利なはず、と元に戻っ…
はじめに クリック数を数えるロジックはdivにしか使えませんが、このロジックならダブルクリック以上のトリプルクリック、クアドルプルクリックとかも拾えるのではないかとやってみました。 遊んでみて下さい。 実行例 See the Pen double-triple-quadruple-…
はじめに htmlのbuttonにはダブルクリックを認識する機能があって、ReactではonDoubleClickで取得できます。 今回それを使ってみました。出来上がりの形、機能は前回 div バージョンと全く同じですが、心なしか動きが良いような気がします。 ダブルクリック…
はじめに // アイデア コメントの形でプログラミング要件を書く // コメントの形で要件を作業に落とし込む // 例 greeting // 名前の入力欄 // onChangeを実装する // enter or submit で // hello + name を出力 // reset で初期状態 => autofocus が戻らな…
はじめに onFocusと言うのがあったのでサンプルを作ったのですが、onClickとかonChangeとかがあるのでonFocusの使い道が思いつかない。 input欄をクリックすると「フォーカスされました」に変わります。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on…
はじめに 元記事 サバイバルTypeScript にあったいいねボタン, 英語で like button と言うらしい、を codepen に載せてみました。 実行例 See the Pen likeButton by kalz2q (@kalz2q) on CodePen. 説明 最近の自分のスタイルでは component を使わずに view…
はじめに 徳川将軍を覚える暗記カードのバージョン2です。 ダブルクリックで覚えたカードを削除する仕組みを実装しました!!!! 実行例 See the Pen shogun-div by kalz2q (@kalz2q) on CodePen. 説明 材料はいろいろあったのですが、組み合わせて動くようにし…
はじめに 暗記カードをシングルクリック onClick でチェック、ダブルクリックonDoubleClickで削除したい。 と思ったのですが、onDoubleClickはボタンでしか使えない。 checkboxにonClickを使ってonDoubleClickを実装しようとしたらcheckboxはonClickを受け付…
はじめに Reactでダブルクリックを拾うのの別バージョンです。 前のバージョンのがプログラムの中で使おうとしてうまく動かなかったのでこれで再度試してみようと思います。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 前のはcouter…
はじめに 作りかけです。 checkboxを利用した大きなボタンを作るためにhtmlでlabel forと言うのを使うのを、Reactでどうやるか研究中。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 label for => label htmlfor とします。大きなボタ…
はじめに Reactでmapの中にcheckboxを入れた時の用例を探してあったのをローカルとcodepenで動く様になりました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 元記事 Reactでフォームを扱う方法についてまとめました【React/Input/R…
はじめに 配列を弄って表示が変わることの確認です。 実行例 See the Pen slice-array-example by kalz2q (@kalz2q) on CodePen. 説明 javascriptはimmutableでないので、一旦別の変数に入れて弄ってからhookで元の配列に戻せば表示に反映される。
はじめに ダブルクリックをReactでどうやるか。 実行例 See the Pen double-click-demo by kalz2q (@kalz2q) on CodePen. 説明 onDoubleClickと言うイベントはあってダブルクリックしか使わないのならば便利なようなのですが、シングルクリックと両方使うと…
はじめに まだ作りかけです。 江戸時代の時代劇を見るのに八代目将軍吉宗、とか言いますよね。 BOXをクリックすると名前が出たり消えたりするので遊んでみて下さい。 初代の家康と５代目綱吉、８代目吉宗、最後の１５代目の慶喜は始めは出た状態ですが、これ…
はじめに いままでcssは素のcss, pure cssで書いていました。 これをsass(scss)に変えて行こうと思う。 とりあえず実験です。 実行例 See the Pen sass(scss) sample by kalz2q (@kalz2q) on CodePen. 説明 codepenでは設定でscssを選択できた。 ローカルで…
はじめに range sliderのサンプルです。スライダーをマウスで操作すると数字が変わります。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 とりあえず値を得ることが出来たのでこれからいろいろ使えそうです。 sliderを使った例はネッ…
はじめに 画像をクリックするとなにか印が付いたり印を外したりするのを作りたいと思いました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 仕組みを作り込むかcheckboxでやるか。今回はcheckboxでやりました。 とりあえず思ったよ…
はじめに dotinstallのはじめてのjavascriptの最初の方にテキストの書き換えをしているのがあって、React+TypeScriptでやってみました。顔をクリックして下さい。 実行例 See the Pen first-javascript-dot by kalz2q (@kalz2q) on CodePen. 説明 クリックし…
はじめに 昔のアップルマークはカラーだったのを探して、形を単純にして遊びました。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 いままでは画像を1枚だけだったのをflexで並べる練習。 カラーをlinear-gradientで縞模様にする。よ…
はじめに cssで描いた顔が可愛かったので。 実行例 See the Pen face02 by kalz2q (@kalz2q) on CodePen. 説明 ホームページの入門でポートフォリオを作る際に画像を用意されているのを使いたくない事ってよくある。 で、cssかsvgで描けばテキストに埋め込め…
はじめに ReactでSPAをやろうと思っていろんな例をなぞっているのですが、なかなか動かない。ローカルで動いてもcodepenで動かない。やっと動いたので載せて置きます。 元記事と言うか参考にしたサイト: React Router v6 はじめでもわかるルーティングの設定…
