Ref callbackとcleanup functions

Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。

Web ComponentsのReact v19対応

React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。

Q. ローカル環境でのE2EテストがReactDevOverlayにより失敗する

Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について

Q. コンポーネントをuseCallbackで作るかスコープ外の関数として切り出すべきか

個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った

React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。

React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。

Q. React Routerでページ遷移してもErrorBoundaryがリセットされない

React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。

Tabs using Parallel Routes with Next.js App Router

公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。

React 19の機能を見る会のメモ

React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。

Q. ESLintで特定のpropsを禁止にしたい

ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。

Q. ESLintで特定の要素の利用を禁止したい

ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。

React向けESLint pluginのESLint v9対応状況

ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。

Reactでrefをマージする

Propsから受け取ったrefを内部的なrefとマージする方法を紹介する。

Q. refが取れないので非制御コンポーネントに出来ない

refが取れないので非制御コンポーネントに出来ないという相談を受けたので、非制御コンポーネントとrefの関係について説明した

Q. useRefでステートを管理していいのか

useRefでステートを管理する是非について質問を受けたので、個人的な意見をまとめた。

useEffectEventについてのメモ

useEventの後継として提案されているuseEffectEventについてのメモ。

一部の属性値（data- など）は、型定義がJSXに含まれていなくても型エラーにならない

data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。

ReactコンポーネントはJSXとして呼ぶべき

ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。

React公式のuseFormStatusを利用したButton実装が雑にフォームに入れられて便利

React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。

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に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。

ReactのRouterライブラリなどでパスの書き間違いから解放される方法

ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。

Q. ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合がある

ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合があるという相談を受けたため、その調査と対応についてまとめた。

Q. E2Eテストで稀に要素が取得出来なくなり失敗する

Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。

Reactの状態管理ライブラリについて比較雑感

Reactの状態管理ライブラリであるJotai、Recoil、Redux、Zustandについて比較した雑感。

React Router v6でパスパラメータが変更されたら再レンダリングしたい

React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。

Prism.jsでハイライトされない言語があった

Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。

Reactのイベント型について

Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。

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など。

Fire-and-forgetパターンとuseEvent

Fire-and-forgetパターンつまりuseEffectOnceのようなコードをuseEventでどのように置き換えられるか

Upgrade to React 18

会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。

Reactクイズ：要素を返す前にstateを更新すると何が起きるか

要素を返す前にstateを更新すると何が起きるかのクイズ。

React Router V6でOutletを利用したページコンテンツの遅延読み込み

リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。

Q. React-RouterでURLをリダイレクトさせたら元のページに戻れなくなった。

React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。

なぜgetElementByIdやquerySelectorではなく、useRefを使うのか

ReactにおいてgetElementByIdやquerySelectorを避けた方が良い理由の説明。

なぜreact-hooks/exhaustive-depsはただcomponentDidMountのように使いたいだけなのに依存関係を入れてくるのか

useEffectのdepsに依存関係を入れる理由について解説する。

CSSのみで実装する指向性ヘッダーアニメーション

Scroll Container内の絶対配置またはAG Gridのバグ

CSSカルーセルを試す

Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法

list-styleを無効化したul要素にlistロールを指定すべきなのか？

list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。

色空間とOKLCHを利用したカラーパレットの生成

CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。

React v19 styleタグと@scopeでCSS-in-JSを置き換えることは出来ない。

React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。

Q. overflow-yを指定したら、縦スクロールバーが表示されるようになった

overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。

Q. textareaに掛けたfield-sizing: content; width: 100%;が効かない

textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。

Q. position: stickyが効かない

position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。

Q. Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになった

Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。

余計なDOMを追加せずにinput[type="file"]を装飾する

file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。

2種類のスクロールバーとscrollbar-gutterによる制御

動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。

Q. Noto Sansの場合、下にずれたように見える

Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。

Q. iPhoneで見るとフォーム画面が崩れる

iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。

CSS Media Queryを使うときに気を付けること及び知見

CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。

スクロール領域はそのままにスクロールバーを隠す

CSS in JS 2022-10

2022年10月時点でのCSS in JSについてのメモ。Zero Runtime CSS in JSやZero-runtime CSS in JSライブラリの比較など。

