モノレポの手癖を deno で CLI ツールを作って楽にしたい
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 fig starship zsh fzf sheldon なぜ vscode の .vscode/tasks.json が fishと非常に相性が悪い。とくに fish-nvm を使っていると、fish 経由のパス実行時に node と npm へパスが通らない。 そもそも fish を使っていた理由は autocomplete を快適にするためだったが、1年ぐらい Fig を使っていて、補完はこれを任せていいと気づいた。 Fig はこういうやつ そもそも fish の拡張コマンドを使わないように生活していた。方言を覚えたくない。というか bash 拡張や zsh 拡張もあんまり覚えたくない。
Markdown のコードブロックでLSPを動かす VSCode 拡張を作った
これができる拡張を作った。 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.
TypeScript 本体のコードを読んでみよう
みんなお世話になっている TypeScript のコードを読みたいと思ったことはないだろうか。読んだ。 一週間ぐらいかかった。完全に読み切ったとは言えないが、概要は掴んだ。 なかなかに複雑でドメイン知識を得るのが難しかったので、これから読む人向けに、登場人物や概念を整理して紹介したい。 読んだのは 2023/6/8 時点で git clone したコード。 最初に: 自分のゴール設定 複数ファイルにまたがった参照を、 TypeScript の Language Service が提供する findReferences() や findRenameLocations(), goToDefinitions() を使って、インクリメンタルに書き換えたかった。 Terser を使うと、今触ってるオブジェクトが何で、何のメンバを書き換えたかの情報が残らない。これを TypeScript のレイヤーで
星取表のアンチパターン
これだけみると LibC がよく見えますね。 オープンソースのライブラリ比較や、エンタープライズな SaaS が競合に対する優位を見せたいときに星取表が使われることが多いです。 中立な立場でライブラリを選定する過程として出てくることがあります。 自分はこれに全く意味がなく、むしろ競争的な立場では出した側が負けるものと認識しています。 星取表を作る側の意図 よく見かけるパターンがこれです。 開発自体は長いため機能が豊富だが性能に劣る先発が、後発を貶めている 恣意的な項目選定で、そもそも負けている そもそも比較対象としての土俵が違う(全部入りのフレームワークと単機能なライブラリの比較) 特に 1 と 2 の組み合わせが多く、この裏では非機能要件で圧倒的に負けていることが多いです。例えば A は機能は豊富だけどビルドに 30秒で、Bは機能は足りないけど3秒だといった場合、多くの場合ではまず B
lizod: 1kb 未満の zod の精神的後継
作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, type Infer, type Valid
cloudflare の better micro frontend を読む
これはなにか cloudflare スタックを使ったマイクロフロントエンドの提案。 特に service-binding を活用することで異なるサービス(ここでは cloudflare worker)から配信されるフロントエンドを統一的にSSRしつつ、開発単位を分離している。 RTT最適化のために qwik で書かれているが、SSR を意識しなければ他のライブラリを採用しても良い。 $ tree . -I node_modules . ├── README.md ├── body │ ├── package.json │ ├── public │ │ └── favicon.ico │ ├── src │ │ ├── Body.css │ │ ├── entry.ssr.tsx │ │ └── root.tsx │ ├── tsconfig.json │ ├── vite.config.t
Cloudflare D1 で ORM を使う (drizzle-orm)
tl;dr 生産性を上げる & SQL インジェクションを防ぐために ORM を使うのがよいとされている(諸説あります) cloudflare workers + d1 はウェブの破壊的イノベーション(諸説あります) モダンフロントエンドで大切なのは TypeScript との親和性と言われている(諸説減ってきた) 本当は理想の ORM を自作したいのけど、drizzle が現状一番自分のゴールに近いので、試したら良さそうだった 既存の問題と drizzle-orm 今までのあらすじ というわけで d1 に全振りするのが今後の生存戦略として有効だと思っているんですが、d1 client は専用のAPIからクエリ文字列を送り込む形式なので、native driver を使ってる prisma や typeorm 等が使えません。 自分が Mongodb + たまに Rails ActiveR
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
プログラミング学習の通過儀礼
プログラミング学習とはそもそも何なのか プログラミング初学者やITに関わる人が最初に知るべきこととして、プログラミングとは「あなたが問題を解決するのに用いたい手段を、あなたが思っているようにコンピュータに入力すること」ではない。 実際には、プログラミング学習はコンピュータに可能な(非常に限定された)処理セットを学ぶことであり、その応用の先に当初のゴールが含まれるかは、プログラミングを学んでその特性を学ばないと、判断すらできない。 例えば、手段 A によってゴール X を達成したいとしよう。非プログラマ/プログラミング初学者の発想は、よほど目の付け所がいいのではない限り、次のいずれかに分類される。 A には同じゴール X を解決する簡易な代替手段 B があり筋が悪い。 A で実現するほどの価値がない A は現状の人類の既存のソフトウェアの応用では実現できない。あるいは非常に困難。無理に実現し
Zig 言語のファーストインプレッション
Bun を読むにあたって、まずZigを抑える必要があると思ったので数時間学習してみた。チュートリアルを一通りやったのと、ちょっと手を動かした程度で、正直エアプの域は出てない。 自分の動機として wasm を吐くのに使う言語をずっと探していて、Rust も悪くないが正直学習コスト高すぎでしんどく、Zig がそれに足るか調査していたという感じ。 この記事を書くにあたっての細かい作業はこちら https://zenn.dev/mizchi/scraps/287b4414da2b29 Zig 言語自体のスタンス まず Zig 言語自体がなぜ D や Rust ではないかはこの記事がわかりやすい https://ziglang.org/learn/why_zig_rust_d_cpp/ 以下 Deepl で訳してちょっと修正したもの nostd 指向 標準ライブラリなしでもファーストクラスでサポート
Cloudflare D1 がヤバい
まだ検証足りないけど、マジで想像通りのブツなら魂震えるかもしれん…。 Announcing D1: our first SQL database Cloudflare D1 = Edge SQLite Cloudflare D1 は Cloudflare Worker で、つまり CDN Network 上で sqlite が動きます。これだけなら普通の sqlite ホスティングなんですが、もちろん Cloudflare が出すからにはそれだけではなく、CDN Edge 上に Read Replica がバラ撒かれた sqlite になります。ヤバくないですか？ 僕はヤバいと思いました。 このヤバさを知るために、Cloudflare が開発した基盤についていくつか抑えておく必要があります。 Durable Objects は CDN 上の Actor モデルを構築できます。この Acto
イベントループと TypeScript の型から理解する非同期処理
この本は、ブルーベリー本の 8 章からインスパイアされて、 TS の型が示す情報から Promise というものを理解してみる、というアプローチで書いたJSの非同期処理の解説です。 これらの資料と合わせて読むことを推奨します。 JSのイベントループのイメージを掴む JSでは中々意識することが少ないですが、正しく理解するには OS レベルのスレッドの視点で考え始める必要があります。 ブラウザや Node.js では一つのスクリプト実行単位を1つのスレッドに割り当てます。それをメインスレッドと呼んだり、ブラウザだったら UI スレッドと呼んだりします。 例えばブラウザでは、これは秒間60回、つまり 16.6ms ごとにループを呼び出します。(node だったらこれがもっと短いです) 仮に setTimeout の実装がなかったとして、それ相当の擬似コードを書くのを試みます。 let handl
プロを目指す人のためのTypeScript 本の感想 #ブルーベリー本
自分も教える事が多いので、読み手にどういう風に学んでほしいか、自分がどういう風に伝えるべきか、という視点で読んだ。 1章・イントロダクション そもそもTypeScript とはなにかみたいな話。 コンパイルエラーが出ている状態ではプログラムが完成したとは言えません。 力強い コンパイルエラーをただ避けるのではなく、利用する気持ち で TypeScript プログラミングに臨みましょう。 初心者に型違反の向き合い方を諭す話。IDEの補助になるとか。 TS年表で取り上げてるのが特徴的。exactOptionalProperty を取り上げてたり。 TSの型はランタイムに影響しない、という話を何度も解説している。これは初心者の誤解がとても多いので、必要だと思う。何度いっても、伝わって欲しい人に伝わらないのだが… enum や namespace については意図的に解説しない。過去のTS独自路線だ
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
ESM treeshake に対応したバンドルサイズを計算してくれる Shakerphobia を作った
bundlephobia.com というサイトがあります。これは npm のモジュールを参照した際のバンドルサイズを算出してくれるサービスです。 便利なんですが、基本的に dist/.. 等の package.json の main で配られるものだけをターゲットにしているので、 ESM Treeshake で一部のモジュールだけ import {} from ... した際のバンドルサイズがわからない、という問題がありました。 なので、それに対応したものを自分で作りました。netlify にデプロイしてあります。 こんな感じです。 使い方 https://shakerphobia.netlify.app/?pkg=<>&imports=<a,b,c> どうやって動いてるか URL を踏むと、 cdn.skypack.dev (その実体は npm) からソースコードを落としてきて、 Web
WebAssembly の GC Proposal とは何か / どこに向かおうとしてるのか
最初に これは WebAssembly に GC が導入されるから紹介、という記事ではない。どちらかというと、WebAssembly GC の採用がどれだけ遠く、また GC がのればどんな言語でも wasm のコンパイルサイズが減って軽量になる、という夢を見ている人に、現実を見てもらうための記事になる。 WebAssembly GC Proposal (Team)は、それを実現するパーツを分割して仕様策定を進めていて、実際に GC が動き出すまでには数年かかるだろうし、自分の感覚的に、将来的に GC が採用されるかは五分五分といったところ。 ただ、 GC Proposal から派生した仕様郡は GC が採用されなかったとしても有意義なものばかりなので、本記事ではそれを紹介したい。 基本的にここを参照 Excuse 自分は低レベルプログラミングの経験が浅く、WebAssembly のために関
実行環境依存のコードに対してテストを書く考え方
社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat
turborepo で monorepo の差分ビルド
Turborepo vercel が開発した monorepo 環境のためのビルドツールです。vercel ですが next 非依存です。 turborepo が何を解決するか node.js に限らず monorepo 環境下では、それぞれの内部モジュールのビルドは個別に行われることが多いです。ここでいう内部モジュールは、 package.json を持つディレクトリ単位、と捉えてもらって結構です。 apps/ web/ package.json # => foo, bar を参照 packages/ foo/ package.json dist/ index.js bar/ package.json # => foo を参照 dist/ index.js package.json このビルドが、(ビルドしない素の js と比べて)面倒な問題を引き起こします。 更新時にビルドを忘れて古い
Node/Deno でソースコードにテストを書く
tl;dr ファイルをそれ単独で単体テストとして実行するボイラープレートを編み出した そのヘルパとして mizchi/test という実装を作った なぜソースコードにテストを書きたいか Rust や Python の doctest ではソースコードにテストを書く方法があります。 ソースコードにテストを書けると、コードとテストの心理的な距離が近くなってテストが書きやすくなる、という肌感があります。(諸説あります) 実装とテストが混ざって汚れるのが嫌という意見も理解できますが、それはありつつ認めた上で、あとでリファクタする前提で最初の一歩をその実装に書けると嬉しい、という気持ちがあります。 現状の Node だととりあえず assert するだけという単純なテストを書くことは可能ですが、構造化する方法がないので、簡単なスクラッチの時ぐらいしか行われません。 // test.js import
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
