css-modules-kit は CSS Modules のためのツールセットです。何ができるのか、どんな設計で作られているのかは以下の記事を見てください。 www.mizdra.net www.mizdra.net この記事では css-modules-kit の内部設計について紹介してみます。今回は CSS Modul…

これは はてなエンジニア Advent Calendar 2025 1日目の記事です。 はてなでフロントエンドエキスパートをしている id:mizdra です。普段は JavaScript を書いてて、趣味で色々なツールを作ってます。 ところで最近、npmjs.com へのサプライチェーン攻撃が話…

2025/11/14〜15 に福岡工業大学で開催された、YAPC::Fukuoka 2025 に参加してきました。 yapcjapan.org 登壇 ありがたいことにプロポーザルが無事通り、「機密情報の漏洩を防げ！ Webフロントエンド開発で意識すべき漏洩パターンとその対策」というタイトル…

ghq は、git clone したリポジトリを特定のディレクトリ規則に従って管理するコマンドです。そして peco は、インクリメンタル検索をするコマンドです。この 2 つを組み合わせると、git clone したリポジトリを簡単に cd できます。 # ~/.gitconfig [ghq] ro…

Windows の Node.js で存在しないファイルを fs.readFileSync で読み取ろうとすると ENOENT が返ってくる。けど ENOENT は POSIX で定義されてるエラーコードであって、Windows のものではない。どこかで正規化されてるのか? という疑問が出てきたので調べて…

oxc の挙動を観察したいな〜と突然思って、oxc のデバッグ環境を VS Code で用意した。ちょっと躓いたのでメモを残しておく。 やりたいこと oxc のテストを VS Code から実行したい しかも VS Code 上から breakpoint を設定して、テストをステップ実行した…

tsx は TypeScript コードを事前トランスパイルすることなく、直接 Node.js で実行するためのツール。 https://github.com/privatenumber/tsx ところで最近の Node.js には Type Stripping という機能が入った。これを使うと、tsx なしで TypeScript コード…

CSS Modules は、CSS をローカルスコープ化する仕組み。*.module.css に CSS を記述すると、bundler がクラスセレクターなどをユニークなものへと変換してくれる。クラスセレクターなどが *.module.css ファイルごとに異なる名前に変換され、擬似的にローカ…

色々セッションを聴いてきたので、その感想です。沢山ありすぎたので、聴いてて気になったものだけ感想書いてます。 The New Powerful ESLint Config with Type Safety https://talks.antfu.me/2025/tskaigi/1 ESLint の Flat Config についてのセッション。…

「TypeScript Language Service Plugin で CSS Modules の開発体験を改善する」というタイトルで発表しました。 speakerdeck.com CSS Modules には、Find All References などの言語機能が動かないといった問題があります。本発表では、その問題を解決するた…

社内のあるプロダクトで Next.js を v13 系から v15 系にアップデートしたところ、トップページにブラウザバックで戻ると、エラーが発生するようになってしまった。 エラーの原因を調べてみると、何故かトップページにブラウザバックで戻った時、pageProps …

同僚の id:onk さんや id:Pasta-K さんにぜひ来てほしいと誘われたので、参加してみました。普段は JavaScript ばかり書いてて 全く Ruby 書いたことないです。RubyKaigi 初参加です。せっかくなので感想を書いておきます。 プログラミング言語の話が多い 「…

tsconfig.json を使うと、型チェックを緩く/強くしたり、また出力する JS の形式を変えたりできる。しかしいくつかの事情から、正しく書くのが難しい。 オプションの数が非常に多い その数なんと 133 個 *1 オプションの意味や役割が理解しにくい 公式ドキュ…

株式会社はてなに入社しました 株式会社はてなに入社しました - hitode909の日記

ターミナル向けに色付きの文字を format する関数を実装してて、そのテストを Vitest で書こうとしていた。 // src/format.ts function red(text: string): string { // ... } export function formatError(message: string): string { if (process.stderr.h…

その名も CSS Modules Kit です。去年の11月からずっと作ってました。 github.com www.youtube.com 何故作ったか 実は以前にも happy-css-modules という CSS Modules のための補助ツールを作っていました。これを使うと、.module.css から import したオブ…