CSSで印刷時の見た目を調整する

@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。

CSS 変数で色を透過したりパレットを生成する

CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。

text-align-last: ブロックの最後の行および強制的な改行の直前の行をどのように配置するか

Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。

RenovateでGitHub ActionsのSHA Pinningを手軽に行う

VitestのカバレッジレポートをGithub Actionsで添付する実装例

npmパッケージ公開のOIDC Trusted publishingへの移行

OIDC Trusted publishingを用いたnpmパッケージの公開方法およびTrusted publishingのメリットと制約について。

GitHub Actionsを利用してリリースノートの生成を自動化する

GitHub CLIを利用してリリースノートを生成する方法とGitHub Actionsでの使用例の紹介

AIなどの特定ユーザーの作成したPRに要求するApproval数を増やす

Botなどが作成したPull Requestに対して、GitHub Actionsを利用して通常より多くのApproveを要求する方法

PRが閉じられたら自動的にNetlifyのDeployを削除する

NetlifyにはDeployを自動的に削除する機能があるが、よりコントロールしたい場合にはNetlify APIが利用できる。この記事では、Github Actionsで自動的にNetlifyのDeployを削除する方法について紹介する。

QRコードを簡単に生成する

QRコードを生成するライブラリは多く存在する。また、一時的なもので良ければURLで生成できるサービスもある。

Q. gh pr createでレビュワーをチームに変更したら、Github Actions上で動作しなくなった

gh pr createでレビュワーをチームにする場合、追加で`read:org`の権限が必要になるため、デフォルトのsecrets.GITHUB_TOKENでは動作しなくなる。`repo`と`read:org`の権限を持ったPersonal Access Tokenを使うことで解決できる。

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をキャッシュする方法、その周辺について紹介する。

actions/setup-nodeでnode-version-fileの利用を勧める不純な理由

actions/setup-nodeではnode-version-fileを利用することで、利用されるNode.jsのバージョンをpackage.jsonなどに合わせることが出来る。これだけで便利だが、他にもお勧めできる不純な理由がある。

actions/setup-nodeのcacheはnode_modulesをキャッシュしない

actions/setup-nodeのcacheが期待通りに動作しないことは認識していたが、改めて調べたらそもそもnode_modulesをキャッシュしないことが分かった。

Github Workflowsで環境に応じて異なるSecretsやVariablesを使う

Github WorkflowsでEnvironment SecretsやEnvironment Variablesを使って環境に応じて異なるSecretsやVariablesを使う方法を紹介する。

Q. pull_requestトリガーのworkflowがなぜか実行されていない

Github Actionsのpull_requestトリガーのworkflowがなぜか実行されていないという相談を受けたので、その原因と解決策についてまとめた。

prCreationがnot-pendingになっているGithubリポジトリでRenovateが動作しなくなっていた

RenovateがPRを作成するタイミングをnot-pendingにしている場合、Githubのブランチプロテクションでpull_requestトリガーのGithub Workflowを必須にしているとPRが作成されなくなることについて説明する。ｌ

Q. Github Workflowsが落ちたらIssueを作らせたい

Github Workflowsが落ちたらIssueを作らせる方法について調査した結果をまとめた。

Github Actionsを利用してReviewer全員のApprovedを必須にする

GithubでReviewer全員のApprovedを必須にする方法を紹介するが、おすすめしない。

Playwrightでスクリーンショットの保存先をカスタマイズする

Playwrightでテスト実行時にweb serverを立ち上げる

Playwright v1.49の変更によるChromiumダウンロードコストの変化

Playwirght v1.49の変更によるChromiumのダウンロードコストの変化を計測した。

Q. ローカル環境でのE2EテストがReactDevOverlayにより失敗する

Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について

Playwrightの動画を取りたい

Playwrightのテスト結果を動画で録画する方法について紹介する。

Q. Playwrightのテスト改善をしてほしい

Playwrightのテスト改善をしてほしいという相談を受けた際の対応をまとめた。

Playwrightでファイル選択をする

PlaywrightでFileChooserオブジェクトを利用してファイル選択をエミュレートする方法について紹介する。

Playwrightスクリプトを自動生成する

