2022-01-01から1年間の記事一覧

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. 解説 特になし。 よくわかりません。

start stop トグルスイッチ

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

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 も関係…

CSSで描いた正三角形を回転する

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

React+TypeScript Examples

はじめに React+TypeScript の勉強を始めてからまだすごく初期段階なのですが、前回の記事でCodePenを利用出来ることがわかったので、いつでもデモとソースを見る事ができるサンプル集を作っておくと便利かも、と思いました。 作って書き足していきます。 サ…

CodePenでReact+TypeScript

はじめに JavaScriptの勉強にCodePenでデモとソースコードを並べてみながら色々やってみるのは生産性が高い。 React本家のチュートリアルでも盛んに使っている。 これをTypeScriptにしてみたので備忘です。 デモとソースコード 手順 設定でTypeScriptにする…

React についての今の考え

どの言語やフレームワークでもそうだけど、下手な入門書よりも本家のホームページのチュートリアルの方が良く出来ている。 しかし、 違ったアプローチで学びたい時、チュートリアルを自分のアプローチに翻訳しながら進む事になってけっこう大変。 何を言って…

Reactでカウントアプリを作る[2022年版]

はじめに qiita に Reactでカウントアプリを作る - Qiita と言う記事があって、コピペして今ふうに書き直してデプロイできたのでご紹介。 https://kalz2q.github.io/react-countapp/ ソースは https://github.com/kalz2q/react-countapp/ で、ローカルで動か…

TypeScript + React + GitHub で文字の回転をデプロイ

create react で作ったサンプルサイトでは React のロゴがくるくる回っている。 ロゴでなく、テキストを回すことが出来るかどうかの実験。出来た。 https://kalz2q.github.io/react-animate/ ソースは https://github.com/kalz2q/react-animate にあります。…

TypeScript + React + GitHub で三目並べ tic-tac-tow をデプロイ

追記 今見たら、以下の記事に書いてあるソースでは動かなかったのでとりあえず記事をペンディングにします。調査中。 React 本家のチュートリアルでマルバツ三目並べを作っていて、それの TypeScript バージョンをネットの記事を参考にしながらようやく動き…

TypeScript + React + GitHub について

今の考え elm という言語があって、簡単にサイト(ページ)が作れる。 関数型で型チェックをしてくれるのでアイデアを適当に書くと、コンパイラーがエラーを出してくれてそれを直している内に出来上がる。 javascrip にコンパイルされる。 ところが!!!、少し慣…

TypeScript + React + GitHub で Hello World をデプロイ

前回はいいねボタンをデプロイしましたが、今日は Hello World をやってみました。 ハローワールド https://kalz2q.github.io/react-hello-world/ とりあえず問題なく出来たと思う。 データベースを使わない静的なサイトならばこれで十分ですね。簡単だし。 …

TypeScript + React + GitHub でいいねボタンをデプロイ

Reactの初期ページをGitHub Pagesで公開(デプロイ)する方法 という記事がありました。 一方、別のところに TypeScript 入門 Reactでいいねボタンを作ろう と言う記事があって、 これらを組み合わせれば いいねボタンが簡単に公開できるね!!!! と思いついてや…

ロードバイクで転倒

ロードバイク歴も数十年になり、転倒もたくさん経験があるのですが、最近雨の日に歩道をゆっくり走っていて歩道の点字帯というのかな黄色いやつで滑って結構危険な転び方をしました。後遺症はないけれど頭から落ちた。 バイクは修理にだして、部品待ち状態で…

C++でvectorをcoutする

C++

はじめに みなさん vector 使ってますか。vector いいですよね。 この vector の中身を見たいとき、1つずつ cout すればいいわけですが、なんとなくしっくり来ない。 なので、vector を前後に波括弧つけて、数字の間にカンマを入れた string に変換する関数…

ウクライナと東京大空襲(頭の体操)

シカゴ大学の政治学のミアシャイマー教授がウクライナ戦争について語っています。 世界的な米国際政治学者・ジョン・ミアシャイマー「ウクライナ戦争を起こした責任はアメリカにある!」【日本語字幕付き】 https://www.youtube.com/watch?v=cZaG81NUWCs ウ…

ウクライナと第三次世界大戦(頭の体操)

こうやって第一次世界大戦は始まったのかなぁ、と感じてたけどそれは違うかも。さすが第三次世界大戦が始まってしまったらイギリスもアメリカも反省するだろうから、だからウクライナは助けてあげるから自分で戦いなさい、と言うスタンスなのだろう。それは…

C++ 文字列を任意の回数繰り返す無名関数

C++

最近 C++ を齧り始めました C++ で char を繰り返す関数はあるのですが、文字列を繰り返す関数が見つからなかったので無名関数で出来ないか考えました。 #include <bits/stdc++.h> using namespace std; int main() { string str; str = "abc"; int n = 3; auto tempfunc = </bits/stdc++.h>…

ロシアと中国の共通言語・共通通貨

頭の体操です。 通貨 仮に今後ロシアと中国でブロック経済圏を作る世界が来るとして、共通通貨はドル以外にするだろうから、人民元になるのかなぁ。それによって得られる中国の覇権の魅力があるので、そうするとは思うものの、経済政策が自由にならなくなる…

ウクライナ。今の考え。

記録のために今の考えを書いて置く。消すかも知れない。 この戦争は泥沼になって、ロシアは経済封鎖と軍事費負担に耐えきれず滅ぶ。というのが2ちゃんねるひろゆきの見立て。 私の見立ては泥沼になって経済的にも泥沼が続いて長期化して徐々に世界は2分化し…

読書感想: 土偶を読む

トンデモ本として紹介されていて、噂は聞いていたのですが、最近図書館で借りて読みました。 竹倉史人著 「土偶を読む」 内容は 土偶のデザインは植物の形をデザインしたもの。 と言う主張です。 これだけだとなんの根拠があって、と思うかも知れませんが、…

プログラミング言語Elixir事始め

メモ elixir のインストール。windows , mac 共に基本的には elixir 本家の通り。 mac の場合、appleシリコン用 homebrew をインストールしてから brew を使った。 windows の場合は chocolatey をインストールしてから使った。 chocolatey をインストールす…

プーチン頑張れ、がんばれプーチン

ウクライナの大統領ゼレンスキーが馬鹿なのとアメリカとヨーロッパが姑息なせいでこんなことになってしまいました。 さて、経済制裁について。日本が太平洋戦争を始めることになった理由が石油の禁輸による経済制裁だった。それから80年経った今なら全世界揃…

Netflixで見れるアラビア語字幕の映画・ドラマ

ネットフリックスで音声がアラビア語、字幕がアラビア語の映画を探してみました。 手作業でそれらしいものをクリックして探しました。 ファインディング・オーラ 人生の折返し方 ドラマ サバイバー 映画 ハジュワラ2: ミステリアス・ミッション 映画 親愛な…

多死時代か大量死時代か

団塊の世代が寿命を迎えると毎年沢山の人が死ぬわけで、生まれる方はそんなに変化しないから見かけ上人口が急速に減る。人口は減るけれど消費性向の低い高齢者が減って、資産が次の世代に移るので、国家経済的にはプラスの面もある。よく働いてよく消費する…

アラビア語について

アラビア語を勉強し始めました。 目的はあの文字が読めるようになりたい。 アルジャジーラのニュース (アラビア語字幕がついている) がわかるようになりたい。 エジプト映画や中東で放映されている日本のアニメについているアラビア語字幕、吹き替えがわかる…