fetch の中断と Back/Forward Cache からの復元で発生する奇妙な現象について - mizdra's blog

2023/12/14 11 users fetch throw back forward cache

TL;DR あるリソースの fetch 中にページ遷移すると、一部ブラウザでは fetch が中断される 中断されると、TypeError が throw される ページ遷移時は、ブラウザによって遷移前のページの実行が"停止"され、"捨てられる"ので、通常 throw された後のことは考えなくて良い しかし、そのページが Back/Forward Cache から復... 続きを読む

ESLint の Suggestions から学ぶ、コードの自動修正の奥深さ - mizdra's blog

2023/12/04 9 users eslint SQLite Linter mechairoi

これは、はてなエンジニアアドベントカレンダー2023 4日目の記事です。 3日目は id:mechairoi さんの「SQLiteでLinderaを使った日本語全文検索」でした。 blog.chairoi.me 今日のテーマは、JavaScript 向けの Linter 「ESLint」についてです。ESLint を使うと、JavaScript で書かれたコードを静的解析して、よくある間違... 続きを読む

GraphQL のレスポンスのモックデータの作成を補助する TypeScript ライブラリを作った - mizdra's blog

2023/09/28 8 users GraphQL レスポンス リグレッションテスト story

GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し... 続きを読む

Next.js で言語ごとに異なるアセット画像を埋め込む - mizdra's blog

2023/08/03 7 users Next.js 言語ごと アセット たまー バッジ

多言語対応している Web アプリで、あらかじめファイルに書き出しておいた画像 (アセット) が言語別にあって、それをページに埋め込むにはどうするか、という話題です。基本は言語ごとに別々の画像を出すことないと思いますが、たまーにあるんですよね。例えばGoogle Play のバッジが言語ごとに違うので、これを言語ごと... 続きを読む

アセットの import を簡単にする TypeScript Language Service Plugin を作った - mizdra's blog

2023/07/10 7 users import アセット Components header

Web ページを作るときに、あらかじめファイルに書き出しておいた画像 (アセット) をページに埋め込みたいことがよくあると思います。例えばヘッダーにサービスのロゴ画像を埋め込む場合、以下のようなコードを書くと思います。 // src/components/Header.tsx export function Header() { return ( <header> <img src="/a... 続きを読む

npm package を実装するための自分専用テンプレートリポジトリを作った - mizdra's blog

2023/05/01 10 users npm package github.com イチ 構築 特徴

npm package を作る度にイチから開発環境の構築をしていて大変だったので、自分専用のテンプレートリポジトリを作ってみました *1。 github.com せっかくなので、テンプレートの特徴とか、どういうこと考えながら作ったとか紹介してみます。 はじめに: 基本的な技術スタック npm TypeScript Node.js Native ESM Prettier... 続きを読む

Twitter に投稿したツイートを Mastodon に転送するようにした - mizdra's blog

2023/04/08 170 users Twitter mizdra Fediverse 一連 騒動

去年の 11 月から続く一連の騒動を受けて、id:mizdra のフォロワーの中でも Twitter から Fediverse に移行してきている人が増えてきた。僕自身は移行するつもりはないけれど、移行したフォロワーが僕のツイートを Fediverse から見れるように、ツイートを Mastodon へと転送するようにしてみた。せっかくなので、そのや... 続きを読む

YAPC::Kyoto 2023 に参加してきた - mizdra's blog

2023/03/21 7 users YAPC 登壇 yapcjapan.org Japan 去年

登壇とかではなく、いち聴者として参加してきました。 yapcjapan.org 前日祭も参加していて、土日での京都滞在でした。 yapcjapan.connpass.com 僕と YAPC YAPC への参加は去年の YAPC::Japan::Online 2022 に続いてとなり、YAPC::Kyoto 2023 で2回目です。オフラインの YAPC は初めてでした。 また、別の話として新卒入... 続きを読む

CPU シュミレータを用いて継続的ベンチマークを安定化させる - mizdra's blog

2023/02/12 16 users ベンチマーク 安定化

id:mizdra は eslint-interactive というツールをメンテナンスしています。このツールを使うと、多数の ESLint エラーを効率的に修正できます (詳しくは以前書いた記事を見てください)。 www.mizdra.net eslint-interactive では「中規模〜大規模なコードベースであってもキビキビ動く」を大事にしてます。その一環とし... 続きを読む

試行錯誤を邪魔しない開発環境 - mizdra's blog

2023/01/30 134 users 試行錯誤 開発環境

ある機能を実装する際、完成形のコードになるまでには、プログラムとして不正確な状態や、プロダクト品質ではない状態を経る 静的型検査や lint rule に違反したコードが途中に挟まる 型エラーや lint エラーは望ましくないので、できるだけ早くこうした情報を開発者に伝え、気付けるようにすると良い CI でこうしたエラ... 続きを読む

Web フロントエンドにおけるコロケーション (co-location) という考え方について - mizdra's blog

2022/12/11 75 users コロケーション ディレクトリ クエ 文献 フロントエンド

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエ... 続きを読む

React コンポーネントの定義の仕方によって VSCode の定義元ジャンプの挙動が変わる - mizdra's blog

