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

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

はじめに 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. おわりに 音声読み上げの部…

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

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

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

はじめに 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. 解説 背景色を変えるのを残したのはその方が画面が変…

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

はじめに 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で描いたので中心がわからないのできれいに回…

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

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

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

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

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

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

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

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

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

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