RenovateとDependabotのレビュワーを一元管理する
RenovateとDependabotを併用する場合、CODEOWNERSファイルを活用することでレビュワー設定を一元管理できる。
In Progress
- Building a Design System in 2024 Coming soon...
- React Server Components: A Deep Dive Coming soon...
- Refactoring Legacy Codebases Coming soon...
- The State of CSS in 2025 Coming soon...
Latest Post
RenovateとDependabotのレビュワーを一元管理する
RenovateとDependabotを併用する場合、CODEOWNERSファイルを活用することでレビュワー設定を一元管理できる。
Read PostAll Posts
GitHub releases APIを用いたXR Animatorの自動更新
GitHub Releasesにある最新のリリース情報は固定のURLから取得できる。これを使って自動更新やUI上から更新をサポートしていないXR Animatorの自動更新をサポートする。
GASにサービスアカウントは利用できない
Google Apps Script (GAS)には、コードをリポジトリで管理しCI/CDで自動的に同期したい需要が強くある。 さらにチーム開発であれば、個人アカウントに依存しないWorkload Identityやサービスアカウントを利用したい需要も発生する。
GASのproject keyからscript idを取得する
Google Apps Scriptのログを見ると、なぜかscript idを含まず非推奨であるproject key含んでいる。他にもdeployment idやprocess id、user keyなどを含んでいるが、これらからログがどのScriptと紐づいているか特定することは困難に思える。
VercelでSubdomain Takeover出来るのか
少なくとも現在はVercelでSubdomain Takeoverを行うことは難しい。
ModalとDialogの分類
ModalとDialogは混同されることがあるが、そもそもレイヤーの異なる概念である。 ここでは混同の解消を目的に、これら及び関連用語の大まかな説明を行い、より正しい分類を示す。
Warudoブループリント集
Warudoハンズオンを実施する際に、サンプルとして作成したブループリント集。随時追加予定。
Q. 多言語対応をしたNuxt製のサイトでタイトルが部分的にしか表示されない
Nuxtの標準的な多言語対応ライブラリである@nuxtjs/i18n（vue-i18n）はパイプ（|）区切りを特殊文字として複数形の表現に利用するため、この仕様を知らずに利用していた箇所でタイトルが部分的にしか表示されない問題が発生していた。
ComfyUIでQwen-Image-Editを試す
ComfyUIでQwen-Image-Editを試した結果をまとめる。 ComfyUIが提供するテンプレートが良く出来ており、Lightingもすぐに導入できるようになっている。オブジェクトの追加・削除・変更などは安定して出来たが、スタイルの変更やテキストの編集には一部難があるように感じた。
Google Cloudでサービスを利用している認証情報を特定する
1つのプロジェクトで複数のプロダクトを運用してしまっているケースがよく見られます。 この場合、どのプロダクトで特定のGoogle Cloudサービスが利用されているか特定するには少し上長な手順が必要です。 実際に調査する際に利用した手順を紹介します。
GitHub Copilot Reviewを日本語にする
まだOrganization全体でGitHub Copilot Reviewの言語設定を切り替えることは出来ませんが、リポジトリ毎であれば.github/copilot-instructions.mdで応答する言語を指示できます。
NanobrowserとローカルLLMでブラウザを操作する
Nanobrowserは、オープンソースのAIウェブエージェントであり、完全に無料で利用することが出来ます。 また好きなLLMプロバイダと接続することができ、Nanobrowser自体の動作は全てローカルブラウザ内で行われます。
SquarespaceからCloudflareにドメイン移管する
Squarespaceで契約していたドメインをCloudflareに移管する作業を行った。ウェブサイトビルダーとしての機能に特化したSquarespaceから、Cloudflareに移管することでパフォーマンスやセキュリティを重視したサポートが受けられる。また今回のケースでは、ドメインの年間更新費用を約2200円から約1400円に削減できた。移管手数料は実質無料で行える。
Pagefindをローカル開発時でも動作させる
Pagefindの利用例を調べると、開発時はダミーデータを渡している実装しか見つからなかったが、ダミーデータの作成やコード上の分岐が増えることが億劫だったため、開発時も本番相当のデータが表示されるようにした。
投稿のひな型を生成するスクリプトを新しくした
Geminiを利用して投稿のタグやスラッグを自動生成し、ファイルが作成されたら現在開いているエディタで自動的に開かれるようにした。
Workspace内のGASのメトリクスを定期取得する
Google Apps Script APIを利用することで、GASのメトリクスを取得できる。自分が管理しているGASのメトリクスを取得するだけであればAPIを叩くだけだが、Workspace内のGASのメトリクスを取得する場合は工夫が必要になる。
外部にあるmarkdownファイルをAstroのContent collectionsに追加する
Astro 5.12.3 で、GitHub プロフィールをそのまま About ページに表示したくなった。 そこで他のリポジトリで公開している README.md を取得する loader を作成した。
Q. CircleCIでPEP 668エラーが発生するようになった
いくつかの CircleCI を利用しているプロジェクトで、ある時期を境に PEP 668 エラーが発生するようになった。 これは CircleCI が提供する Docker イメージの Ubuntu が非自明的に上がることにより、意図せず PEP 668 に従った Ubuntu 24.04 になってしまったことによる。
Storybook v9へのマイグレーションのメモ
ほとんどは公式の自動更新コマンドで移行が完了する。Storybook v9への移行を複数のリポジトリで行う必要があるため、作業をメモに残した。他リポジトリで差分があれば追記する。
RenovateのPR数を削減するパターン
Renovateが作成するPR数を削減しレビュー負荷を軽減する設定パターンをいくつか紹介する
Fairseqを利用したRVCアプリのGradio v5アップグレードに伴う依存関係エラーとその対策
Hugging Face Spacedでホスティングしているfairseqを利用したアプリをGradio v5へ更新する際に発生した依存関係エラーと対応メモ。
Q. 古いブラウザ用のアプリでライブラリをアップデートしたら動作しなくなった
Polyfillがアップデートしたライブラリに適用されておらず、古いブラウザで利用できないメソッドが呼び出されランタイムエラーが発生していた。Polyfillを適用する設定を見直すことで対応した。
Playwrightでスクリーンショットの保存先をカスタマイズする
Playwright のスクリーンショットは、例えばtoHaveScreenshotのデフォルトでは次のような形式で保存される。
Playwrightでテスト実行時にweb serverを立ち上げる
Playwright で書かれたテストの改修をしていると、CI 上でホスティングサービスにデプロイした URL を貰ってきてから実行しているケースが度々見られるが、Web Server を立ち上げて実行した方が良いことが多い。
GitHub Actionsを利用してリリースノートの生成を自動化する
GitHub CLIを利用してリリースノートを生成する方法とGitHub Actionsでの使用例の紹介
AIなどの特定ユーザーの作成したPRに要求するApproval数を増やす
Botなどが作成したPull Requestに対して、GitHub Actionsを利用して通常より多くのApproveを要求する方法
他者への恐怖と自己バイアスの発見または他者との対話の重要性
日常の会話や経験を通じて気づく、無意識のバイアスと価値観の偏りがもたらす認識のズレと、そのズレを通じて深まる自己理解の重要性
全体への注意喚起が引き起こす"静かな分断"
全体への注意喚起という怠慢がチーム内に引き起こす信頼関係の崩壊と、信頼を生む誠実な注意
MCPサーバーの概観
MCPの仕様、SDKやサーバーの例、MCPのサポート状況、セキュリティ上の懸念、代替の可能性について。
CSSカルーセルを試す
Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法
AWS CDK CLIとCDKコンストラクトライブラリのバージョンが一致しなくなった
aws-cdkとaws-cdk-libはv2.174.0以降バージョンが一致しなくなったことについて。また、有効な組み合わせの判定が困難になったため簡易なリリース日による判定について。
VercelでCloudflareのプロキシを使用した際のリダイレクトループ
VercelでCloudflareのプロキシを使用する際に発生する「err_too_many_redirects」エラーの原因と解決方法について
Tailwind CSSはAIフレンドリーではない。
Tailwind CSSがAIフレンドリーである負債になりにくいといった主張について、少なくとも現状は違うという認識を持っています。
スライドパズルが解けるかの判定
スライドパズルの状態は置換群として表現できるため、置換群の性質を利用して判定することが出来る。
golangci-lintをgo toolでインストールすべきでない
golangci-lintのソースからのインストールは動作が保証されていません。バイナリをインストールするべきです。
Go 1.24でgolangci-lintがエラーを吐くようになった
Go 1.24でgolangci-lintを扱うには、Go 1.24でビルドされたgolangci-lint 1.64以上である必要がある
GitHub Dependabot Alertを有効化したらRenovateが対象のPRを投げてくれる
Dependabot Alertを有効化するだけで、RenovateがセキュリティPRを投げてくれるようになる
Q. Go言語である型を満たす型パラメータとその型自体が違う型と言われる
型パラメータを持つ型と具体的な型は区別される。
自分のデザインを説明する
自分のデザインの説明責任を果たすことの大切さ、説明責任とアブダクションラインについて
GitHub Sub-issuesのすすめ
Sub-issuesを利用することで、GitHubで完結したIssue管理、特に進捗管理が容易になる。
Q. gomockでフィールドの部分一致を検証したい
Custom matcherを利用するか、Doメソッド内で検証するか
OpenAPIでoneOfやanyOfを使うのは避けるべき
ツールのサポートが不十分な上、言語やツールによって扱いが異なるため、おすすめしない。
傍から見たスクラム
スクラムについて漠然として自分が思っていることをある程度まとめたもの。
list-styleを無効化したul要素にlistロールを指定すべきなのか？
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
Setup ComfyUI for 2025
知人のために2025年版 ComfyUIのセットアップを紹介する内容です。細かいところは直接説明するので省いています。
Faker.js v9.5.0 でAI生成されたアバター画像を利用する
Faker.js v9.5.0で追加されたpersonPortraitメソッドについて紹介する。
AstroではGoogle Fontsを直接利用しない方が良いかもしれない
Astroはstylesheetを巻き上げてしまうため、preconnectなどの指定より前にGoogle Fontsの読み込みが開始されパフォーマンスが悪化する可能性がある。
CloudflareのBot Fight ModeがSlackでのOGP表示をブロックしている可能性がある
CloudflareのBot Fight Modeが有効な場合に、SlackでOGPが表示されなくなる挙動を数件のサイトで確認した。
GitHub Copilot Agent Modeを試す
現在はプレビューなため、Agent ModeはVSCode Insidersでのみ利用可能。合わせてCopilot Editsが一般公開、またVisionもプレビューでの利用が可能になった。
Q. GopdfでフォントをNoto Sans CJKに変更したら文字が細くなった
PDFを出力するツールやライブラリにはバリアブルフォントを対応していないものがあり、意図した表示にならない場合がある。
Q. aws-cdkがCloud assembly schema version mismatchエラーを吐く
aws-cdkの関連パッケージのバージョンが一致していない場合、Cloud assembly schema version mismatchエラーが発生する可能性がある。
AstroでTailwind CSSをv4にアップグレードした
現在ブログとして運用しているサイトのAstroをTailwind CSS v4にアップグレードした際の内容をまとめる。
Ref callbackとcleanup functions
Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。
Invalid WebSocket frame: RSV1 must be clearについての調査ログ
macOSで開発を行っていると遭遇した「RangeError: Invalid WebSocket frame: RSV1 must be clear」エラーについて調査した際のログ。
PRが閉じられたら自動的にNetlifyのDeployを削除する
NetlifyにはDeployを自動的に削除する機能があるが、よりコントロールしたい場合にはNetlify APIが利用できる。この記事では、Github Actionsで自動的にNetlifyのDeployを削除する方法について紹介する。
BigQueryのフィールド取得とクエリで利用できる型への変換
取得できるBigQueryのフィールドの型のいくつかは、クエリにそのまま利用することが出来ない。GolangのBigQueryパッケージを利用してスキーマを取得し、クエリで利用できるように変換する方法について。
Web ComponentsのReact v19対応
React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。
コミット前に画像を圧縮させる
sharpを使って画像を圧縮するスクリプトを、lefthookを利用して画像をコミット前に圧縮させる方法について紹介する。
Q. git pushすると400エラーが発生する
大きなファイルをpushしようとすると、http.postBufferの制限に引っかかり400エラーが発生する場合がある。
Astro 5へのマイグレーションを行った
公式ドキュメントなどを参考にAstro 5へのマイグレーションを個人的に行った際のメモ
Q. BigQueryでクエリを実行するとNo matching signature for function IFNULLエラーが出る
型の指定がない場合、NULLがINT64と判定され、強制変換可能でないデータ型に対してIFNULLを使うとエラーが発生する。
StreamDeckをVTube Studioと連携する
StreamDeckのVTube Studioプラグインを利用して、StreamDeckからVTube Studioを操作できるようにする方法を紹介する。
VitestでsetTimeoutやsetIntervalなど時間が関与したコードのテストを記述する
VitestではFake Timer APIを利用することで時間に依存するコードを柔軟に且つ短時間でテストすることができる。
YouTubeの合成コンテンツ規制
規制を受けているYouTubeのコンテンツを調査する上で、 YouTubeの改変コンテンツと合成コンテンツについてのポリシーについて調べた内容をまとめた。
Playwright v1.49の変更によるChromiumダウンロードコストの変化
Playwirght v1.49の変更によるChromiumのダウンロードコストの変化を計測した。
Q. ローカル環境でのE2EテストがReactDevOverlayにより失敗する
Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について
Renovate - On demand config migration
RenovateのDependency DashboardからConfigを新しいスキーマに移行できるようになった。
QRコードを簡単に生成する
QRコードを生成するライブラリは多く存在する。また、一時的なもので良ければURLで生成できるサービスもある。
Q. golangci-lintがnode_modules内のGoファイルを検査してしまう
exclude-dirsで、特定のディレクトリを除外することができる。
Q. gh pr createでレビュワーをチームに変更したら、Github Actions上で動作しなくなった
gh pr createでレビュワーをチームにする場合、追加で`read:org`の権限が必要になるため、デフォルトのsecrets.GITHUB_TOKENでは動作しなくなる。`repo`と`read:org`の権限を持ったPersonal Access Tokenを使うことで解決できる。
Q. 削除された変数への参照が、グローバル変数と一致しているためエラーが出ない
ESLintのno-restricted-globalsルールを利用することで、グローバル変数を禁止して、意図しないグローバル変数への参照を防ぐ。
How to make Github Actions matrix items conditional
Github Actionsのmatrixのアイテムを条件によって切り替える方法について
ページを離れた際に呼ばれるブラウザイベントについて
ページを離れた際に呼ばれるブラウザイベントについて、共有したくなったので改めて少し調査した上でまとめた。
Githubの検索に使える記述について
Githubの検索については公式ドキュメントが十分にまとめられている。しかし、少し辿りにくいようなので、人に共有しやすいように公式ドキュメントのリンクや一部の記述についてまとめた。
Github ActionsにおけるNode.jsパッケージのキャッシュについて
Github ActionsにおけるNode.jsパッケージのキャッシュについて、actions/setup-nodeの推奨する方法やnode_modulesをキャッシュする方法、その周辺について紹介する。
Storybookでサイドバーのラベルにタグを付ける
Storybookでサイドバーのラベルにタグを付ける方法を紹介する。ラベルにタグを表示することで、コンポーネントの状態などを分かりやすくできる。
Windowsでcargo build実行時にlinkerが見つからないエラーが発生した
linker `link.exe` not foundに対処した際のメモ
Google検索をカスタマイズして埋め込む
特定のいくつかのサイトを対象にした検索エンジンを埋め込む需要があったため、Google検索の埋め込みについて調査した。
なるべく低コストな小規模オンライン予約システムを探す
ほぼ運用コスト0円で、なるべく早くオンライン予約サービスを作りたいという相談を受けた。決済や予約が絡むサービスを一から作るのはコストが高すぎるので、要望を叶えられるサービスを調査した。
カラオケJOYSOUND for STREAMERの利用規約を配信者向けに読む
カラオケ JOYSOUND for STREAMER は、JOYSOUND が提供予定の配信者のためのカラオケアプリであり、搭載されている楽曲はすべて配信に利用できるとしている。 また基本料金は無料（ジャンルに無料プレイが含まれている）であり、利用には月額課金が必要と書かれているが、無料楽曲の搭載も予定しているとのことだ。 https://store.steampowered.com/app/2939590/JOYSOUND_for_STREAMER/
Q. マネージャーを信用できない非難したい
マネージャーの指示が間違っており損害を受けたので非難をしたいという相談を受けた際の対応をまとめた。
actions/setup-nodeのcacheはnode_modulesをキャッシュしない
actions/setup-nodeのcacheが期待通りに動作しないことは認識していたが、改めて調べたらそもそもnode_modulesをキャッシュしないことが分かった。
actions/setup-nodeでnode-version-fileの利用を勧める不純な理由
actions/setup-nodeではnode-version-fileを利用することで、利用されるNode.jsのバージョンをpackage.jsonなどに合わせることが出来る。これだけで便利だが、他にもお勧めできる不純な理由がある。
ESLintでエラーが出ているルールをjqを利用してリスト表示する
ESLintのあるプラグインを更新する際にエラーが出ているルールの一覧が欲しいという話があったので、jqを利用してエラーが出ているルールをリスト表示する方法を考えた。
Unreal Engine 5.4でVMC Protocolを利用する
Unreal Engine 5.4でVirtual Motion Capture Protocol（VMC Protocol）を利用して、モデルにアニメーションを適用する方法をメモした。
Unreal Engine 5.4でVRMを動かす
Unreal Engine 5.4でVRMをインポートして、動作確認をした際の手順をメモした。
Q. GTMでページがiframe内のページとして認識されてしまう
同一ドメインのページをiframeで読み込んでいる場合、Google Tag Manager（GTM）がiframe内のページとして認識される挙動を確認した。相談を受けた際の内容をまとめる。
Q. コンポーネントをuseCallbackで作るかスコープ外の関数として切り出すべきか
個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った
Renovateのレビュワーにチームを指定して運用する
Renovateでレビュワーを指定する際、Githubで設定したチームを指定することで、放置される可能性を減らしたり、チームメンバーが変わっても設定を変更する必要がなくなるなどのメリットを受けられる。
Q. Renovateでauto mergeが上手く動作せず、レビュワーが設定されない
Renovateでauto mergeを有効化した上で、Githubのブランチプロテクションでレビューを必須にした場合、適切な対応を行わなければオートマージが行われずレビュワーも設定されない。これによりRenovateのPRが見逃されるケースがあり、相談を受けた際の説明をまとめた。
色空間とOKLCHを利用したカラーパレットの生成
CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。
iOS Safariの音声再生における制限とその回避策の検証
ブラウザでは音声の自動再生を防ぐ目的で、音声の再生が制限されている。この記事では、特に制限が厳しいと言われるiOS Safariについて、その制限と回避策の検証を行った内容をまとめる。
Homebrew - Error: Permission denied @ apply2files
Homebrewで任意のパッケージをインストールしようとするとError: Permission denied @ apply2filesというエラーが出るようになった際の対応をメモした。
WindowsからHugging Faceにssh接続する
Hugging Face固有の内容はほぼない。Windows環境からSSH接続しようとするとError connecting to agentと言われた。その対応をまとめる。
Canvasを使ってカーソルにエフェクトを付与する
Canvas APIを利用してマウスに追従するエフェクトを付与する方法を紹介する。
AstroでMarkdownのレンダリングにカスタムコンポーネントを利用する
AstroではMarkdownファイルにMDXやMarkdocと同様のAPIが利用できないため、Gatsybyなどの同様にremarkなどのpluginを利用する必要がある。
フロントエンドテスト講座を開催した
フロントエンドテスト講座を行った際の内容をまとめた。
Github Workflowsで環境に応じて異なるSecretsやVariablesを使う
Github WorkflowsでEnvironment SecretsやEnvironment Variablesを使って環境に応じて異なるSecretsやVariablesを使う方法を紹介する。
ホテルや民泊でリッチリザルトを表示するための構造化データについて
ホテルや民泊を掲載しているサイトでリッチリザルトを表示するために、どのように構造化データが利用されているか調査した。
Tailwind CSSに新しいクラス、ユーティリティを追加する
Tailwind CSSに新しいクラスつまりユーティリティを追加するには、設定ファイルにプラグインを追加するか、自分でプラグインを作成する必要がある。
PCで流れている曲を検索する
Shazamを使えばいい。PCで流れている音楽を検索する方法を紹介する。ブラウザで流れている音声を検索する方法や、周囲で流れている音声を検索する方法、モバイルで検索する方法について。
React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。
React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。
Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった
overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。
Q. React Routerでページ遷移してもErrorBoundaryがリセットされない
React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。
Tabs using Parallel Routes with Next.js App Router
公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。
Release vscode-apacheconf-snippets v1.4.0
約5年振りにhrdtbs/vscode-apacheconf-snippetsのリリースを行ないました。
Q. Git pullすると、いくつかのファイルのトラッキングが解除される
Git pullするといくつかのファイルのトラッキングが解除されたように見える状況の調査についてまとめた。
React 19の機能を見る会のメモ
React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。
明示的に無効化されたインタラクティブ要素でTooltipを気軽に表示すべきでない
無効化されたbuttonやinputなどのインタラクティブ要素にツールチップを表示したいという相談を複数回受けたので、その問題点と代替手段についてまとめた。
Q. ESLintで特定のpropsを禁止にしたい
ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。
Q. ESLintで特定の要素の利用を禁止したい
ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。
VitestのspyOnは同一ファイルの別関数をモックできない
VitestのspyOnは、Jestなどと異なり同一ファイルの別関数をモックできない。ただし、これはVitestのスコープ外の問題であり、Jestなどでも同条件であれば同様の制限が発生する。
Setup Stylelint v16 for CSS-in-JS
StylelintはCSS-in-JSで扱うことが少し困難になった時期に使わなくなっていたが、久しぶりStylelintを調べると十分に対応されていたので、導入を行った。その際の設定方法を記載する。
Q. 指定されたパスのすべてのモジュールをモックするmockメソッドは巻き上げられる
Vitestでモックが上手く動作しないと相談されたので、その理由などについてまとめた。
よくある設計→Webデザイン→実装の流れ、そのQ&A
一般的なWebデザインの流れについて質問があったため、その流れとよくあるQ&Aをまとめた。
ESLint Config InspectorをGithub Pagesにデプロイする
ESLint Config InspectorをGithub Pagesにデプロイする方法について紹介する。
特定のディレクトリやファイルをRenovateに無視させる
Renovateには特定のファイルやディレクトリを無視させる機能があり、デフォルトではnode_modulesなどを無視するようになっている。
React向けESLint pluginのESLint v9対応状況
ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。
fireEventではなくuserEventを使う
fireEventではなくuserEventを使うべき理由と、userEventの使い方、userEventが対応できないケースについて解説する。
Q. textareaに掛けたfield-sizing: content; width: 100%;が効かない
textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。
Q. Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになった
Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。
Q. position: stickyが効かない
position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。
Q. Remix Cloudflareで404 not matchエラーが出る
Remix + Cloudflareの環境で、トップページのOutlet内部のコンテンツが表示されず、他のページでは404 Not matchエラーが発生するようになったと相談を受けたので、その原因と解決策についてまとめた。
Q. CircleCI上で特定のmoduleをインストールさせたらrequires go >= 1.22で落ちた
CircleCI上で特定のmoduleをインストールさせたらrequires go >= 1.22で落ちたと質問を受けた際の対応についてまとめた。
Reactでrefをマージする
Propsから受け取ったrefを内部的なrefとマージする方法を紹介する。
Q. go mod tidyしたらruntime error: invalid memory address or nil pointer dereference
go mod tidyを実行したらruntime error: invalid memory address or nil pointer dereferenceエラーが発生した問題について解決策をまとめた。
Q. pull_requestトリガーのworkflowがなぜか実行されていない
Github Actionsのpull_requestトリガーのworkflowがなぜか実行されていないという相談を受けたので、その原因と解決策についてまとめた。
Q. refが取れないので非制御コンポーネントに出来ない
refが取れないので非制御コンポーネントに出来ないという相談を受けたので、非制御コンポーネントとrefの関係について説明した
Playwrightの動画を取りたい
Playwrightのテスト結果を動画で録画する方法について紹介する。
Renovateの設定をバリデーションする
Renovateは公式が設定をバリデーションする機能を提供している。
Q. Goのバージョンをv1.21に上げたらgolangci-lint v1.52でerrors parsing go.mod: … unknown directive: toolchainとエラーが出る
Goのバージョンをv1.21に上げたら、golangci-lint v1.52でerrors parsing go.mod: … unknown directive: toolchainとエラーが出る問題について解決策をまとめた。
prCreationがnot-pendingになっているGithubリポジトリでRenovateが動作しなくなっていた
RenovateがPRを作成するタイミングをnot-pendingにしている場合、Githubのブランチプロテクションでpull_requestトリガーのGithub Workflowを必須にしているとPRが作成されなくなることについて説明する。ｌ
Prettierで特定のファイルに適用されるParserを変更する
Prettierで特定のファイルに適用されるParserを変更する方法について紹介する。
Q. VSCodeが勝手にテストを走らせるようになった
VSCodeが勝手にテストを走らせるようになったという相談を受けたので、その理由と対応についてまとめた。
Q. Github Workflowsが落ちたらIssueを作らせたい
Github Workflowsが落ちたらIssueを作らせる方法について調査した結果をまとめた。
余計なDOMを追加せずにinput[type="file"]を装飾する
file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。
Q. yarn upgradeするとcanvas: Command failedと言われ失敗するようになった
yarn upgradeするとcanvas: Command failedと言われ失敗するようになったという相談を受けたので、その原因と対応についてまとめた。
Q. useRefでステートを管理していいのか
useRefでステートを管理する是非について質問を受けたので、個人的な意見をまとめた。
useEffectEventについてのメモ
useEventの後継として提案されているuseEffectEventについてのメモ。
Renovateでパッケージをreplaceする
Renovateにはパッケージを別のパッケージに差し替える機能がある。
一部の属性値（data- など）は、型定義がJSXに含まれていなくても型エラーにならない
data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。
Q. iOSでinputにフォーカスするとズームしてしまう
iOSでinputにフォーカスするとズームしてしまう問題について調査した結果をまとめた。
Q. JWTから渡されたBase64文字列をwindow.atob()に渡すとエラーが出る場合がある
JWTをクライアントでデコードする際にエラーが出る場合があると相談を受けた際の調査結果をまとめた。
ReactコンポーネントはJSXとして呼ぶべき
ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。
Q. Playwrightのテスト改善をしてほしい
Playwrightのテスト改善をしてほしいという相談を受けた際の対応をまとめた。
Q. Day.jsのisValidメソッドの日付判定が緩い
Day.jsのisValidメソッドの判定が緩いのは何故かと質問を受けたので、その理由についてまとめた。
2種類のスクロールバーとscrollbar-gutterによる制御
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。
Q. npm publishで429 Too Many Request エラーが返ってくる
npm publishで429 Too Many Request エラーが返ってくる問題について調査した結果をまとめた。
React公式のuseFormStatusを利用したButton実装が雑にフォームに入れられて便利
React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。
Q. Noto Sansの場合、下にずれたように見える
Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。
Q. npm.rangeStrategyをpinにするとenigineもpinされてしまう
Renovateでnpm.rangeStrategyをpinにするとengineもpinされてしまう問題について解決策をまとめた。
React Server Componentのメンタルモデル
reactwg/server-componentsのDiscussionsで公開された`Why do Client Components get SSR'd to HTML? `のRSCの説明が分かりやすい。
Q. Migrate to React Router v6 Q&A まとめ
React Router v6に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。
Q. iPhoneで見るとフォーム画面が崩れる
iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。
CSS Media Queryを使うときに気を付けること及び知見
CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。
ReactのRouterライブラリなどでパスの書き間違いから解放される方法
ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。
Q. autoComplete/autoFillを完全に防ぎたい
autoComplete/autoFillを完全に防ぐ方法について質問を受けたので、その対処方法についてまとめた。
Q. フォームでsubmit buttonを押下すると上の方になぜかスクロールされる
フォームでsubmit buttonを押下すると上の方になぜかスクロールされるという相談を受けたので、その原因と対応についてまとめた。
Q. ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合がある
ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合があるという相談を受けたため、その調査と対応についてまとめた。
Github Actionsを利用してReviewer全員のApprovedを必須にする
GithubでReviewer全員のApprovedを必須にする方法を紹介するが、おすすめしない。
Q. npm, pnpm, yarn, npxの違いを一ミリも理解していない
npm、pnpm、yarn、npxの違いを一ミリも理解していないと相談を受けた際のメモ。
Q. 社内用eslint-configを入れ、ESLintをv8に上げたら、特定のルールでhasSuggestionを設定していないと言われる
ESLintをv8に上げたら特定のルールでhasSuggestionを設定していないと言われると相談があったので、その対応についてまとめた。
RenovateのScheduleがminuteを指定できない。
Renovateでスケジュールが機能しないという相談を受けた際に調べたところ、技術的に分単位の制御が出来ないことが分かった。
Playwrightでファイル選択をする
PlaywrightでFileChooserオブジェクトを利用してファイル選択をエミュレートする方法について紹介する。
Playwrightスクリプトを自動生成する
Playwrightのスクリプトを自動生成する方法について紹介する。
Q. E2Eテストで稀に要素が取得出来なくなり失敗する
Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。
Q. RenovateでGolangのバージョンが上がらなくなった
RenovateでGolangのバージョンが上がらないと相談を受けた際に調べた内容をまとめた。
ローカルホストのサービスを外部に公開したい
一時的に公開したいだけであればngrokが簡単に利用出来て便利。長期的に公開したい場合は、他のサービスの検討をおすすめする。
VOICEVOXをREST APIとして利用する
チャットボットの音声としてVOICEVOXの利用を検討した際に、REST APIとして利用する方法を調査した内容をまとめた。
Reactの状態管理ライブラリについて比較雑感
Reactの状態管理ライブラリであるJotai、Recoil、Redux、Zustandについて比較した雑感。
CI上でPlaywrightのテストが落ちたら確認すること
CI上でPlaywrightのテストが落ちた場合、どのようなことを確認すると良いか書いた。
スクロール領域はそのままにスクロールバーを隠す
モダンなブラウザのみサポートする場合は、scrollbar-width: noneの指定のみでスクロールバーを隠すことが出来る。
React Router v6でパスパラメータが変更されたら再レンダリングしたい
React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。
Prism.jsでハイライトされない言語があった
Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。
最低限困らないUnreal Engineのビューポート操作
Unreal Engineのビューポート操作について、最低限困らないための基本的な操作方法をまとめた。
React Function Componentの型について何を使うべきか
ReactのFunction Componentの型は、歴史的な理由などにより様々な記述ができる。React.FunctionComponent、React.FC、React.VFC、(props: SomeComponentProps): JSX.Elementなどがある。
Reactのpropsをunion typeにする方法について
Reactのpropsをunion typeにする方法をいくつか紹介する。ただし、これらの利用やそもそもunion typeをpropsに使うこと自体が適切かどうかは慎重に検討する必要がある。
ReactとTypeScriptでHTML属性を拡張する方法について
ReactとTypeScriptでHTML属性を拡張する方法について書いた。React.ComponentPropsWithoutRefやReact.ComponentPropsWithRef、React.ComponentProps、JSX.IntrinsicElements、React.DetailedHTMLProps、React.ButtonHTMLAttributes、React.HTMLProps、React.AllHTMLAttributes、React.HTMLAttributesなど。
Reactのイベント型について
Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。
CSS in JS 2022-10
2022年10月時点でのCSS in JSについてのメモ。Zero Runtime CSS in JSやZero-runtime CSS in JSライブラリの比較など。
PlaywrightでAPIのレスポンスを差し替える
PlaywrightでAPIのレスポンスを差し替える方法について紹介する。
PlaywrightでVisual Regression Testingする
PlaywrightでVisual Regression Testingを行う方法について紹介する。
Playwrightでセッションを再利用する
PlaywrightでCookieやLocal storageをstate.jsonに保存してセッションを再利用する方法について紹介する。
Playwrightをheadedまたはデバックモードで実行する。
Playwrightをheadedまたはデバックモードで実行する方法について紹介する。
Playwrightで任意のスクリプトを実行する
Playwrightでページ内で任意のスクリプトを実行する方法について紹介する。
Playwrightでページエラーを検出する
Playwrightでページ内で発生したエラーを検出する方法について紹介する。
Fire-and-forgetパターンとuseEvent
Fire-and-forgetパターンつまりuseEffectOnceのようなコードをuseEventでどのように置き換えられるか
CSS 変数で色を透過したりパレットを生成する
CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。
CSSで印刷時の見た目を調整する
@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。
text-align-last: ブロックの最後の行および強制的な改行の直前の行をどのように配置するか
Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。
Upgrade to React 18
会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。
Reactクイズ：要素を返す前にstateを更新すると何が起きるか
要素を返す前にstateを更新すると何が起きるかのクイズ。
React Router V6でOutletを利用したページコンテンツの遅延読み込み
リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。
CSS-in-JS - styled vs css prop by Glen Maddern (styled-components)
CSS-in-JSのstyledとcss propの記法について、styled-componentsの作者であるGlen Maddern氏による説明のメモ。
Q. React-RouterでURLをリダイレクトさせたら元のページに戻れなくなった。
React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。
なぜgetElementByIdやquerySelectorではなく、useRefを使うのか
ReactにおいてgetElementByIdやquerySelectorを避けた方が良い理由の説明。
なぜreact-hooks/exhaustive-depsはただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか
useEffectのdepsに依存関係を入れる理由について解説する。
About the Author
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.