必要もないのに querySelector や querySelectorAll の型引数を指定しないようにしましょう. (この記事は AI レビュワーに「型引数を指定した方が型安全だ」と提案されたのに対する反論として作成しています.) querySelector の型安全性 querySelector や querySelectorAll の型定義は, 後述する要素型セレクターに関連する部分を除くと, 基本的には以下のようになっています. querySelector<E extends Element = Element>(selectors: string): E | null; quer…

タイトルは What I Wish I Knew When Learning Haskell リスペクトです. SDK と API OpenTelemetry でアプリケーションの計装をする際に使うパッケージ (モジュール) は, 計測・集約・エクスポートなどの実装の本体である SDK と, 計測のためのインターフェースである API に分離されています. たとえば Node.js の場合, アプリケーションのエントリポイント付近で @opentelemetry/sdk-metrics パッケージを使って SDK を初期化し, グローバルな MeterProvider を設定します. impo…

JavaScript (TypeScript) のコードから HTTP リクエストを送る手段として, 最近では Web 標準の一つである Fetch Standard で定義された fetch() が使われることが多いですね. await fetch("https://example.com"); リクエストヘッダーには Host を設定できない Fetch Standard では Host をはじめとして Content-Length, Cookie, Origin など, いくつかのリクエストヘッダーを設定 (JavaScript から上書き) することが禁止されています. https:/…

異論は認めます S clz32 A acosh, asinh, atanh, f16round, fround, imul B acos, asin, atan, cbrt, cosh, expm1, hypot, log1p, sign, sinh, tanh, trunc, sumPrecise*1 C atan2, cos, exp, log, log2, log10, sin, tan D abs, ceil, floor, max, min, pow, random, round, sqrt *1:Stage 3 https://github.com/tc39/proposal-ma…

コードレビューというかコードリーディングというかコードライティングというか、とにかく自分と他人の見えている景色がかなり違っていそうということはわかっているんだが、それを伝えられるなら苦労していないという状態— 塩水うに (@susisu2413) June 29, 2025 とにかく他人がコードを読み書きしている様子を見ていると腑に落ちないというか, 何と言うか自分の考える「読み書き」とは全然違うことをしているんじゃないか? あるいは自分の「読み書き」が異常なのか? みたいな気持ちになることが多い. 例えばセルフコードレビューをしてみようみたいな記事を書いて, これを読んでコードを自分でレビュ…

TypeScript 使用ルートです. AI Coding Agent Enablement in TypeScript や TS特化Clineプログラミング で紹介されていたように独自の lint ルールを作りたいということがあるかと思いますが, それシュッとプロジェクト内に完結した形で作りたいといったときにご活用ください. サンプルリポジトリは以下: 1. 依存ライブラリをインストール TypeScript でルールを書くために, 以下の 2 つを devDependencies としてインストールしてください. jiti: ESLint で TypeScript で書かれた設定ファイルを…

登壇してきた 発表の内容については前の記事を読んでください. この規模のカンファレンスでの登壇は初めてだったのですが, 元々関連分野に興味があった人には刺さりつつ, そうでない人にも面白いと思ってもらえた様子も観測していて, だいたい目論見通りの発表ができたんじゃないかと思います. 良かったね. 来月の関数型まつりにも参加するので (登壇はしませんが), TypeScript でのエフェクト周りのあれこれについてなどはまたバトルしてください > 各位 あとこの場を借りて運営の方々に感謝を申し上げておきます. 前回の TSKaigi Kansai では運営をしていたのですが, 今回登壇者として参…

TSKaigi 2025 での登壇「君だけのオリジナル async / await を作ろう」のスピーカーノートと補足です. (TSKaigi 2025 自体の感想や面白かった発表の話なんかはまた別途書きます.) スピーカーノート & 補足 参考文献 スピーカーノート & 補足 「君だけのオリジナル async / await を作ろう」というタイトルで発表します. susisu ですよろしくおねがいします. 今日, 特に最後の方は多少抽象度が高い話題を扱うので, もしかしたらちょっと難しい話になってしまうかもなんですが, 最終的に私が一番伝えたいのは「TypeScript 面白い」ということ…

