id:mizdra は CSS Modules Kit という CSS Modules のためのツールキットを作っている。そのツールキットの中に @css-modules-kit/ts-plugin というものがある。CSS Modules の言語機能を提供するための TypeScript Language Service Plugin である。 一応これは任意のエディタで動かせるように作ってる。実際、VS Code / Zed などで動くことを確認してる。しかし、Neovim で動くことはまだ確認できてなかった。いや、動くはずなんだけど Neovim の使い方がさっぱりわからなくて... 何…

かつては VS Code 拡張機能をインストールしまくっていて 65 個あったけど、最近はできるだけインストールしないようにしてる。数が多いとセキュリティリスク高まるので。 今インストールしてるのは以下の 24 個: alefragnani.bookmarks anthropic.claude-code dbaeumer.vscode-eslint esbenp.prettier-vscode github.codespaces github.copilot github.copilot-chat github.vscode-pull-request-github golang.go hedi…

css-modules-kit は CSS Modules のためのツールセットです。何ができるのか、どんな設計で作られているのかは以下の記事を見てください。 www.mizdra.net www.mizdra.net この記事では css-modules-kit の内部設計について紹介してみます。今回は CSS Modules のパースについてです。 3種類のツールと core パッケージについて css-modules-kit は codegen, ts-plugin, linter-plugin (eslint-plugin or stylelint-plugin) の 3 種類のツール…

これは はてなエンジニア Advent Calendar 2025 1日目の記事です。 はてなでフロントエンドエキスパートをしている id:mizdra です。普段は JavaScript を書いてて、趣味で色々なツールを作ってます。 ところで最近、npmjs.com へのサプライチェーン攻撃が話題ですね。以前から npmjs.com ではサプライチェーン攻撃が発生していましたが、今年は規模が大きいものが頻繁に発生しています。 Active Supply Chain Attack: npm Phishing Campaign Leads to P... npm Author Qix Compr…

2025/11/14〜15 に福岡工業大学で開催された、YAPC::Fukuoka 2025 に参加してきました。 yapcjapan.org 登壇 ありがたいことにプロポーザルが無事通り、「機密情報の漏洩を防げ！ Webフロントエンド開発で意識すべき漏洩パターンとその対策」というタイトルで登壇させて頂きました。 speakerdeck.com Web フロントエンドはユーザに直接面している領域故に、機密情報の漏洩が起きやすいです。また Next.js など、最近 Web フロントエンドの開発で使われているフレームワークでは、特に機密情報を漏洩させやすいポイントが存在します。そして、Perl …

ghq は、git clone したリポジトリを特定のディレクトリ規則に従って管理するコマンドです。そして peco は、インクリメンタル検索をするコマンドです。この 2 つを組み合わせると、git clone したリポジトリを簡単に cd できます。 # ~/.gitconfig [ghq] root = ~/src # ~/.zshrc function peco-src() { local selected_dir=$(ghq list | peco --query "$LBUFFER") if [[ -n "$selected_dir" ]]; then BUFFER="cd $(gh…

Windows の Node.js で存在しないファイルを fs.readFileSync で読み取ろうとすると ENOENT が返ってくる。けど ENOENT は POSIX で定義されてるエラーコードであって、Windows のものではない。どこかで正規化されてるのか? という疑問が出てきたので調べてみた。 答え Node.js の公式ドキュメントの error.errno の説明に答えが書いてあった。 https://nodejs.org/api/errors.html#errorerrno On Windows the error number provided by the syst…

oxc の挙動を観察したいな〜と突然思って、oxc のデバッグ環境を VS Code で用意した。ちょっと躓いたのでメモを残しておく。 やりたいこと oxc のテストを VS Code から実行したい しかも VS Code 上から breakpoint を設定して、テストをステップ実行したい Requirements 以下は事前にインストールしておく。 VS Code Rust rust-analyzer 拡張機能 rust-analyzer という Rust 向けの Language Server があって、それを VS Code から使うための拡張機能 VS Code からテストを実行す…

tsx は TypeScript コードを事前トランスパイルすることなく、直接 Node.js で実行するためのツール。 https://github.com/privatenumber/tsx ところで最近の Node.js には Type Stripping という機能が入った。これを使うと、tsx なしで TypeScript コードを事前トランスパイルせずに実行できる。 https://nodejs.org/api/typescript.html#type-stripping 両者の違い 一見すると両者は機能的に同じものかのように思うけど、実は結構違いがある。 import speci…