Playwrightのスクリプトを自動生成する方法について紹介する。

Q. E2Eテストで稀に要素が取得出来なくなり失敗する

Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。

CI上でPlaywrightのテストが落ちたら確認すること

CI上でPlaywrightのテストが落ちた場合、どのようなことを確認すると良いか書いた。

PlaywrightでAPIのレスポンスを差し替える

PlaywrightでAPIのレスポンスを差し替える方法について紹介する。

Playwrightでページエラーを検出する

Playwrightでページ内で発生したエラーを検出する方法について紹介する。

Playwrightをheadedまたはデバックモードで実行する。

Playwrightをheadedまたはデバックモードで実行する方法について紹介する。

Playwrightでセッションを再利用する

PlaywrightでCookieやLocal storageをstate.jsonに保存してセッションを再利用する方法について紹介する。

Playwrightで任意のスクリプトを実行する

Playwrightでページ内で任意のスクリプトを実行する方法について紹介する。

PlaywrightでVisual Regression Testingする

PlaywrightでVisual Regression Testingを行う方法について紹介する。

RenovateでGitHub ActionsのSHA Pinningを手軽に行う

RenovateとDependabotのレビュワーを一元管理する

RenovateとDependabotを併用する場合、CODEOWNERSファイルを活用することでレビュワー設定を一元管理できる。

RenovateのPR数を削減するパターン

Renovateが作成するPR数を削減しレビュー負荷を軽減する設定パターンをいくつか紹介する

GitHub Dependabot Alertを有効化したらRenovateが対象のPRを投げてくれる

Dependabot Alertを有効化するだけで、RenovateがセキュリティPRを投げてくれるようになる

Renovate - On demand config migration

RenovateのDependency DashboardからConfigを新しいスキーマに移行できるようになった。

Q. Renovateでauto mergeが上手く動作せず、レビュワーが設定されない

Renovateでauto mergeを有効化した上で、Githubのブランチプロテクションでレビューを必須にした場合、適切な対応を行わなければオートマージが行われずレビュワーも設定されない。これによりRenovateのPRが見逃されるケースがあり、相談を受けた際の説明をまとめた。

Renovateのレビュワーにチームを指定して運用する

Renovateでレビュワーを指定する際、Githubで設定したチームを指定することで、放置される可能性を減らしたり、チームメンバーが変わっても設定を変更する必要がなくなるなどのメリットを受けられる。

特定のディレクトリやファイルをRenovateに無視させる

Renovateには特定のファイルやディレクトリを無視させる機能があり、デフォルトではnode_modulesなどを無視するようになっている。

Renovateの設定をバリデーションする

Renovateは公式が設定をバリデーションする機能を提供している。

prCreationがnot-pendingになっているGithubリポジトリでRenovateが動作しなくなっていた

RenovateがPRを作成するタイミングをnot-pendingにしている場合、Githubのブランチプロテクションでpull_requestトリガーのGithub Workflowを必須にしているとPRが作成されなくなることについて説明する。ｌ

Renovateでパッケージをreplaceする

Renovateにはパッケージを別のパッケージに差し替える機能がある。

Q. npm.rangeStrategyをpinにするとenigineもpinされてしまう

Renovateでnpm.rangeStrategyをpinにするとengineもpinされてしまう問題について解決策をまとめた。

Github Actionsを利用してReviewer全員のApprovedを必須にする

GithubでReviewer全員のApprovedを必須にする方法を紹介するが、おすすめしない。

RenovateのScheduleがminuteを指定できない。

Renovateでスケジュールが機能しないという相談を受けた際に調べたところ、技術的に分単位の制御が出来ないことが分かった。

Q. RenovateでGolangのバージョンが上がらなくなった

RenovateでGolangのバージョンが上がらないと相談を受けた際に調べた内容をまとめた。

golangci-lintをgo toolでインストールすべきでない

golangci-lintのソースからのインストールは動作が保証されていません。バイナリをインストールするべきです。

Go 1.24でgolangci-lintがエラーを吐くようになった

Go 1.24でgolangci-lintを扱うには、Go 1.24でビルドされたgolangci-lint 1.64以上である必要がある