Effective TypeScript (第2版) を読んだ なんらか他の人に読んでおくと良いよと紹介できる本があると良いなと思って読みました. 2020 年以降に TypeScript を書く上での常識が概ね網羅されていると思うので, そういった前提知識に自信をつけたいならおすすめです. www.oreilly.co.jp ただ「項目18 推論可能な型でコードを乱雑にしない」で, 関数の戻り値の型アノテーションをデフォルトで省略するよう推奨していることについては明確に反対したい. より正確には, コールバックなど再利用を想定しない関数についてはデフォルトで省略してもよいが, 通常関数は再利…

この記事は以下の記事の改訂版です. susisu.hatenablog.com ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いなどから誤った設定をしている事例を目にします. ということで, Flat Config を書くにあたっていくつか知っておいて欲しいことや, よく見かけるミスをまとめてみました. この記事では網羅的な説明はしませんので, ESLint や typescript-eslint の公式ドキュメントを前提として, 副読…

Promise と Thenable Promise が ECMAScript の言語仕様に追加されたのは ES2015 ですが, Promise ライクなオブジェクトはそれ以前からも広く使われてきました (jQuery の Deferred など). そういった Promise ライクなオブジェクトとの互換性のため, Promise の仕様は本物の Promise と Promise ライクなオブジェクトを混ぜて使えるようになっています. 具体的には, Promise ライクなオブジェクトは一般に Thenable という共通のインターフェースを持つことになっています. オブジェクトが Th…

個人の見解です. GitHub Actions 内の実行単位 GitHub Actions で基本となる実行単位は workflow ですが, その中に job, さらにその中に step という階層構造があるということをまずは理解しておきましょう. workflow トップレベルの実行単位 job workflow の中で並列に実行される (直列に実行したい場合は needs で依存関係を持たせる) runner (VM) は job ごとに用意される step job の中で直列に実行される Reusable workflows と composite actions GitHub から公…

ラベル付きタプル型とは TypeScript には配列型 (Array) のサブセットとしてタプル型がありますが, その各要素にはラベルをつけることができます (参考). // 通常のタプル型 type Tuple = [number, string]; // ラベル付きのタプル型 type LabeledTuple = [foo: number, bar: string]; ちなみにタプル型には可変長の部分を 1 つまで含めることができますが, そこにもラベルがつけられます. type LabeledVariadicTuple = [foo: number, ...bar: string[]…

「N 文字以上 / 以内」みたいなことを言われたときに考えること. 「文字」とは? 単に「文字」と言っても, それが指しているものが何かは自明ではない. 符号単位 (code unit) JavaScript の場合, 文字列は UTF-16 としてエンコードされている*1ので, そのエンコードの単位である 16 bit ごとに分割するというのがこの方法. .length で取得できるのはこの符号単位の数で, .slice() に与えるのも符号単位で数えたインデックスとなっている. > "あいうえおABCDE".length 10 > "あいうえおABCDE".slice(0, 5) "あいう…

