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

tsconfig.json の include オプションには何を指定すべきか - mizdra's blog

2024/07/27 9 users tsconfig.json

TL;DR "include": ["src/index.ts"] はやめよう src 配下にあるのに型チェックされない & auto-import できないファイルが生まれてしまう "include": ["src/**/*"] や "include": ["**/*"] がオススメ どっちが良いかはプロジェクトによって異なる "include": ["src/**/*"] は "include": ["src"] と、"include": ["**/*... 続きを読む

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

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 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 に来ていない実験的な機能なのですが、どういうものなのか気になったので、先日趣味で作っているプロダクトに導入してみました。で、この記事はその備忘録です。実験的な機能で、これから状況もどんどん変... 続きを読む