Q. Go言語である型を満たす型パラメータとその型自体が違う型と言われる

型パラメータを持つ型と具体的な型は区別される。

Q. gomockでフィールドの部分一致を検証したい

Custom matcherを利用するか、Doメソッド内で検証するか

Q. GopdfでフォントをNoto Sans CJKに変更したら文字が細くなった

PDFを出力するツールやライブラリにはバリアブルフォントを対応していないものがあり、意図した表示にならない場合がある。

BigQueryのフィールド取得とクエリで利用できる型への変換

取得できるBigQueryのフィールドの型のいくつかは、クエリにそのまま利用することが出来ない。GolangのBigQueryパッケージを利用してスキーマを取得し、クエリで利用できるように変換する方法について。

Q. golangci-lintがnode_modules内のGoファイルを検査してしまう

exclude-dirsで、特定のディレクトリを除外することができる。

Q. CircleCI上で特定のmoduleをインストールさせたらrequires go >= 1.22で落ちた

CircleCI上で特定のmoduleをインストールさせたらrequires go >= 1.22で落ちたと質問を受けた際の対応についてまとめた。

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. 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とエラーが出る問題について解決策をまとめた。

Q. RenovateでGolangのバージョンが上がらなくなった

RenovateでGolangのバージョンが上がらないと相談を受けた際に調べた内容をまとめた。

Q. 古いブラウザ用のアプリでライブラリをアップデートしたら動作しなくなった

Polyfillがアップデートしたライブラリに適用されておらず、古いブラウザで利用できないメソッドが呼び出されランタイムエラーが発生していた。Polyfillを適用する設定を見直すことで対応した。

Invalid WebSocket frame: RSV1 must be clearについての調査ログ

macOSで開発を行っていると遭遇した「RangeError: Invalid WebSocket frame: RSV1 must be clear」エラーについて調査した際のログ。

Q. ローカル環境でのE2EテストがReactDevOverlayにより失敗する

Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について

ページを離れた際に呼ばれるブラウザイベントについて

ページを離れた際に呼ばれるブラウザイベントについて、共有したくなったので改めて少し調査した上でまとめた。

Q. コンポーネントをuseCallbackで作るかスコープ外の関数として切り出すべきか

個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った

iOS Safariの音声再生における制限とその回避策の検証

ブラウザでは音声の自動再生を防ぐ目的で、音声の再生が制限されている。この記事では、特に制限が厳しいと言われるiOS Safariについて、その制限と回避策の検証を行った内容をまとめる。

Canvasを使ってカーソルにエフェクトを付与する

Canvas APIを利用してマウスに追従するエフェクトを付与する方法を紹介する。

一部の属性値（data- など）は、型定義がJSXに含まれていなくても型エラーにならない

data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。

Q. JWTから渡されたBase64文字列をwindow.atob()に渡すとエラーが出る場合がある

JWTをクライアントでデコードする際にエラーが出る場合があると相談を受けた際の調査結果をまとめた。

Q. Day.jsのisValidメソッドの日付判定が緩い

Day.jsのisValidメソッドの判定が緩いのは何故かと質問を受けたので、その理由についてまとめた。

AstroではGoogle Fontsを直接利用しない方が良いかもしれない

Astroはstylesheetを巻き上げてしまうため、preconnectなどの指定より前にGoogle Fontsの読み込みが開始されパフォーマンスが悪化する可能性がある。

ページを離れた際に呼ばれるブラウザイベントについて

ページを離れた際に呼ばれるブラウザイベントについて、共有したくなったので改めて少し調査した上でまとめた。

iOS Safariの音声再生における制限とその回避策の検証

ブラウザでは音声の自動再生を防ぐ目的で、音声の再生が制限されている。この記事では、特に制限が厳しいと言われるiOS Safariについて、その制限と回避策の検証を行った内容をまとめる。

明示的に無効化されたインタラクティブ要素でTooltipを気軽に表示すべきでない

無効化されたbuttonやinputなどのインタラクティブ要素にツールチップを表示したいという相談を複数回受けたので、その問題点と代替手段についてまとめた。

余計なDOMを追加せずにinput[type="file"]を装飾する

file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。