CSS Modules は、CSS をローカルスコープ化する仕組み。*.module.css に CSS を記述すると、bundler がクラスセレクターなどをユニークなものへと変換してくれる。クラスセレクターなどが *.module.css ファイルごとに異なる名前に変換され、擬似的にローカルスコープ化が実現される。 developer.hatenastaff.com CSS Modules では、基本的には CSS の標準の構文をそのまま利用する。しかし、一部 CSS Modules 独自の構文がある。実際どのようなものがあるのかというのを、紹介する。 CSS Modules の公式ドキュ…

色々セッションを聴いてきたので、その感想です。沢山ありすぎたので、聴いてて気になったものだけ感想書いてます。 The New Powerful ESLint Config with Type Safety https://talks.antfu.me/2025/tskaigi/1 ESLint の Flat Config についてのセッション。新 config への移行を補助するツール (@eslint/migrate-config, Config Inspector) が色々紹介されていた。存在そのものは知っていたけど、実際どういうことができるのかとか、動いている様子とかは見たことがなかった…

「TypeScript Language Service Plugin で CSS Modules の開発体験を改善する」というタイトルで発表しました。 speakerdeck.com CSS Modules には、Find All References などの言語機能が動かないといった問題があります。本発表では、その問題を解決するためのツールキット「CSS Modules Kit」を紹介しました。 github.com CSS Modules Kit は、Find All References といった主要なな言語機能をサポートしています。更に、VS Code 以外の様々なエディタで動くとい…

社内のあるプロダクトで Next.js を v13 系から v15 系にアップデートしたところ、トップページにブラウザバックで戻ると、エラーが発生するようになってしまった。 エラーの原因を調べてみると、何故かトップページにブラウザバックで戻った時、pageProps が空オブジェクトになっているようだった。 不具合再現の様子。ブラウザバックでトップに戻ると、pageProps が空になる。 実はこれは Next.js の不具合で、以下に issue がある (まあ僕が報告したのだけど...)。 github.com Next.js 側で修正されるのを待ってたのだけど、不具合の報告から1年以上経…

同僚の id:onk さんや id:Pasta-K さんにぜひ来てほしいと誘われたので、参加してみました。普段は JavaScript ばかり書いてて 全く Ruby 書いたことないです。RubyKaigi 初参加です。せっかくなので感想を書いておきます。 プログラミング言語の話が多い 「RubyKaigi は Ruby の言語開発者が話すカンファレンスで、プログラミング言語の話ばかりしている」と事前に聞いていて心構えはしていたのですが、その想像の3倍はプログラミング言語の話をしていて驚きました。JIT の話、静的型の話、irb の話、ビルドシステムの話、パーサーの話、Linter の話、La…

tsconfig.json を使うと、型チェックを緩く/強くしたり、また出力する JS の形式を変えたりできる。しかしいくつかの事情から、正しく書くのが難しい。 オプションの数が非常に多い その数なんと 133 個 *1 オプションの意味や役割が理解しにくい 公式ドキュメントは丁寧にかかれているが... JavaScript や TypeScript の仕様、型の知識、歴史的経緯などを知らないと理解しづらい 推奨されるオプションが変わっていく 言語やエコシステムの進化/変化によって変わる 最近だと Node.js の TypeScript サポートで変わった 「オプションの細かい意味とかは一旦…

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

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

その名も CSS Modules Kit です。去年の11月からずっと作ってました。 github.com www.youtube.com 何故作ったか 実は以前にも happy-css-modules という CSS Modules のための補助ツールを作っていました。これを使うと、.module.css から import したオブジェクト (styles) に TypeScript の型が付き、かつコードジャンプできます。 www.mizdra.net 便利ではあったのですが、不満がなかったわけではありません。 .module.css.d.ts.map が .module.css の横に…

これは はてなエンジニア - Qiita Advent Calendar 2024 - Qiita 15日目の記事です。昨日は id:utgwkk さんの「ISUCONの感想戦を支えるEC2の自動開始・停止、そしてAWS Step Functions」でした。 はてなでフロントエンドエキスパートをしている id:mizdra です。この記事では、JavaScript で GraphQL サーバーの技術選定をする際に、どのようなツールやライブラリがあるのかを紹介します。 というのも、JavaScript で GraphQL サーバーを作ろうと思って検索してみると、「Next.js + Apoll…

社内で「node --test って実際どうなの?」という議論がありました。その参考に、id:mizdra が node --test 最近を触って思ったことや、感想などを書いてみます。 結論だけ先に書いておくと、node --test はミニマムなテスティングフレームワークです。テストする時に必要とされる機能は大体ありますが、Vitest と比較すると色々欠けてます。そして、Vitest と比べて何が足りないのか、実際に触ってみるまで意外と分からないです。とりあえず動けば OK という人は、Vitest 使ったら良いと思います。node --test はミニマリスト向けです。 node --…

