サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
zenn.dev/mizchi
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 して、その本文部分を抽出する
色々あって WebAssembly の component model を調べていたら、未来が見えた気がしたのでここに書いておきます。 「今の WebAssembly」 とは何か WebAssembly の Web の部分は忘れてください。これは単に JVM version 20xx です。ポータブルなバイナリ仕様です。 実行にあたっては今はホスト言語として JS が使われていますが、実際にはホストがJSである必要すらなく、なんならホストが不要なスタンドアロン環境すらあります。(wasmtime/wasmer) じゃあ WebAssembly は何かというと、サンドボックスで実行される VM の仕様です。比較的高水準なバイナリで、 V8 や Spider Monkey に付属する WebAssembly Runtime や、 Wasmtime や Wasmer といった WebAssemb
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
エアプにならないために、実際に 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 で実行することを前提
この記事は前に書いた記事の抜粋かつ修正版 簡単にライブラリを呼び出すコマンドを作るとなったら、やはり deno + zx(or dux) だと思う。権限管理があって、ファイル単体でモジュールを解決して実行できる。 tl;dr ~/bin/mycmd の単体ファイルでコマンドを作成する shebang に deno permissions を与えて chmod +x する node:util の parseArgs で Deno.args をパース dax でコマンドを実行 実装 ~/bin 等にパスを通してあるとする。 雛形。 #!/usr/bin/env -S deno run -A --ext=ts import { parseArgs } from "node:util"; import $ from "https://deno.land/x/dax@0.36.0/mod.ts";
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。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 呼び出しのス
chat.openai.com 上でマークアップを試行錯誤するための Chrome 拡張を試作してみた。 例えば html+preview のコードブロックを見つけるとその隣に HTML として挿入する。後述するが React Component もプレビューできる。 📎 をクリックすると展開したHTMLを画像としてクリップボードに入れることができる。 いい感じにコードを生成してくれるプロンプトのサンプル集はここに置いてる なぜ作ったか GPT-4 はそこそこ賢いコードを生成できるのだが、細かい修正は行うにはやはりプレビューしながら対話的に行う必要がある。 また、人間がその結果を言語化するより、生成されたHTMLを画像入力として修正プロンプトに使うのが精度がでる。 (備考: まだChatGPT Plus の一部ユーザーに開放されてない機能) react-component の生成: ts
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
これができる拡張を作った。 TypeScript と HTML と CSS の LSP を動かせるようにしたので、 markdown 内部で補完が走る。 TypeScript に関しては補完だけではなく型診断の結果を表示している。 .md だけではなく .mdx にも対応している。 インストールと設定 インストールした上で .vscode/settings.json に次の設定を書く。 { "markdown-code-features.enable": true, // to enable completion in markdown "[markdown]": { "editor.quickSuggestions": { "comments": true, "strings": true, "other": true } } } 基本的に、markdown-code-features.
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
qwik のビルド結果を静的コンポーネントとして読み込む https://blog.cloudflare.com/better-micro-frontends/ というcloudflare によるマイクロフロントエンドの提案があります。 cf-workers にサービス個別に qwik の SSR サーバーをホストし、それを service-binding で合成して一つのフロントエンドとして表現します。 これ、別に SSR は必要なく最終的な静的アセットの状態を吸い出せれば別に cf-workers としてホストするすら必要ないんじゃないかと思い、やってみました。 やりたいこと qwik を静的にビルドする qwik の生成した HTML をそのまま他に埋め込む Qwik は SSR First なフレームワークなので、JS を読み込むのではなく、一度 HTML として展開してから hy
欲しい物がなければ、自分で作るしかないシリーズ なぜ作ったか .svelte のテンプレートは .tsx と違って JS/TS としてのプログラミング言語としての構文の影響下になく、プログラムをあまり書かないマークアップエンジニアとの連携に便利で気に入っています(リスト表示に .map で目を回すぐらいの人を想定しています)。シンプルな構文で TypeScript の型もつきやすく、IDE支援もそこそこで、 モダンな vue テンプレートという感じです。 しかしながら、 GitHub のオープンソースのトレンドを見ればわかるように、フロントエンドのエコシステムは基本的に jsx/tsx を中心に回っています。そして現代の View 層のライブラリは(WebComponents がライブラリ間のブリッジとして失敗しているので)同じライブラリ同士でしか接続できず、この現状に不満を持っていました
Copilot をオープンベータ直後から長く使っていて、また補助的に ChatGPT も使いながらコードを書いていて、なんとなくコツがわかるようになってきた。 自分は生成モデルのことは表面的な理解しかしてない。雑にバックプロパゲーションの実装の写経したり、Transformer の解説とかは読んだが、にわかの域を出ていない。 あくまで利用者として生成モデルから吸い出したプラクティスになる。 基本的に TypeScript と Rust での経験が元になっているが、他の言語にも適用できる話ではあると思う。自分は TypeScript はかなり得意だが、 Rust はあんまり書けるわけではなく、Rust の学習で ChatGPT を頼ろうとして失敗しているというステージ。 Copilot / ChatGPT とどう付き合うか まず、前提として ChatGPT も Copilot も、コード生成
みんなお世話になっている TypeScript のコードを読みたいと思ったことはないだろうか。読んだ。 一週間ぐらいかかった。完全に読み切ったとは言えないが、概要は掴んだ。 なかなかに複雑でドメイン知識を得るのが難しかったので、これから読む人向けに、登場人物や概念を整理して紹介したい。 読んだのは 2023/6/8 時点で git clone したコード。 最初に: 自分のゴール設定 複数ファイルにまたがった参照を、 TypeScript の Language Service が提供する findReferences() や findRenameLocations(), goToDefinitions() を使って、インクリメンタルに書き換えたかった。 Terser を使うと、今触ってるオブジェクトが何で、何のメンバを書き換えたかの情報が残らない。これを TypeScript のレイヤーで
$ npm install @mizchi/declass $ npx declass input.ts # -o output.ts export class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; console.log("Point created", x, y); } distance(other: Point) { return Math.sqrt(Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2)); } } export class Point3d { constructor(public x: number, public y: number, public z:
React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ
これだけみると LibC がよく見えますね。 オープンソースのライブラリ比較や、エンタープライズな SaaS が競合に対する優位を見せたいときに星取表が使われることが多いです。 中立な立場でライブラリを選定する過程として出てくることがあります。 自分はこれに全く意味がなく、むしろ競争的な立場では出した側が負けるものと認識しています。 星取表を作る側の意図 よく見かけるパターンがこれです。 開発自体は長いため機能が豊富だが性能に劣る先発が、後発を貶めている 恣意的な項目選定で、そもそも負けている そもそも比較対象としての土俵が違う(全部入りのフレームワークと単機能なライブラリの比較) 特に 1 と 2 の組み合わせが多く、この裏では非機能要件で圧倒的に負けていることが多いです。例えば A は機能は豊富だけどビルドに 30秒で、Bは機能は足りないけど3秒だといった場合、多くの場合ではまず B
次のページ
このページを最初にブックマークしてみませんか?
『mizchiさんの記事一覧』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く