Q. iOSでinputにフォーカスするとズームしてしまう

iOSでinputにフォーカスするとズームしてしまう問題について調査した結果をまとめた。

Q. iPhoneで見るとフォーム画面が崩れる

iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。

Q. フォームでsubmit buttonを押下すると上の方になぜかスクロールされる

フォームでsubmit buttonを押下すると上の方になぜかスクロールされるという相談を受けたので、その原因と対応についてまとめた。

Q. autoComplete/autoFillを完全に防ぎたい

autoComplete/autoFillを完全に防ぐ方法について質問を受けたので、その対処方法についてまとめた。

GitHub Actionsを利用してリリースノートの生成を自動化する

GitHub CLIを利用してリリースノートを生成する方法とGitHub Actionsでの使用例の紹介

GitHub Dependabot Alertを有効化したらRenovateが対象のPRを投げてくれる

Dependabot Alertを有効化するだけで、RenovateがセキュリティPRを投げてくれるようになる

GitHub Sub-issuesのすすめ

Sub-issuesを利用することで、GitHubで完結したIssue管理、特に進捗管理が容易になる。

Q. Renovateでauto mergeが上手く動作せず、レビュワーが設定されない

Renovateでauto mergeを有効化した上で、Githubのブランチプロテクションでレビューを必須にした場合、適切な対応を行わなければオートマージが行われずレビュワーも設定されない。これによりRenovateのPRが見逃されるケースがあり、相談を受けた際の説明をまとめた。

Renovateのレビュワーにチームを指定して運用する

Renovateでレビュワーを指定する際、Githubで設定したチームを指定することで、放置される可能性を減らしたり、チームメンバーが変わっても設定を変更する必要がなくなるなどのメリットを受けられる。

Github Workflowsで環境に応じて異なるSecretsやVariablesを使う

Github WorkflowsでEnvironment SecretsやEnvironment Variablesを使って環境に応じて異なるSecretsやVariablesを使う方法を紹介する。

ESLint Config InspectorをGithub Pagesにデプロイする

ESLint Config InspectorをGithub Pagesにデプロイする方法について紹介する。

Q. 削除された変数への参照が、グローバル変数と一致しているためエラーが出ない

ESLintのno-restricted-globalsルールを利用することで、グローバル変数を禁止して、意図しないグローバル変数への参照を防ぐ。

ESLintでエラーが出ているルールをjqを利用してリスト表示する

ESLintのあるプラグインを更新する際にエラーが出ているルールの一覧が欲しいという話があったので、jqを利用してエラーが出ているルールをリスト表示する方法を考えた。

Q. ESLintで特定のpropsを禁止にしたい

ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。

Q. ESLintで特定の要素の利用を禁止したい

ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。

ESLint Config InspectorをGithub Pagesにデプロイする

ESLint Config InspectorをGithub Pagesにデプロイする方法について紹介する。

React向けESLint pluginのESLint v9対応状況

ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。

Q. 社内用eslint-configを入れ、ESLintをv8に上げたら、特定のルールでhasSuggestionを設定していないと言われる

ESLintをv8に上げたら特定のルールでhasSuggestionを設定していないと言われると相談があったので、その対応についてまとめた。

Web ComponentsのReact v19対応

React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。

一部の属性値（data- など）は、型定義がJSXに含まれていなくても型エラーにならない

data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。

Reactのイベント型について

Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。

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など。

VitestのカバレッジレポートをGithub Actionsで添付する実装例

VitestでsetTimeoutやsetIntervalなど時間が関与したコードのテストを記述する

VitestではFake Timer APIを利用することで時間に依存するコードを柔軟に且つ短時間でテストすることができる。

フロントエンドテスト講座を開催した

フロントエンドテスト講座を行った際の内容をまとめた。

VitestのspyOnは同一ファイルの別関数をモックできない

VitestのspyOnは、Jestなどと異なり同一ファイルの別関数をモックできない。ただし、これはVitestのスコープ外の問題であり、Jestなどでも同条件であれば同様の制限が発生する。

Q. 指定されたパスのすべてのモジュールをモックするmockメソッドは巻き上げられる

Vitestでモックが上手く動作しないと相談されたので、その理由などについてまとめた。