JavaScript で GraphQL サーバーの技術選定をする際の登場人物 - mizdra's blog

2024/12/15 20 users 技術選定 登場人物 JavaScript isucon ＥＣ

これは はてなエンジニア - Qiita Advent Calendar 2024 - Qiita 15日目の記事です。昨日は id:utgwkk さんの「ISUCONの感想戦を支えるEC2の自動開始・停止、そしてAWS Step Functions」でした。 はてなでフロントエンドエキスパートをしている id:mizdra です。この記事では、JavaScript で GraphQL サーバーの技術選定... 続きを読む

zsh + fzf で「あの時作業していたあのブランチ」を快適に探す - mizdra's blog

2024/10/19 147 users zsh fzf buffer Cursor ブランチ

今まで 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... 続きを読む

React Server Components で時限式コンポーネントを作る - mizdra's blog

2024/08/27 14 users React Server Components 特定 普段

特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/Sched... 続きを読む

tsc の代替実装は作れるのか - mizdra's blog

2024/05/25 14 users rust tsc 実用 移植版 型システム

tsc の代替実装を作る話、とりわけ Rust や Go で tsc を高速化した移植版を作る話について。非常に野心的で面白いと思いつつ、正直僕は実用レベルまで達したものが本当に登場するのか疑問に思っている。今ある型システムもそうだし、新機能として追加されるものにも追従する必要がある。当然、実用レベルとして使っても... 続きを読む

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 から復... 続きを読む

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 へと転送するようにしてみた。せっかくなので、そのや... 続きを読む

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 は、クエ... 続きを読む

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 Subs 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... 続きを読む

iTerm2 で `cat /dev/urandom` すると印刷ダイアログが出ることがある - mizdra's blog

2019/12/04 42 users urandom dev cat 印字 ターミナル

皆さんは /dev/urandom と呼ばれるUnixデバイスをご存知でしょうか. /dev/urandom は一言でいうと擬似乱数を出力する疑似デバイスで, catすると以下のようにランダムなバイト列を逐次的に出力してくれます. 出力するバイトの値域に特に制限は無いため, ターミナルに印字不可能な文字が表示されたりします. 良い具合にバ... 続きを読む

WebAssembly 開発環境構築の本を公開しました - mizdra's blog

2018/05/07 100 users rust WebAssembly コンパイル プログラミング

2018 - 05 - 07 WebAssembly 開発環境構築の本を公開しました JavaScript WebAssembly Rust プログラミング はじめに Rust を用いて WebAssembly の開発環境を構築する手法を紹介する 電子書籍 を執筆・公開しました. WebAssembly への コンパイル が可能な言語である Rust を用いて, WebAssembly の開発環境... 続きを読む