2022/12/03 7 users vscode TypeScript 挙動 関数宣言 定義

この記事は「はてなエンジニア Advent Calendar 2022」の3日目の記事です。2日目は id:pokutuna さんの「Slack チャンネルのロボット帝国化を防ぐ feed-pruning-proxy」でした。 blog.pokutuna.com さて、TypeScript で React コンポーネントを定義する時、皆さんはどういう書き方をしてますか? 関数宣言/アロー関数どち... 続きを読む

Prisma で本物のDBMSを使って自動テストを書く - mizdra's blog

2022/11/24 126 users Prisma mock DBMS ロジック 下位

DBMS に依存するロジックのテストを書く時、主に2つの手法があると思います。 Repository 層などを mock する Service 層のテストをする時は、その下位の Repository 層を mock して、DBMS に依存しない形にしてからテストする レイヤードなアプリケーションで適用できる手法 テスト実行時も DBMS を裏で動かして、それ... 続きを読む

コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog

2022/11/14 84 users React CSS Modules CSS デモ 手法

弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みにつ... 続きを読む

qwik の発明、及びマイクロフロントエンドへの活用について - mizdra's blog

2022/10/27 156 users React Qwik ライブラリ 発明 Vue.js

最近調べた qwik というライブラリが結構面白かったので、実際どういうものなのかとか紹介してみます。 qwik とは qwik は Web 向けの View ライブラリです (React や Vue.js の仲間)。パフォーマンスオタクがパフォーマンスの最適化 (Web Vitals の改善) にこだわって作ったライブラリです *1。 すでにいくつも良い紹介... 続きを読む

リリースノート自動生成テクニック - mizdra's blog

2022/07/08 160 users

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

見つけた GitHub の Issue を片っ端から subscribe している - mizdra's blog

2022/04/29 108 users Notifications github.com 通知 理由

あるライブラリを使っていてバグっぽい挙動に遭遇した時、ほぼ必ず当該ライブラリの Issue を検索するようにしている。加えて、見つけた Issue の subscribe ボタンを押して、https://github.com/notifications に通知がいくようにしている。バグ遭遇時以外にも、何らかの理由で Issue に到達した時にその Issue を subs... 続きを読む

npm-scripts を書く時の手癖 - mizdra's blog

2022/03/24 186 users 手癖 npm-scripts MIZ 長年 ノウハウ

かれこれ 5 年くらい趣味開発で npm-scripts を書き続けている。長年書き続けているとノウハウが蓄積されてきて、「こう書くとスッキリする」「迷いがなくなる」「後から拡張したくなった時に、簡単に拡張できる」みたいな書き方が身についてきた。自分の型、あるいは手癖のようなものだと思う。 せっかくなので、id:miz... 続きを読む

個人的 Web フロントエンドスキルの獲得方法 - mizdra's blog

2021/12/30 616 users フロントエンド プロダクト 体制 web フロントエンド会

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

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

2021/12/30 17 users Node.js ESM Stable 備忘録 ご存じ 趣味

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

Sentry で IP アドレスの収集をやめる - mizdra's blog

2021/09/29 12 users Browser Sentry Issue 増減 ユーザ

@sentry/browser を使うと、ブラウザでエラーが発生した時にそのエラーを Sentry の集計サーバに送信して記録してくれます。送信されたエラーはエラーの種類ごとに Issue という単位にグルーピングされ、Issue ごとに何件発生しているのか、何人のユーザで発生しているのか、過去2週間にどれぐらいのエラー数の増減があ... 続きを読む

JavaScript で print デバッグ時に変数名を出力する - mizdra's blog

2021/05/02 206 users 変数名 JavaScript

数列の和を求めるプログラムを作成することになり、意気揚々と以下のようなプログラムを書いたという状況を想像して下さい。 function sum(nums, acc = 0) { if (nums.length === 0) return 0; if (nums.length === 1) return nums[0]; return sum(nums.slice(1), acc + nums[0]); } const nums = [1, 2, 3, 4, 5, 6, 7,... 続きを読む

ブラウザにおけるメモリリークを解決するために読んでおけると良い資料 - mizdra's blog

2021/02/08 396 users メモリリーク 知見 アプリケーション 冒頭 過程

最近趣味や仕事の Web アプリケーションでメモリリークに遭遇して、頑張ってメモリリークの原因を突き止めて修正する、ということがあった。その過程でメモリリークについて色々調べて知見が溜まったので、学習資料の紹介という形でアウトプットしてみる *1。 前提 紹介する記事がかなり偏っていることに注意 冒頭で触れ... 続きを読む

polyfill を深堀りする - mizdra's blog

2020/12/05 21 users Polyfill 深堀

この記事ははてなエンジニア Advent Calendar 2020 5日目の記事です。4日目は id:syou6162 さんで、数字のバラ付きを考慮して意思決定する技術でした。 qiita.com developer.hatenastaff.com こんにちは、id:mizdra です。今年新卒としてはてなに入社し、WebアプリケーションエンジニアとしてGigaビューワーというマンガ... 続きを読む

画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

2020/05/31 306 users web fetch 画像 img 古来

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む