mizdra's blog

ぽよぐらみんぐ

msw で handler の mock や spy をする

元々「ServiceWorker をベースにした技術をわざわざテストに持ち込む意味とは?」と思って、msw をテスト環境で使う意義について懐疑的だったのですが、いざ使ってみるとすごく便利ですね。ServiceWorker 云々以前に、ネットワークリクエストの mock ライブラ…

過去に git clone した OSS リポジトリを一覧する

最近 OSS を clone コードを読むことが増えていて、どれくらいのペースでリポジトリを clone しているのか測りたくなってきた。計測は面倒なので気が向いた時で良いとして、計測したくなったときにできるよう、clone したリポジトリ一覧を後から集計できるよ…

ISUCON 12 予選に出場した

id:odan3240 さんと「情報処理部」というチームで出場してきました。 id:odan3240 さんの参加記もあるので合わせてどうぞ: odan3240.hatenablog.com 結果 最終スコア: 3270 何もできなかった... 時系列 結構前の話なのでうろ覚えだけど…大体こういう流れだっ…

趣味と仕事と技術検証

id:mizdra はプログラミングが趣味で、趣味と仕事が一致している。そのため、趣味でプログラミングする時は常に仕事を見据えた技術検証をしている。 業務で webpack/jest を使っているので、趣味でも webpack/jest 使うようにしたり 世の中的には vite/vites…

遠い未来の話をする理由、それは自信を持って前に進むため

id:mizdra は時々仕事で「今の時点で結論を出す必要はない、遠い未来の話」をすることがあります。1年後に考えれば良いことを、今考える、とかです。それをするのは何故か、という話を今日はします。 長期プロジェクトを段階的に進めていくには、不安が付き…

リリースノート自動生成テクニック

普段からいくつか趣味で作ったツールやライブラリを npm パッケージとして publish しています。ちょっと工夫していることとして、「できるだけ簡単に npm publish できるようにしておく」というものがあります。npm publish が心理的に、手順的に難しいと、…

極端なパターンを考えて、技術的な落とし所を探っていく

「React コンポーネントってどこまで細かく分割していいの?」とか、「Jest のスナップショットテストテストってどんなテストにも使っていいの?」とか、技術的な落とし所をどうするか悩むことは結構多いと思う。 コンポーネントを分割すると、責務が小さくな…

チームに提案をする時は傾聴することが大事

「こういう取り組みをチームで始めてみたい」だとか、「新しいコーディング規約を考えてきたので、これを導入してみたい」だとか、「こういうツールを導入してみたい」だとか、チームに対して提案をする場面というのはよくあると思います。実際に提案する際…

見つけた GitHub の Issue を片っ端から subscribe している

あるライブラリを使っていてバグっぽい挙動に遭遇した時、ほぼ必ず当該ライブラリの Issue を検索するようにしている。加えて、見つけた Issue の subscribe ボタンを押して、https://github.com/notifications に通知がいくようにしている。バグ遭遇時以外…

株式会社はてなに入社しました

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

npm-scripts を書く時の手癖

かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型…

ドッキングステーション導入した

Anker の Thunderbolt 4 対応のドッキングステーションを導入したので、その感想とか。 導入以前の配線状況 元々 4K の外付けディスプレイ (Dell U2720Q) 2枚使って、それを Thunderbolt 3 ケーブルで Mac に繋ぐような構成だった。 +---------+ +----------…

Node.js で sourcemap を読み込ませた状態で CLI ツールを起動する

小ネタです。Node.js で CLI ツールを実装する場合、以下のように shebang 付きの実行可能ファイルを用意して、それを package.json の bin フィールドから参照する構成にすることが多いと思います。 bin/eslint-interactive.js: #!/usr/bin/env node import…

chezmoi を使って VSCode devcontainer 対応 dotfiles を作る

趣味開発で使っている dotfiles をリニューアルした。 github.com 以前までの dotfiles では適切なパスへの設定ファイルの配置や、onetime script の実行タイミングの管理に ansible を使っていた。冪等性を確保するために色々な機能が用意されていて、便利…

「ページの編集は大胆に」、転じて「ドキュメントの整理は大胆に」

「ページの編集は大胆に」という考え方 Wikipedia のページの執筆にあたってのガイドラインの1つに「ページの編集は大胆に」というものがあります。簡単に言えば、ちょっとした編集に留まらず、必要であれば大きな編集もしよう、という指針です。 最初のうち…

