TypeScript シンプルなAIアプリ４
シンプルなAIアプリ３の続きです。ブラウザでAIに送信するプロンプトを編集し、AIが返した結果を表示できるようになったので、UIを調整します。UIの調整index.htmlを更新するブラウザに表示する画面を検討しました。そして、次のようなイ...
プログラム
TypeScript TypeScript シンプルなAIアプリ３
シンプルなAIアプリ２の続きです。esbuild実行環境を整備する前回はesbuildをコマンドラインから起動していましたが、それには、esbuildをnpm installしなくてはなりません。Denoを使っているなら、build用スクリ...
TypeScript シンプルなAIアプリ２
シンプルなAIアプリの続きです。今回は、データの送受信処理を作成します。ブラウザとサーバー間の送受信ブラウザとサーバー間の送受信処理を作成していきます。送信、受信ともに、データはJSON形式でやり取りすることにします。ブラウザ → サーバー...
TypeScript シンプルなAIアプリ
Gemini APIを使ったシンプルなAIアプリを作っていきます。仕様を考える今回のアプリは、プロンプト： ブラウザ → Denoサーバー → Gemini API生成結果： Gemini API → Denoサーバー → ブラウザという感...
TypeScript Denoを試す３
これは「Denoを試す2」の続きです。Denoに挑戦したそもそもの目的は「Gemini AIを使う」ことでした。Denoを試すという話題の最後に、それに挑戦しましょう。Gemini API (Node.js版)Gemini APIは、様々な...
TypeScript Denoを試す２
「Denoを試す」の続きです。PreactでSSRサーバーサイドを動かすためにDenoを使ってみる気になったので、この機にSSR（サーバーサイドレンダリング）を試してみたいと思いました。普通ならここでReactの出番なのですが、私はPrea...
TypeScript Denoを試す
Denoを使ってみたくなったので、その時の体験記的な話を少し書いてみます。Denoの導入動機最近の私は、AIの自動生成に興味を持っています。GoogleのGeminiやMicroSoftのCopilotなどで気軽に、かつ、無料でテキスト生成...
プログラム コパイロットでプログラミング
Microsoft Copilotを使って、簡単なプログラムを作ってみた話です。背景私は普段はPHPを使う機会がなく、あまり詳しく知りません。何かをさせたいと思っても、適切なシステム関数を思い出せませんし、細かいプログラム作法も詳しくありま...
preact esbuildのMake環境
これは下の話の続きです。背景と動機の説明esbuildを使い方をネットでいろいろ検索していくと、次のようなbuild.jsを書いて、buildするという話ばっかり見つかります。import { build, BuildOptions } f...
preact preactとesbuildを使ってみた
preactを選んだ動機最近、react…というかJSXの練習をしてみたいと思うようになりました。HTML文をTypescriptのコードの中で作成して、div要素のinnerHTMLを書き換えて…という作業が結構大変だなぁ～と感じるように...
TypeScript ブロックくずしを作る１０「ブロックを壊す」
ブロックと球の衝突判定ができるようになったので、球が当たったブロックを壊す処理を追加しましょう。ブロックを壊すための設計ブロックを壊すために、今回は次のような設計にします。ブロックに耐久力のパラメータを追加する。ブロックに弾が当たると耐久力...
TypeScript ブロックくずしを作る９「ブロックと球の衝突処理２」
ブロックに球との衝突判定を追加する衝突判定のアルゴリズムができたので、実際にコーディングしていきましょう。まずはブロック（Brickクラス）に追加するコードです。export class Brick implements IGameCanv...
TypeScript ブロックくずしを作る８「ブロックと球の衝突処理」
衝突時の動作仕様ブロックを配置できるようになったので、弾がブロックに当たった（衝突した）ときの処理を作っていきましょう。最初に、ブロックと弾が衝突したときの球やブロックがどのように変化するのか、動作仕様を決めます。ラケットと異なり、ブロック...
TypeScript 図形クラス３「距離」
２つの図形の距離図形クラス、図形クラス２でいくつかの図形クラスを作ってきたので、２つの図形の距離の出し方やそのプログラムについて考えましょう。２つ点の距離 (X2,Y2) (X1,Y1) distance 点\((X_1,Y_1)\)と点\...
TypeScript 図形クラス２「直線」
のつづきです。今回は直線関係を整備していきます。直線クラスはじめに直線クラスを整備する目的について説明します。目的の１つ目は、CANVASに直線を描画するためです。これはそれ以上の説明は不要でしょう。目的の２つ目は、もっと複雑な図形を扱うた...