N 行以上なら省略表示したい 所感: LGTM import { FC, ReactNode, CSSProperties } from "react"; import styles from "./LineClampingBox.module.scss"; /** 指定した行数以上なら省略表示する */ export const LineClampingBox: FC<{ /** 最大行数 */ maxLines: number; children: ReactNode; }> = ({ maxLines, children }) => { return ( <div className={…

この記事は はてなエンジニア Advent Calendar 2024 の 4 日目の記事です. 昨日は id:onk さんの コミュニティ生活で大切な三つの袋 - id:onk のはてなブログ でした. ところで皆さん TypeScript は書いていますか書いていますよねそうですよね. そんな皆さんに TypeScript の表現力の高さを改めて実感してもらうべく, この記事では Data types à la carte という論文で紹介されている抽象データ型の拡張性に関する問題を, TypeScript ではどのように解決できるかを紹介します. 抽象データ型の拡張性の問題 まずは論文で…

Conditional Exports とは package.json 内の exports フィールドには, 以下のように条件付きでエクスポートするファイルを指定できる (conditional exports). { "name": "@susisu/example", "type": "module", "exports": { ".": { "require": "./lib/index.cjs", "default": "./lib/index.js" } } } たとえばこの例では CommonJS ファイル内から require("@susisu/example") のように参照…

Kyoto.なんか #6 で発表しました. speakerdeck.com 以下はその補足情報など. 仕様書中の出現頻度 null と undefined がそれぞれの仕様でどの程度使われているのかは, 仕様書中の出現頻度を見るだけでもある程度わかりりそうです. ということで ECMAScript 2024 と WHATWG の標準 (2024-09-07 時点) のうちいくつかの仕様書の中での出現頻度を見てみましょう. Spec #null #undefined ES2024 300 939 DOM 368 120 Fetch 276 10 HTML 1778 275 URL 98 9 見て…

2025-03-30 追記: 改訂版を書きました. susisu.hatenablog.com ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いなどから誤った設定をしている事例を目にします. ということで, Flat Config を書くにあたっていくつか知っておいて欲しいことや, よく見かけるミスをまとめてみました. この記事では網羅的な説明はしませんので, ESLint や typescript-eslint の公式ドキュメントを前…

おさらい: prototype JavaScript のオブジェクトはみんな prototype というのを持っていて, この prototype からプロパティを継承, より正確には, プロパティアクセス時にそのプロパティがオブジェクトに存在しなければ prototype を辿って見つけにいくことになっている. あるオブジェクトを prototype とした別のオブジェクトを作るには Object.create を使う (あるいは new 演算子や __proto__ を使っても良い). const x = {}; x.foo = "foo"; const y = Object.create…

TypeScript でエフェクトを使う話の続き. あるいは DI 手法の話でエフェクトを使うのを半ば冗談として書いていたのを, より具体的な状況を想定してもう少し真面目に考えてみる. ドメイン層と永続化 ドメイン層においては永続化のための具体的な技術については関心を持ちませんが, 永続化すること自体に関心を持たないわけではありません. リポジトリというドメイン層に用意されたインターフェースを使って保存や検索を行いつつ, 具体的な技術はドメイン層の外にあるインターフェースの実装に任せるというのが典型例です. これは永続化以外にも, 例えばイベントの送信などについても同様のことが言えます. (な…

2 年前に作って放置していたライブラリを最近ちょっと整理したのでその話. エフェクト プログラム中に登場する関数のことを考えてみましょう. 関数は引数を与えるとなんらかの計算を行い, 戻り値を返してくれます. もし関数が純粋な (数学的な意味での) 関数であれば, 関数の入出力は引数と戻り値だけです. つまり, 引数以外の入力 (例えば時刻) によって出力が変わることもなければ, 戻り値以外の出力 (例えば光や音) が得られることもありません. 一方で実用的な価値のあるプログラムというのは時刻に応じて光や音を発生させるようなものであり, これらは純粋な関数だけを組み合わせていては作ることができ…

作りました. jsr.io リポジトリはこっち. github.com (2024-05-12 現在, 筆者は Mackerel を開発している株式会社はてなの社員ですが, これは個人プロジェクトで, API ドキュメントなどの公開されている情報に基づいて作成されています.) なぜ JSR になんか publish したくなった 乗るしかないこのビッグウェーブ TypeScript で Mackerel を操作するちょっとしたスクリプトを書きたかったが, 意外とクライアントライブラリがなかった 単に JSON を fetch してくるだけなら簡単だが, それだけでは型もないし使いづらい 使い方…

およそ 4 年前に「TypeScript で型レベル Brainfuck」という記事を書きました. susisu.hatenablog.com それから 4 年間の間に TypeScript も進化し, 型レベルプログラミングの技法にも大きな変化がありました. 特に顕著な影響があったものでは, TypeScript 4.0 のタプル型の改善 TypeScript 4.1 のテンプレートリテラル型や条件型での再帰 TypeScript 4.5 の条件型での末尾再帰の除去と, 再帰の上限の緩和 などがあります. こういった変化も踏まえた上で, いまから TypeScript の型レベルプログラミン…

ESLint の設定に関する TypeScript の型情報を提供してくれる eslint-define-config (ESLint 非公式プロジェクト) のご紹介. github.com 使い方 eslintrc の場合は defineConfig, Flat Config の場合は defineFlatConfig で設定を囲むだけで VSCode などエディタ上で補完が効くようになります. これらの関数の実体はただの恒等関数なので, 型情報を提供する以上のことは何もしません (つまり何も気にせず追加できます). import { defineFlatConfig } from "esl…

一時間は大体の目安でちゃんと測ってない. PR の作成に時間がかかるときは, 何らか良くないことが起きている可能性が高い 試行錯誤を繰り返している 変更の規模が過大になっている 良くないことが起きているなら, そのまま続けて余計なコストをかけるよりも捨てた方が良い 試行錯誤を繰り返していたなら, そこまでは勉強か練習だと思って捨てる 変更の規模が過大になっていたなら, 分割して作り直すために捨てる 捨てることを躊躇わない 時間をかけるほど引き返しづらくなるので, 一時間くらいで打ち切る 一時間の手戻りなら一時間で取り返せる. なんなら知識が増えている分もっと短くて済む 思ったより進んでいなくて…

例えばサンプルコードを同梱したい場合や, コンパイラのセルフホストのような場合など, Node.js パッケージの内部でそのパッケージ自身を参照したくなることがあります. あるか? このときの方法がいくつかあるので軽くまとめます. ここでは例として以下のようなディレクトリ構造になっている mypackage パッケージを仮定して, examples/ 以下のサンプルコードからパッケージ自身を参照することを考えます. CommonJS と ES modules で挙動が異なるので, どちらの形式であるかを明示するために拡張子には常に .cjs か .mjs を使います. +-- package.…

ふと「最寄り」のように「最」と書いて「も」と読ませる語に異常性を感じたので, すべての「最」を集めたくなりました. 昨日のことです. 集めるとはいっても, 脳内を検索しているだけでは, 最上 (もがみ) 最中 (もなか) 最早 (もはや) 最寄り (もより) くらいしか思い当たりません. 直感的に異常性を感じるくらいには珍しいので当然です. ということで衝動買いした広辞苑がこちら. 一般的な語を探すのであればひとまずこれで十分でしょう. このためだけに購入 あとなぜかこれが二つついてきたので, 欲しい方がいたら片方差し上げます. 合計 2,400 万部の実績 そんな広辞苑によれば, 「最」とは…

TypeScript でライブラリ (npm パッケージ) を作るときに, ビルド用の tsconfig を用意することがあります. 例えば以下のような tsconfig.json を作成したとしましょう. { "compilerOptions": { "rootDir": "src", "outDir": "lib", "target": "esnext", "module": "esnext", "moduleResolution": "bundler", "esModuleInterop": true, "strict": true, "sourceMap": true, "declar…

ソフトウェアの品質 ソフトウェアの品質といえば, 大まかに外的品質と内的品質に分けられます. 外的品質: ユーザーから見た品質 例: 安全かつ確実に動作すること, 操作しやすいこと 内的品質: 開発者から見た品質 例: 変更しやすいこと, 型・linter・テストなどに守られていること, 読みやすいこと 当然ですが, ソフトウェア開発者としては外的・内的どちらの品質も高い, という状態を目指すべきでしょう. 場合によって優先度こそあれ, どちらかを一方的に切り捨てるべきではありません. どちらの品質から高めるか ある程度の複雑さを持ったソフトウェア (のコンポーネント) を作る場合, 大抵はど…