個人的 Web フロントエンドスキルの獲得方法

ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったの…

TypeScript 4.5 Beta で実装された Node.js ESM 対応を試してみた

ご存じの方もいるかもしれませんが、TypeScript 4.5 Beta で遂に Node.js ESM がサポートされました。まだ Stable に来ていない実験的な機能なのですが、どういうものなのか気になったので、先日趣味で作っているプロダクトに導入してみました。で、この記事…

vscode-jest を導入してテストの開発体験を向上させる

この記事は JavaScript Advent Calendar 2021 の 12日目です。11日目は なかがわはじめ さんの 「Array.prototype.reduce()とかのprototypeってなに?」 でした。 Jest は JavaScript のテスティングフレームワークです。Node.js で動くアプリケーションのテ…

Babel をリファクタリングツールとして使う

この記事は はてなエンジニア Advent Calendar 2021 の 5 日目の記事です。 4 日目は id:anatofuz さんの 「入社してから書いていた分報の行数を眺めてみる」 でした。日報に書き込んだ行数を可視化するというアイデアが面白い! 僕も日報書いているので今度…

1Password のカスタムフィールドを autofill に利用する

1Password にはカスタムフィールドという機能があります。これを使うと、ログインのためのちょっとしたメモや、秘密の質問の答えなど、好きな情報を id/pass とともに記録できます。 秘密の質問の答えを記録している様子 ところでこのカスタムフィールドは、…

Sentry で IP アドレスの収集をやめる

@sentry/browser を使うと、ブラウザでエラーが発生した時にそのエラーを Sentry の集計サーバに送信して記録してくれます。送信されたエラーはエラーの種類ごとに Issue という単位にグルーピングされ、Issue ごとに何件発生しているのか、何人のユーザで発…

巨大なコードベースに対して段階的に新しい ESLint rule を導入する

背景 既存の巨大なコードベースに対して新しい ESLint rule を導入したいことがある ESLint を導入した段階では厳しすぎて OFF にしていたけど、やっぱり便利なので ON にしたい、みたいなケース 例えば @typescript-eslint/no-floating-promises とか しか…

svh という策定中の CSS Unit について

css

CSS Values and Units Module Level 4 という提案にて、 svh という新たな CSS Unit の導入が検討されています。簡単に言うと、ブラウザのナビゲーションバーやオムニボックスの高さを除外した vh です。 There are some changes being proposed regarding v…

nodebrew と homebrew の Node.js が重複しないようにする

普段 yarn を homebrew で管理していているのだけど、yarn が node への依存を持っているせいで、インストールしたり、更新したりする時に Node.js が homebrew で追加でインストールされることがある。けど Node.js は nodebrew で管理しているので、2重で…

icon-suggestion v2 をリリースしました

あの大人気 Scrapbox UserScript の v2 をリリースしました。既に icon-suggestion をお使いの方は、自動で v1 からアップデートされているはずです。 「icon-suggestion って何?」という方はこちら: www.mizdra.net 前バージョンからの変更点 ポップアップ…

JavaScript で print デバッグ時に変数名を出力する

数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slic…

思考実験: Wasm が普及した未来を考える

…という題でサークル仲間とディスカッションして盛り上がっていた。面白いアイデアが色々出てきたので、たまには正確性を無視して思い思いに書いてみる。裏取りは全くしていない。 もし Wasm が普及したら、.wasm に含まれる ホスト言語 (Wasm のコンパイル…

株式会社はてなに入社しました

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

GitHub Packages を npm install するための手段あれこれ

概要 社内向けの npm packages を publish するのに GitHub Packages が便利 GitHub 内で完結してお手軽 & Actions を使って自動リリースフローを作りやすい しかし GitHub Packages に上がっている npm packages を npm install するには少々手間がかかる …

Webpack における bundle size の変化を継続的に監視する

main ブランチとこのPRでどれだけ bundle size が変化したか比較したり、増加量がある閾値を超えていたら CI を fail させる、みたいなソリューションは結構紹介されているけど、bundle size の変化を継続的に監視する方法はあまり紹介されていないようだっ…

ポケットモンスター・ポケモン・Pokémon・は任天堂・クリーチャーズ・ゲームフリークの登録商標です.

当ブログは @mizdra 個人により運営されており, 株式会社ポケモン及びその関連会社とは一切関係ありません.