msw を使うと、GraphQL API をモックしてダミーレスポンスを返せます。以下のような handler と、その他少々のセットアップコードを用意するだけで簡単にモックできます。 // src/mocks/handlers.js import { graphql } from 'msw'; export const handlers =…
npm package を作る度にイチから開発環境の構築をしていて大変だったので、自分専用のテンプレートリポジトリを作りました *1。 github.com せっかくなので、テンプレートの特徴とか、どういうこと考えながら作ったとか紹介してみます。 はじめに: 基本的な…
去年の 11 月から続く一連の騒動を受けて、id:mizdra のフォロワーの中でも Twitter から Fediverse に移行してきている人が増えてきた。僕自身は移行するつもりはないけれど、移行したフォロワーが僕のツイートを Fediverse から見れるように、ツイートを M…
株式会社はてなに入社しました 株式会社はてなに入社しました - hitode909の日記
Next.js で開発していると、複数のページの getServerSidePropsで同じようなコードを度々書くことになると思う。例えば 「GraphQL クライアントでクエリを fetch して、そのレスポンスをpagePropsに焼き込むロジック」であったり、「(マルチテナントアプリケ…
登壇とかではなく、いち聴者として参加してきました。 yapcjapan.org 前日祭も参加していて、土日での京都滞在でした。 yapcjapan.connpass.com 僕と YAPC YAPC への参加は去年の YAPC::Japan::Online 2022 に続いてとなり、YAPC::Kyoto 2023 で2回目です。…
id:mizdra は eslint-interactive というツールをメンテナンスしています。このツールを使うと、多数の ESLint エラーを効率的に修正できます (詳しくは以前書いた記事を見てください)。 www.mizdra.net eslint-interactive では「中規模〜大規模なコードベ…
ある機能を実装する際、完成形のコードになるまでには、プログラムとして不正確な状態や、プロダクト品質ではない状態を経る 静的型検査や lint rule に違反したコードが途中に挟まる 型エラーや lint エラーは望ましくないので、できるだけ早くこうした情報…
Web フロントエンドにて、Canvas を使った View のテストを書きたいことがたまにあります。ブラウザであれば以下のようにして Canvas を利用できますが、テストが実行される Node.js ではそのような API は生えていません。 const canvas = document.createE…
最近の Web フロントエンドの開発では、JavaScript/CSS ファイルを bundler (webpack, vite, ...) でバンドルして、それをブラウザに配信することが多いと思います。 例えば以下のようなコードを bundler でバンドルすると、react + react-dom/client + ./lo…
ということに next lint を触っていて気づきました。公式ドキュメントにもそう書いてありました。 next lint runs ESLint for all files in the pages, components, and lib directories. It also provides a guided setup to install any required dependen…
テスト書く腕力鍛えるため & 個人開発のメンテナンスを楽にするために、最近なんでもテストコードを書きまくってます。あらゆるものをテストするぞという気概を持って手を動かした結果、ちょっと変わったテストコードを書いたりしてました。というわけで、こ…
個人開発をテーマにしたこちらのイベントで、5 分の LT をしてきました。 nota.connpass.com 今回は Scrapbox で議事録を高速に取るための UserScript「icon-suggestion」を作った話をしました。 youtu.be scrapbox.io 個人開発というと、限られた時間と人手…
Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクト…
この記事は「はてなエンジニア Advent Calendar 2022」の3日目の記事です。2日目は id:pokutuna さんの「Slack チャンネルのロボット帝国化を防ぐ feed-pruning-proxy」でした。 blog.pokutuna.com さて、TypeScript で React コンポーネントを定義する時、…
DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーション…
弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必…
このパッケージってどこからどう依存されてるんだっけ、と調べる時によく打ってるのでメモ。 npm npm v7 以降であれば npm explain <package> というサブコマンドでできる。npm v7 以前は npm-why や nls を別途インストールしてきて、それを使う必要があった。ちなみ</package>…
最近調べた qwik というライブラリが結構面白かったので、実際どういうものなのかとか紹介してみます。 qwik とは qwik は Web 向けの View ライブラリです (React や Vue.js の仲間)。パフォーマンスオタクがパフォーマンスの最適化 (Web Vitals の改善) に…
25歳になりました。めでたいですね。しかしあと1年したら、20代後半突入なんですね… こちらいつものやつです: $ npx @mizdra/happy-birthday こちらは例のリンクです。 コミック: https://www.amazon.jp/hz/wishlist/ls/2AB3HPTXIID2W?ref_=wl_share 色々: h…
元々「ServiceWorker をベースにした技術をわざわざテストに持ち込む意味とは?」と思って、msw をテスト環境で使う意義について懐疑的だったのですが、いざ使ってみるとすごく便利ですね。ServiceWorker 云々以前に、ネットワークリクエストの mock ライブラ…
最近 OSS を clone コードを読むことが増えていて、どれくらいのペースでリポジトリを clone しているのか測りたくなってきた。計測は面倒なので気が向いた時で良いとして、計測したくなったときにできるよう、clone したリポジトリ一覧を後から集計できるよ…
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 のスナップショットテストテストってどんなテストにも使っていいの?」とか、技術的な落とし所をどうするか悩むことは結構多いと思う。 コンポーネントを分割すると、責務が小さくな…
「こういう取り組みをチームで始めてみたい」だとか、「新しいコーディング規約を考えてきたので、これを導入してみたい」だとか、「こういうツールを導入してみたい」だとか、チームに対して提案をする場面というのはよくあると思います。実際に提案する際…
あるライブラリを使っていてバグっぽい挙動に遭遇した時、ほぼ必ず当該ライブラリの Issue を検索するようにしている。加えて、見つけた Issue の subscribe ボタンを押して、https://github.com/notifications に通知がいくようにしている。バグ遭遇時以外…
株式会社はてなに入社しました 株式会社はてなに入社しました - hitode909の日記
