はじめに 元記事 サバイバル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 はじめでもわかるルーティングの設定…

はじめに Wenting Zhangと言う人がcss iconをたくさん作っていてそのアニメーションも紹介してくれています。 その仕組みをつかって研究中ですがなかなか不思議な動きをします。 実行例 See the Pen Untitled by kalz2q (@kalz2q) on CodePen. 説明 元のicon…

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

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

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

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

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

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

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

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

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

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

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

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