地理が苦手 特に東ヨーロッパとかアフリカとか。 周辺国名から国名を当てるクイズを作りました。 データづくりに生成AIを使って 下記のjsonフォーマットでヨーロッパのすべての国について国名、周辺国、周辺の海、首都名のデータを作成せよ type CountryData…

Rolling a Dice 課題 サイコロを2つにする フォントを使って画像にする

Draw と言うらしい。 画像はunicodeに「トランプ記号」というのがあってそれを使っている。特にフォントは指定していない。 ランダムの使い方のデモだと思います。 課題 現在スペードだけ。白黒なので他のも入れて52枚にする。

Recursion 再帰 昔のプログラミングのテキストに再帰の例としてモンドリアン風アートを描けというのがあった。 思い出して生成AIにプログラムしてもらいました。 環境はNext.js TypeScript Tailwind Codesandboxです。

顔と名前を覚えるWebアプリ 俳優など有名人の顔を見て、名前を答えるアプリを作りたいけど、顔写真は勝手に使えません。 そこで次善の策として、名前をランダムで生成して、画像検索するボタン「顔？」をつけることにしました。 検索結果の画面は面倒ですが…

「無料で遊べるやさしい詰将棋」 という素晴らしいサイトがあって、3手詰、5手詰、7手詰、9手詰の問題がそれぞれ何百も（数えていませんが）あります。 3手詰からランダムに選んだページに飛ぶプログラムを作りました。 3手詰だから簡単というわけでもなくて…

chatGPTなどの生成AIにcsvファイルをjsonに変換するツールを作って下さいとか依頼すると、作ってくれます。 説明もしてくれるし、ネットをググって探すより便利。言語も指定できて私のようにPython嫌いには最高です。 さて、先日Vercelで公開した人名を覚え…

number guessing game ゲームスタート時に入力欄にフォーカスが移動しているようにおねがいした。

競技プログラミングをReactでやりたい。 って何言ってるのだろう。意味不明。 JavaScriptで競技プログラミング自体をやりたいということか？ Reactの考え方、つまり。 関数化する TypeScriptを使う testを組み込む はてなの記事にする ということだろうか。 …

改行後処理バージョン AIに1文字ずつ処理しているのを改行を押した時点で処理するように指示したら、その様になってはいるけど納得できない。 かな漢字変換の確定の改行キーの押下も拾ってしまう。 こういう風に作るから中国製のアプリの入力は改行を拾って…

PasswordChecker Elmからの移植です。 なるほどパスワードを2回入れさせるのに最後まで入れてからチェックしたら駄目ですね。 入れている途中から処理するのが正しいわけだ。

InputField Elmからの移植で、入力欄の文字列についてonChangeで処理する。 話はわかるのですが日本語のようにかな漢字変換が間に入るとちょっと納得がいかない所があるよね。 まあ、とりあえず動いたので載せておきます。 入力文字列を反転して出力します。

ElmのTriangle のReactへの移植です。 ElmではWebGLを操っていたのをReactのThree.jsに移し替えた。 codesandboxでは npm install three @types/three かな。

Elmからの移植です。 Elm ExamplesではButtons になっているかもしれない。 Reactのプログラム読んでみるとわかるように、Elmそっくりに書ける。 React最高!!!!

D3.js Reactでグラフなどの図を描くライブラリのD3.jsをcodesandboxでできるかやってみた。 ローカルでは npm install d3 @types/d3 とすればあとは何もしない。 codesandboxで若干試行錯誤したが package.json の "dependencies": { に "@types/d3": "^7.4.…

Calculator 説明 1. 状態管理（State） 以下の状態をuseStateで管理しています： display: 現在の表示値（文字列、初期値は"0"） firstOperand: 最初の数値（nullまたは数値） operator: 選択された演算子（nullまたは"+"、"-"、"*"、"/"） waitingForSecond…

Texas Hold'em Poker AI にポーカーゲームを作ってと頼んだら変わったルールのポーカーが出来た。 説明 1. 型定義とインターフェース Suit: カードのスート（♥、♦、♣、♠）を表す型です。 CardValue: カードの値（A, 2, 3,..., K）を表す型です。 Card: カー…

codesandbox の無料枠 最近 codesandbox の埋め込み embed を使っている。 public ならば無料で無限に使えるのかと思っていたら、無料で登録できるのは20件までだって。 それ以上登録しようとすると出来なくなるらしい。 過去のが消えるわけではなさそう。 …

これは、Qiitaにあったものの移植です。

SVGで顔を10個描いてと注文しました。 楽しいね。

SVG Shapes これもElm Examples からの翻訳です。 Elm Example も、このReactも SVG に普通ついているおまじないみたいのがありません。 それでいいということか。 参考 -- https://www.w3schools.com/graphics/svg_examples.asp -- https://developer.mozil…

Grocery List Elm examples にあった買い物リストをDeepSeekでReactに翻訳。 その際に、リストをオブジェクトに、表示をmapにしました。 プログラムを作るのも何だけど、説明してというと説明してくれるのがうれしい。

DeepSeekの作ったオセロ 黒先攻、白はコンピュータと言う指定だけで作ったオセロです。 今回はデプロイはしてません。 codesandboxにコピペしたものを貼ります。 vercelによるデプロイをしない場合の流れ 1. ローカルで作って実験する npx create-next-app 2…

1文字ずつ現れるやつ

ハローワールドの文字列を回転 ChatGPTの提案してくれたコードにcube animationという技術をつかったのがあって勉強になった。 cf. 文字の回転 文字列の回転 課題 裏の色を変えたいが出来ない。 課題 表の画像と裏の画像が違ううちわの回転を作りたい。 画像…

時間を測るためにハローワールドを作ってみました。 ちょっとcodesandboxで手間取ったけど、20分。 今回はchatGPTに next.js typescript tailwindで 画面の中央にHello World!!!!と濃い目の空色で表示するプログラムを作れ。 コンポーネントは分けずに1ファ…

AI にプログラムを書いてもらって、Vercelでデプロイして、紹介用にcodesandboxでも走らせて、はてなで記事を書くと言う一連の流れをやってみました。 全部で20分かかってないと思う。 すごい時代が来たものだ。 codesandboxをembed出来るのでvercelや githu…

備忘 npx create-next-app でreactの環境を作っている。 nextの機能は使わない。 reactだけ。 それでもnpx creare-next-appなのは 圧倒的に速い vercel, githubとの連携がとれて、あっという間に簡単にdeployできる 自分の使うのはnext.js tailwind typescri…

next.js と tailwind でオランダの国旗を書いて、とDeepSeekに頼んで書いてもらいました。 Webアプリ https://dutchflag.vercel.app/ ソース https://github.com/kalz2q/dutchflag

今回はJavaScriptだけでそこそこ描けているみたい。 DeepSeekです。 前回はChatGPTでうまく描けなくてSVGで描きました。 今ChatGPTで再度試してみたら、やはりうまく描けなかった。ChatGPTはJavaScripがにがてなのだろうか。 私が出したお願いは next.jpで数…