Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
puppeteer をローカルプロキシとしてリクエストを監視＆モックする
パフォーマンスチューニングで、ソースコードに触らず非破壊でネットワークリクエストを書き換えて、LCPがどれだけ改善するかの実験ツールが欲しかったんですが、この目的で良いプロキシツールがないです。 世のローカルプロキシツールは DNS の設定を要求してきます。これは潜在的に意図しない状況を引き起こすので、使いたくありませんでした。 tl;dr puppeteer の page.setRequestInterception(true) でリクエストを覗いて、書き換えた ブラウザからリクエスト内容を奪う方法 テスト用HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script type="module"> const x = await fetch('https://jsonp
vercel ai で書き捨ての Deno CLI を書き直した (OpenAI, AnthropicAI, Google Gemini)
Claude or ChatGPT + Tools やモデルの組み合わせで対応パターンが膨大で面倒だったのを、 Deno + ai-sdk(Vercel) で書き直したらだいぶ楽になった。 この辺を参照した。 OpenAI と AnthropicAI の Tools の叩き方を確認したが、 Gemini はそこを省いている。 前提 まず、 AI 周りの CLI ツールは専用の面倒臭さがあることを知っておく必要がある。 ストリーミング Tools の応答 AI 周りの応答をストリーミングするのは LLM 関係なくストリーミング処理を大量に書く必要がある。 ストリーミング処理は WebSocket や WebWorker 周りのAPIハンドルと同じノウハウが必要になる。別に難しくはないが、既存の Promise 抽象に当てはまらないので、都度考えることになり、だるい。 Tools の応答は、A
プログラミング学習においての写経の必要性について
これは YouTube Live で写経の必要性についてディスカッションするために、自分が用意した資料。 急いで書いたので色々雑。 議論が終わったら追記する、かも。 争点 プログラミングの写経に意味があるのか。ないのか。 あるとしたら、その意味は。 ないとしたら、なぜ無意味なのか。 また、少し違った視点として、とくに学校教育の現場で、モチベーションが低い対象を前提として、写経を行わせる意味などもあるかもしれない。 語らない点 個別の言語ごとの写経の向き不向き 特定ツールの良し悪し 個々のライブラリでは云々 一般化できなさそうな N=1 事例 プログラミングの写経の定義 (同意できそうなところ) 完全に思考を停止した状態で、意味を理解せずに上からタイプする作業を写経と呼んではいない。なので、仏教的な意味においての写経・読経や、ヨーロッパの修道院で行われた聖書の写本的な意味合いからは(完全に無
CompressionStream でブラウザで gzip 圧縮する
モダンなブラウザは JS API として gzip や deflate が使えます。 昔から Chrome に搭載してるのは知ってたんですが、今見たらだいたい搭載してました。 わかってる人向けに言うと、バンドルサイズ大きめの JS実装の pako や zlib.js が不要になって、ブラウザネイティブの(たぶんHTTP上のgzip展開と同等の)高速な実装が使えます。 // impl const encoder = new TextEncoder(); const decoder = new TextDecoder(); export async function compress(str: string): Promise<ArrayBuffer> { const cs = new CompressionStream("gzip"); const buf = encoder.encode(
node v22.7.x で TypeScript をそのまま実行する
node の最新に近いバージョンで TypeScript の実験的なサポートが入っている。ts-node や tsx に頼らず typescript のスクリプトを実行できる。 ロードマップ 実験的な機能であることは承知の上で、動かしてみる。 tl;dr # ~/.zshrc alias nodets="node --experimental-strip-types --experimental-transform-types --experimental-detect-module --no-warnings=ExperimentalWarning" # run nodets run.ts
Prisma TypedSQL をクエリビルダとしてのみ運用する
タイトルのこともできることを検証した。（ORM で文句ない人は ORM として使えばいい） Prisma は TypeScript の優秀な ORM / QueryBuilder だが、Prisma 以外で運用されていると途中から投入するのが（一応可能ではあるが）面倒だったりする。 だが Typed SQL によって、既に存在するDBに対して、副作用なくクエリビルダとしてのみ導入することができるのでは、と思いついて試したところ、できた。 今回はリモートの Supabase の PostgreSQL に対して行ったが、たぶん他の環境にも使える。 d1 とか。 prisma の最小プロジェクトのセットアップ $ mkdir prisma-qb-only $ cd prisma-qb-only ## 初期化 $ pnpm init $ pnpm add prisma @prisma/client
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
Remix on CloudflarePages + Prisma + Supabase で銀の弾丸を目指す 20240828
自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 追記 20240829: DATABASE_URL で Connection Pool を有効にするのに ?pgbouncer=true を追加 https://supabase.com/partners/integrations/prisma このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、20
ネストオブジェクトの罠 RE: TypeScriptで「選択肢」の定義をEnum的な定数にまとめる
この記事は、静的解析とビルドサイズ面で興味深いテーマでした。記事として自分の考えを書きます。 注意。あくまでビルドパフォーマンス視点での最適化です。強い意図があって、自分のドメインモデリングの方法論ではこれが最適なんだ、というなら元コードの方法論を止めるつもりはありません。 元記事のコードを minify するとどうなるか 元コードを参考に、それにアクセスするサンプルコードを書いてみます。 const sortingOptions = { priceDesc: { id: "priceDesc", sort: "price", order: "desc", label: "価格が高い順", }, priceAsc: { id: "priceAsc", sort: "price", order: "asc", label: "価格が安い順", }, ratingDesc: { id: "ra
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
Python + VSCode の環境構築 20240604
作業メモ。モダン Python 速習。 AI 周りのツールを動かしていたら TypeScript だけでやるには無理が出てきたので、久しぶりに Python の環境構築をする。 具体的には TestGen LLM を動かしたい。 Python はたまに触るけど、基本 2.x 時代の知識しかない。 基本的にこの記事を読みながら、細かいアレンジをしている。 追記 rye が ruff と pytest を同梱してるので rye fmt, rye check, rye test で良かった uvicorn を叩くより、 fastapi-cli を使って起動したほうが良さそうので変更 基本方針: Rye に全部任せる 良く出来てると噂に聞いたので、 rye に任せる。 自分が Python が苦手な点は pip を下手に使うと環境が汚れていく点で、基本的に rye で閉じて管理させる。システムの
プログラマ視点での生成AIとの付き合い方
プログラミングについて、最近考えてることについてのポエム。 基本的に、 GPT-4 と Claude-3-Opus を使った経験を念頭に置いて話をする。機械学習エンジニアではないので、あくまで利用者に徹した視点での話。仕事で生成AIを使ったパイプラインを作ったりはしている。 生成AIの進化速度を予測しておく 今大事なことは、今AIがどの程度の性能かという定点の話ではなく、その進化の速度を認識すること。 コード生成というタスクにおいて、生成AIモデルを人間に当てはめると、こんな感じの人物像を自分は持っている。 GPT-4: プログラミング経験2年目の大学2年生 Claude-3-Opus: プログラミング経験3年目の大学3年生 ここでいうn年目は、業務経験ではなく、プログラミングの単位がある大学での、教育課程としての経験年数。今のひたすら学習量を増やす方式だと、単に1年に1年分ぐらい賢くなっ
自分が Moonbit 言語について知っていること
I will write an English version later to give back to the moonbit community. Addition: https://gist.github.com/mizchi/aef3fa9977c8832148b00145a1d20f4b この記事はリバースエンジニアリングを含んでいる。公式の Discord サーバーで質問して得られた内容を含むが、ここに書かれたものは自分の理解であって、公式の見解ではない。 前の紹介記事では煽り気味だったので、実際に調べながら書いてみてどう感じているかという実践的な話をする。 作者と開発組織 開発母体は深センの研究組織 IDEA 元 Meta で BuckleScript | ReScript を開発していた Hongbo Zhang 氏がチーフアーキテクト。 ReScript を知らない人の
AnthropicAI Tool で Retrieval-Augmented Generation を実装してみた
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 は次世代のコンテナ技術になれるか？
色々あって WebAssembly の component model を調べていたら、未来が見えた気がしたのでここに書いておきます。 「今の WebAssembly」 とは何か WebAssembly の Web の部分は忘れてください。これは単に JVM version 20xx です。ポータブルなバイナリ仕様です。 実行にあたっては今はホスト言語として JS が使われていますが、実際にはホストがJSである必要すらなく、なんならホストが不要なスタンドアロン環境すらあります。(wasmtime/wasmer) じゃあ WebAssembly は何かというと、サンドボックスで実行される VM の仕様です。比較的高水準なバイナリで、 V8 や Spider Monkey に付属する WebAssembly Runtime や、 Wasmtime や Wasmer といった WebAssemb
moonbit で json パーサーを書いてみた 感想
エアプにならないために、実際に 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
Deno first でやっていく
去年末ぐらいから Deno を使う割合がグッと増えてきた。最近のJS関連は7割ぐらい deno 環境の VSCode でコードを書いている気がする。 今回はいくつかの実例を示しながら、実際に Deno 使えるじゃんというイメージを持ってもらうためのユースケースを紹介していく。 というか、 deno が普及してくれないと、自分が作ったツールの紹介を全部 deno のインストールから書かないといけなくなる。みんなインストールしといて。 最初に: なぜ Deno を使いたいか 一番の問題点、Node は新しいプロジェクトを一式整えるための手間が非常に重い。 とくに ts で書いたものを他の環境に渡すための方法が未だにしんどい。ある環境で動いたコードをそのままコピーしても、プロジェクト設定の非互換を踏む可能性が非常に高い。 deno にそういう側面がないとは言わないが、非常に少ない。とくに TS
MoonBit が WebAssembly 時代の理想(の原型)だった
最近 moonbit という言語を知ったのですが、これが調べれば調べるほど好きになる言語だったので、紹介させてください。 文法的には GC 付きの Rust で、 WebAssembly にコンパイルされます。とくに CDN Edge Worker 上での実行を想定しているようです。もう好き。 注意: まだ若い言語なので、これから言語仕様がガンガン変わっていくと思われます。あくまで現時点での情報です。 tl;dr Pros だいたい GC あり Rust と捉えていい 文法面のキャッチアップが容易 ライフタイムの難しさを考えなくていい すでに vscode 拡張やパッケージマネージャ等のエコシステムが整っている Cons まだ安定していない / しばらくはソースコードが公開されない 現時点では学習リソースやパッケージ数が足りず、書き手の腕力が求められる はじめに: JS/TS/Rust へ
TypeScript の条件型と分配法則、あるいはユニオン型の写像
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 上の定義はこうなっている。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
