サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ニコニコ動画
zenn.dev/mizchi
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
既存の LLM コード生成の問題 LLM は行カウントやワードカウントが苦手。 例えば自分は SourceMap を扱うコードのテストを書かせようとしたが、モックデータの line:column がガバガバな位置を指してまともにテストにならない。行カウント/ワードカウントができないのはつまり diff がうまく生成できない。 これらの問題があって、コードを生成するパイプラインを組む場合、 全文出力が主流になっている。 ここで何が問題になるかというと、コードが膨らんで来た時に、(書き変える対象が一部だとしても)生成が顕著に遅くなる。うまく生成できなかった時にリトライを繰り返すと、問題がさらに悪化する。 改善手法の提案: 明示的な Line Number の付与 最近の LLM は入力ウィンドウがある程度大きくても、そこそこの速度で応答する。(お金はかかるが...) 問題は生成速度にある。特に
この記事は何 この記事は python の学習を兼ねて色々書き散らしたので、 fastapi のサーバーを建てるという軸では理解しづらくなった。 上から順になぞるだけで devcontainer 上で fastapi の開発環境が構築できるようにする。 プロジェクトを作成 rye のインストールは略 $ rye init fastapi-example $ cd fastapi-example $ rm -r src # 作る対象がライブラリではないので一旦消す $ rye sync $ rye add fastapi fastapi-cli pydantic $ rye add mypy pytest -d { "deno.enable": true, "[python]": { "editor.defaultFormatter": "charliermarsh.ruff", "edit
プログラミングについて、最近考えてることについてのポエム。 基本的に、 GPT-4 と Claude-3-Opus を使った経験を念頭に置いて話をする。機械学習エンジニアではないので、あくまで利用者に徹した視点での話。仕事で生成AIを使ったパイプラインを作ったりはしている。 生成AIの進化速度を予測しておく 今大事なことは、今AIがどの程度の性能かという定点の話ではなく、その進化の速度を認識すること。 コード生成というタスクにおいて、生成AIモデルを人間に当てはめると、こんな感じの人物像を自分は持っている。 GPT-4: プログラミング経験2年目の大学2年生 Claude-3-Opus: プログラミング経験3年目の大学3年生 ここでいうn年目は、業務経験ではなく、プログラミングの単位がある大学での、教育課程としての経験年数。今のひたすら学習量を増やす方式だと、単に1年に1年分ぐらい賢くなっ
LangChain なんか使わなくてもシュッと作れたので記事にしておく。 RAG とは 生成AIに検索能力をもたせるやつ。 要は検索機能をこちらで提供してやって、AIにそれを読ませる。 AnthropicAI Tool OpenAI でいう Function Calling JSONSchema で関数シグネチャを与えると、それを使うDSLを生成する。実際の関数は自分で実装して、AI が生成した引数(JSONSchema に従う)を渡す。 TypeScript の Mapped Types でツールの実装部分に型をつける簡単なラッパーを書いた。 RAG の CLI を作る Google検索をするAPIを実装 Google Custom Engine API を使った 本文要約をするAPIを実装 Mozilla の実装を使った 与えられた URL を fetch して、その本文部分を抽出する
tl;dr ディレクトリ構成と運用を先に考えた それに従ってコード生成を行うCLIツールを書いた 想定ディレクトリ構成 こういうディレクトリ構成を考えた。 xxx-module/ deps.ts mod.ts mod.test.ts lib.ts v0.ts v1.ts v*.ts README.md PROMPT.md 外部依存はすべてここで宣言しないと使えないとする。スコープを小さくすることで、精度を上げる。 v*.ts バージョニングされたファイル。生成される度に、新しい v*.ts を生成する。都度コミットして git history から引っ張り出してもいいが、コマンド叩く単位で git に保存をしたくないので、こうした。 lib.ts と deps.ts から依存を import する。 複雑なコードを生成させる時、ある種のブラックボックスとして扱うことがあるので、どの時点で動
エアプにならないために、実際に moonbit を使ってコードを書いてみた感想を書く。 JSON Parser を書いた パッケージレジストリである https://mooncakes.io を見た限り、使いやすい json parser がなさそうなので、とりあえず自分用のをでっち上げた。 mooncakes.io に publish してあるので、 moon add mizchi/json で使える。品質が良くなくても ネームスペース付きで publish するので別に邪魔にならない気がした。 なんで作ったかというと、公式 example の cloudflare workers の example は単純なフィボナッチを計算するだけで、構造的なデータを返すことができない。 moonbit と js 間の文字列の受け渡しについては、あとで別の記事を書く。 使い方 fn main { l
プログラマなら https://chat.openai.com の WebUI より、すでに手元にあるターミナルで AI と会話したいですよね。 自分が欲しい機能 ストリームで出力 対話コンテキストを保存 複数プラットフォームからモデルを選択 OpenAI AnthropicAI CloudflareAI そのままだと複数行の入力が難しいので、--edit でvscode を開いて編集 いくつかのシステムプロンプトを用意しておいて、対話コンテキスト生成時に選択 作った というわけで、deno で試作しました。 デフォルトだと chat で入るのですが、 --name の部分で調整できます。 # install deno on mac # curl -fsSL https://deno.land/x/install/install.sh | sh $ deno install -AF htt
最近 moonbit という言語を知ったのですが、これが調べれば調べるほど好きになる言語だったので、紹介させてください。 文法的には GC 付きの Rust で、 WebAssembly にコンパイルされます。とくに CDN Edge Worker 上での実行を想定しているようです。もう好き。 注意: まだ若い言語なので、これから言語仕様がガンガン変わっていくと思われます。あくまで現時点での情報です。 tl;dr Pros だいたい GC あり Rust と捉えていい 文法面のキャッチアップが容易 ライフタイムの難しさを考えなくていい すでに vscode 拡張やパッケージマネージャ等のエコシステムが整っている Cons まだ安定していない / しばらくはソースコードが公開されない 現時点では学習リソースやパッケージ数が足りず、書き手の腕力が求められる はじめに: JS/TS/Rust へ
TypeScript の Extract について調べていたら、自分がユニオン型の分配法則について何も理解していなかったことに気づいたので、記事にまとめておく。 Extract の基本的な使い方 // https://typescriptbook.jp/reference/type-reuse/utility-types/extract type Grade = "A" | "B" | "C" | "D" | "E"; type FailGrade = Extract<Grade, "D" | "E">; //=> "D" | "E" これは単に ("A" | "B" | "C" | "D" | "E") & ("D" | "E") のインターセクションを取ってるだけなのでは? と今まで考えていたが、全然違った。 Extract 型の TypeScript 上の定義はこうなっている。
なぜ cloudflare-workers: 運用が楽 なぜ claude3: GPT-4 より体感性能がいい 動いてるもの /claude <prompt> で claude 3 が答えてくれるチャットボットで、 cloudflare-workers 上で動く。 ただし、AI は自分のことを FF7 のクラウドだと思い込んでいるミッドガル在住の中年男性という設定になっており、時折魔晄中毒で幻覚を見始める。 (アイコンは bing で生成させた) (最近 FF7リバースをクリアしたので...) 自分の課金で claude3 の APIキーを使って動かしてるので、一般公開はしない。代わりにソースコードは公開している。 claude3 を動かす 以下の記事を参考にした。 とりあえず課金してAPIキーを手に入れる。この課金登録フローが少々面倒だったが、調べれば出てくるのでこの記事では割愛。 トー
自分はフロントエンドのロジックを考えるのは得意なんですが、CSS は苦手です。 なので 自分は AI にコード変更を依頼して実行結果を目視でプレビューしつつ、その生成結果を受けいれるかどうかの判断だけすればよくね?と考えて、それを CLIとして実装してみました。 ボタンの色を書き換えるという簡単な例ですが、こんな感じで動きます。 主に React Component の修正をターゲットにしていますが、class(Name) を書き換えることを優先するプロンプトを与えているので、ロジックを保ちつつ、見た目を綺麗にするためのツールになっています。 実装した背景 vscode ターミナル上で画像を表示できる OpenAI API はgpt-4-vision-preview のモデルで画像をアップロードして認識させることができる これらを使って、vscode terminal で実行することを前提
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
// in const longLongVar = 1; console.log(longLongVar); // out const o = 1;console.log(o); 主に terser や esbuild のポストプロセスとして行われる。 この記事では mangle のベストプラクティスについてまとめる。本当は jsconf.jp で話したかったが、時間がなかった。 例えば vscode(本体)では外にexportされないプライベートメンバを mangle することで大幅なコード量の削減に成功している。 Shrinking VS Code with name mangling ライブラリ作者やサードパーティスクリプト作者に必要な技術だが、一般的なコードにも適用できる話でもある。何度か自分の発表資料に書いてきたが、単体記事になってないのでここでまとめておく。 極限環境で最終ビル
// props を持たないファイル名と同名のコンポーネント export default function Sub(props: {name: string}) { return <h1 className="flex"> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Click {props.name} </button> </h1> } // ここが render される export const __PREVIEW__ = () => { return <Sub name="dummy" /> } 他にも .svelte や .html にも対応してる。対応パターンは以下。 注意点として、 dynamic import が絡むとプレビューに失敗する。
書き終わって気づいたが、この記事とだいたい一緒 https://zenn.dev/ptna/articles/a3882d095fa685 せっかく書いたので別視点の記事として残しておく。コンセプトの理解というより、コードの中身を掘り下げる。 typechat そのものを使うというより、 typechat がどのようにコードを生成するプロンプトを生成しているか、という視点で参考にするためにコードを読んだ。 Typechat とはなにか MS謹製の自然言語をコード実行ステップに変換するプロンプトジェネレータ。 TypeScript の API スキーマを定義して、自然言語の入力をそのAPIに対するコード実行にステップに変換する。 自分の大雑把な理解 プログラマは呼び出し可能なAPIのスキーマと、それを実行するインタープリターを実装する chatgpt は入出力を加工して API 呼び出しのス
tl;dr ChatGPT の画像入力でラフスケッチから簡単なマークアップを生成させることができる 生HTML はプロンプトとして弱い。 typescript(tsx) や headless-ui でコンテキスト情報を足すといい感じになる。 ChatGPT にスクリーンショットを入力し、 ChatGPT に puppeteer に操作させれて E2E 生成を自動化したり無限の猿BOT が作れるのでは。 マークアップエンジニアではなく、プログラマ視点でCSSを生成させたい。ロジックはこちらが考えるから、それに合わせたものを作ってくれ、という感じ。 まだ figma 連携とかは考えておらず、雑なラフを食わせたり、一般的なパターンを生成してもらえれば良いと思って試している。 とか考えてるうちに、うちの ChatGPT に画像入力が来た。まだAPIが来てないが、これが来ることを前提にマークアップ補
deno で CLI ツールを作っていたら楽しくなって色々作っていた。 課題: モノレポの諸々の操作がだるい npm/pnpm/yarn の workspace を使っていると、次のようなディレクトリ移動が段々面倒になってくる。 foo を build して bar を build してルートから bar のテストを流す、みたいなことをするとこういう感じになる。 $ cd packages/foo $ pnpm build $ cd ../bar $ pnpm build $ cd ../.. ## コマンドの中身を確認 $ cat package.json | jq ".scripts" { "test": "pnpm test:foo && pnpm test:bar", "test:foo": "cd packages/foo && pnpm test", "test:bar": "
次の記事の 2023 年版です。 tl;dr 次のコードを "deno.enable": true にしない(Node環境のまま)Node+Deno両方の型チェックが通る vscode 環境にする。 // .ts 拡張子を許可 import { dep } from "./dep.ts"; // node_modules から npm module を解決 import ts from "typescript"; // deno/node 共用で Deno に型をつける const Deno: typeof import("@deno/shim-deno").Deno = (globalThis as any).Deno ?? (await import("@deno/shim-deno")).Deno; const source = ts.createSourceFile("test.t
tl;dr fig starship zsh fzf sheldon なぜ vscode の .vscode/tasks.json が fishと非常に相性が悪い。とくに fish-nvm を使っていると、fish 経由のパス実行時に node と npm へパスが通らない。 そもそも fish を使っていた理由は autocomplete を快適にするためだったが、1年ぐらい Fig を使っていて、補完はこれを任せていいと気づいた。 Fig はこういうやつ そもそも fish の拡張コマンドを使わないように生活していた。方言を覚えたくない。というか bash 拡張や zsh 拡張もあんまり覚えたくない。
注意: 本記事で扱う d1 や miniflare v3 はまだ安定してないので、将来的にこの記事のコードは動かなくなる可能性が高い。 大部分を次の記事を参考にしている。 が、現時点で色々動いたり動かなかったりしたので、だいぶアレンジしている。たぶん .wrangler/state/v3 のローカルDBのパスが頻繁に変わることが予想される。 この記事は何 prisma で d1 を migrations したい d1 は kysely-d1 を prisma の型定義を使って動かす wrangler dev/pages 以外の環境からでもテスト用に wokrerd から d1 の binding を取得する 最終的にはこれが動く import type { D1Database } from "@cloudflare/workers-types"; import type { DB } f
Qwik をマイクロフロントエンド基盤として使えないか検討していて思いついた色々。副産物で色々作った。 tl;dr Qwik は理論上は最強。だが難しい qwik-react を使えば選択的に Qwik/React を切り替えられるので、 Astro と同じメタフレームワークとして使えそう React 以外もその気になれば対応できるはず => qwik-svelte と qwik-vue を実装した 最終的な問題は Qwik が流行るかどうか Qwik/QwikCity とは何か Qwik は SSR First なUIライブラリで、 .tsx の React 方言からコンポーネントを生成する。 import { component$, useSignal } from '@builder.io/qwik'; export default component$(() => { return
次のページ
このページを最初にブックマークしてみませんか?
『mizchiさんの記事一覧』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く