今まで id:mizdra はターミナルで Git ブランチを切り替えるときに、zsh + peco を使った Git ブランチ検索用のキーバインドを使用していた。 # .zshrc function select-git-branch() { selected_branch=$(git branch | cut -c 3- | peco) BUFFER="${LBUFFER}${selected_branch}${RBUFFER}" CURSOR=$#LBUFFER+$#selected_branch zle redisplay } zle -N select-git-branch bind…

特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/ScheduledComponent.tsx export function ScheduledComponent({showAt, children}: { showAt: Date; children: React.ReactNode; }) { if (new D…

2024/08/10 (土) に「builderscon 2024」に参加してきました。 fortee.jp 発表 ありがたいことに「React Server Components の疑問を解き明かす」という題で発表させて頂くことができました。 speakerdeck.com React Server Component (RSC) は、サーバーサイド上でレンダリングされる React コンポーネントです。React Server Component を用いると、コンポーネントの中から DB にアクセスしたり、ファイルシステムにアクセスしたりできます。 一方で、今までにも erb や pug …

TL;DR "include": ["src/index.ts"] はやめよう src 配下にあるのに型チェックされない & auto-import できないファイルが生まれてしまう "include": ["src/**/*"] や "include": ["**/*"] がオススメ どっちが良いかはプロジェクトによる "include": ["src/**/*"] は "include": ["src"] と、"include": ["**/*"] は include 指定無しと同じなので、それでも OK すっごい凝りたいなら Solution Style tsconfig.json を使…

最近用語集のようなページを作る機会があった。それぞれの用語の名前と説明がバーっと並んでて、説明部分は <details> 要素で隠されている。用語の名前をクリックすると <details> が展開されて、説明部分が読める、といった感じ。 用語集ページの例 他のページから特定の用語の説明に飛べるように、用語を表す要素それぞれに id 属性が振ってある。例えば https://glossary.example.com/#javascript という URL でアクセスすると、「JavaScript」の用語がある位置にスクロールした状態で、用語集ページを開ける。 ただ (一部ブラウザで) https…

Node.js には --require=module と --import=module というオプションがあります。このオプションを使うと、エントリポイントとなるプログラムよりも前に、任意のモジュールを実行できます。 例えば以下のようなコマンドを実行すると、Node.js ランタイムはまず最初に preload.cjs を実行し、それから main.mjs を実行できます。 node --require ./preload.cjs main.mjs エントリポイントよりも前に、何かしらの処理を実行したい時に使うことを想定しています。 --require と --import の違い --i…

GitHub Sponsors 始めました。以下のページからスポンサーできます。 github.com 主に僕が作った OSS を使っている方、ブログを読んだりしている方からスポンサーして頂くことを想定しています。僕の OSS や記事がきっかけで、僕を支援をしたいと思った方がいらっしゃれば、是非スポンサー登録をしてみてください。 GitHub Sponsors を始めた理由 ちょっとした OSS を繰り返し作っていった結果、その OSS をメンテナンスする時間が増えてきました。情熱的に OSS 活動に時間を注がれている方と比較するとそうでもないかもしれませんが、個人的にはそこそこ OSS のメ…

tsc の代替実装を作る話、とりわけ Rust や Go で tsc を高速化した移植版を作る話について。非常に野心的で面白いと思いつつ、正直僕は実用レベルまで達したものが本当に登場するのか疑問に思っている。今ある型システムもそうだし、新機能として追加されるものにも追従する必要がある。当然、実用レベルとして使ってもらうには、不具合も少なくないといけない。 それに tsc も最近はパフォーマンス改善に力を入れているように見えている。実際にリリースノートを見ると、ちょくちょくパフォーマンス改善系の変更が入っている。 TypeScript: Documentation - TypeScript 4.…

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

React + CSS Modules なプロジェクトを例にサンプルコードを書いてるけど、それ以外の構成のプロジェクトでも使えるテクニックのはず。記事タイトルは id:hitode909 さんの 似ているけどちょっと違うものたちをモデリングする技術 - hitode909 のリスペクトです。 data 属性, 属性セレクター, CSS カスタムプロパティを使う 記事のリストがあって、記事のカテゴリごとに文字色やボーダーの色を変えたい、みたいな状況だったとする。多分素朴に書くと以下のようになるはず。 import styles from './Entry.module.css'; import …