外部にあるmarkdownファイルをAstroのContent collectionsに追加する
302 words
2min read
Astro 5.12.3 で、GitHub プロフィールをそのまま About ページに表示したくなった。 そこで他のリポジトリで公開している README.md を取得する loader を作成した。
Astro 5.12.3 で、GitHub プロフィールをそのまま About ページに表示したくなった。 そこで他のリポジトリで公開している README.md を取得する loader を作成した。
いくつかの CircleCI を利用しているプロジェクトで、ある時期を境に PEP 668 エラーが発生するようになった。 これは CircleCI が提供する Docker イメージの Ubuntu が非自明的に上がることにより、意図せず PEP 668 に従った Ubuntu 24.04 になってしまったことによる。
ほとんどは公式の自動更新コマンドで移行が完了する。Storybook v9への移行を複数のリポジトリで行う必要があるため、作業をメモに残した。他リポジトリで差分があれば追記する。
Renovateが作成するPR数を削減しレビュー負荷を軽減する設定パターンをいくつか紹介する
Hugging Face Spacedでホスティングしているfairseqを利用したアプリをGradio v5へ更新する際に発生した依存関係エラーと対応メモ。
Polyfillがアップデートしたライブラリに適用されておらず、古いブラウザで利用できないメソッドが呼び出されランタイムエラーが発生していた。Polyfillを適用する設定を見直すことで対応した。
Playwright のスクリーンショットは、例えばtoHaveScreenshotのデフォルトでは次のような形式で保存される。
Playwright で書かれたテストの改修をしていると、CI 上でホスティングサービスにデプロイした URL を貰ってきてから実行しているケースが度々見られるが、Web Server を立ち上げて実行した方が良いことが多い。
GitHub CLIを利用してリリースノートを生成する方法とGitHub Actionsでの使用例の紹介
Botなどが作成したPull Requestに対して、GitHub Actionsを利用して通常より多くのApproveを要求する方法
日常の会話や経験を通じて気づく、無意識のバイアスと価値観の偏りがもたらす認識のズレと、そのズレを通じて深まる自己理解の重要性
全体への注意喚起という怠慢がチーム内に引き起こす信頼関係の崩壊と、信頼を生む誠実な注意
MCPの仕様、SDKやサーバーの例、MCPのサポート状況、セキュリティ上の懸念、代替の可能性について。
Chrome 135でサポートされたCSS Overflow Module Level 5によるCSSカルーセルの実装方法を紹介します。
aws-cdkとaws-cdk-libはv2.174.0以降バージョンが一致しなくなったことについて。また、有効な組み合わせの判定が困難になったため簡易なリリース日による判定について。
VercelでCloudflareのプロキシを使用する際に発生する「err_too_many_redirects」エラーの原因と解決方法について
Tailwind CSSがAIフレンドリーである負債になりにくいといった主張について、少なくとも現状は違うという認識を持っています。
スライドパズルの状態は置換群として表現できるため、置換群の性質を利用して判定することが出来る。
golangci-lintのソースからのインストールは動作が保証されていません。バイナリをインストールするべきです。
Go 1.24でgolangci-lintを扱うには、Go 1.24でビルドされたgolangci-lint 1.64以上である必要がある
型パラメータを持つ型と具体的な型は区別される。
Dependabot Alertを有効化するだけで、RenovateがセキュリティPRを投げてくれるようになる
自分のデザインの説明責任を果たすことの大切さ、説明責任とアブダクションラインについて
Sub-issuesを利用することで、GitHubで完結したIssue管理、特に進捗管理が容易になる。
Custom matcherを利用するか、Doメソッド内で検証するか
ツールのサポートが不十分な上、言語やツールによって扱いが異なるため、おすすめしない。
スクラムについて漠然として自分が思っていることをある程度まとめたもの。
list-styleを無効化したul要素にlistロールを指定すべきという方針はアンチパターンである可能性が高い。
知人のために2025年版 ComfyUIのセットアップを紹介する内容です。細かいところは直接説明するので省いています。
Faker.js v9.5.0で追加されたpersonPortraitメソッドについて紹介する。
CloudflareのBot Fight Modeが有効な場合に、SlackでOGPが表示されなくなる挙動を数件のサイトで確認した。
Astroはstylesheetを巻き上げてしまうため、preconnectなどの指定より前にGoogle Fontsの読み込みが開始されパフォーマンスが悪化する可能性がある。
現在はプレビューなため、Agent ModeはVSCode Insidersでのみ利用可能。合わせてCopilot Editsが一般公開、またVisionもプレビューでの利用が可能になった。
PDFを出力するツールやライブラリにはバリアブルフォントを対応していないものがあり、意図した表示にならない場合がある。
aws-cdkの関連パッケージのバージョンが一致していない場合、Cloud assembly schema version mismatchエラーが発生する可能性がある。
現在ブログとして運用しているサイトのAstroをTailwind CSS v4にアップグレードした際の内容をまとめる。
Ref callback、React v19で追加されたクリーンアップ関数、useEffectとの違いについて。また特にクリーンアップ関数を使ったRef callbackの実装例。
macOSで開発を行っていると遭遇した「RangeError: Invalid WebSocket frame: RSV1 must be clear」エラーについて調査した際のログ。
NetlifyにはDeployを自動的に削除する機能があるが、よりコントロールしたい場合にはNetlify APIが利用できる。この記事では、Github Actionsで自動的にNetlifyのDeployを削除する方法について紹介する。
取得できるBigQueryのフィールドの型のいくつかは、クエリにそのまま利用することが出来ない。GolangのBigQueryパッケージを利用してスキーマを取得し、クエリで利用できるように変換する方法について。
React v19ではグローバルなJSX名前空間が削除されたため、これを利用している場合に型の変更が必要になる。
sharpを使って画像を圧縮するスクリプトを、lefthookを利用して画像をコミット前に圧縮させる方法について紹介する。
大きなファイルをpushしようとすると、http.postBufferの制限に引っかかり400エラーが発生する場合がある。
公式ドキュメントなどを参考にAstro 5へのマイグレーションを個人的に行った際のメモ
型の指定がない場合、NULLがINT64と判定され、強制変換可能でないデータ型に対してIFNULLを使うとエラーが発生する。
StreamDeckのVTube Studioプラグインを利用して、StreamDeckからVTube Studioを操作できるようにする方法を紹介する。
VitestではFake Timer APIを利用することで時間に依存するコードを柔軟に且つ短時間でテストすることができる。
規制を受けているYouTubeのコンテンツを調査する上で、 YouTubeの改変コンテンツと合成コンテンツについてのポリシーについて調べた内容をまとめた。
Playwirght v1.49の変更によるChromiumのダウンロードコストの変化を計測した。
Next.jsを利用したサービスでPlaywrightテストをローカル実行する際に、ReactDevOverlayを非表示する方法について
RenovateのDependency DashboardからConfigを新しいスキーマに移行できるようになった。
QRコードを生成するライブラリは多く存在する。また、一時的なもので良ければURLで生成できるサービスもある。
exclude-dirsで、特定のディレクトリを除外することができる。
gh pr createでレビュワーをチームにする場合、追加で`read:org`の権限が必要になるため、デフォルトのsecrets.GITHUB_TOKENでは動作しなくなる。`repo`と`read:org`の権限を持ったPersonal Access Tokenを使うことで解決できる。
ESLintのno-restricted-globalsルールを利用することで、グローバル変数を禁止して、意図しないグローバル変数への参照を防ぐ。
Github Actionsのmatrixのアイテムを条件によって切り替える方法について
ページを離れた際に呼ばれるブラウザイベントについて、共有したくなったので改めて少し調査した上でまとめた。
Githubの検索については公式ドキュメントが十分にまとめられている。しかし、少し辿りにくいようなので、人に共有しやすいように公式ドキュメントのリンクや一部の記述についてまとめた。
Github ActionsにおけるNode.jsパッケージのキャッシュについて、actions/setup-nodeの推奨する方法やnode_modulesをキャッシュする方法、その周辺について紹介する。
Storybookでサイドバーのラベルにタグを付ける方法を紹介する。ラベルにタグを表示することで、コンポーネントの状態などを分かりやすくできる。
linker `link.exe` not foundに対処した際のメモ
特定のいくつかのサイトを対象にした検索エンジンを埋め込む需要があったため、Google検索の埋め込みについて調査した。
ほぼ運用コスト0円で、なるべく早くオンライン予約サービスを作りたいという相談を受けた。決済や予約が絡むサービスを一から作るのはコストが高すぎるので、要望を叶えられるサービスを調査した。
カラオケ JOYSOUND for STREAMER は、JOYSOUND が提供予定の配信者のためのカラオケアプリであり、搭載されている楽曲はすべて配信に利用できるとしている。 また基本料金は無料（ジャンルに無料プレイが含まれている）であり、利用には月額課金が必要と書かれているが、無料楽曲の搭載も予定しているとのことだ。 https://store.steampowered.com/app/2939590/JOYSOUND_for_STREAMER/
マネージャーの指示が間違っており損害を受けたので非難をしたいという相談を受けた際の対応をまとめた。
actions/setup-nodeのcacheが期待通りに動作しないことは認識していたが、改めて調べたらそもそもnode_modulesをキャッシュしないことが分かった。
actions/setup-nodeではnode-version-fileを利用することで、利用されるNode.jsのバージョンをpackage.jsonなどに合わせることが出来る。これだけで便利だが、他にもお勧めできる不純な理由がある。
ESLintのあるプラグインを更新する際にエラーが出ているルールの一覧が欲しいという話があったので、jqを利用してエラーが出ているルールをリスト表示する方法を考えた。
Unreal Engine 5.4でVirtual Motion Capture Protocol（VMC Protocol）を利用して、モデルにアニメーションを適用する方法をメモした。
Unreal Engine 5.4でVRMをインポートして、動作確認をした際の手順をメモした。
同一ドメインのページをiframeで読み込んでいる場合、Google Tag Manager（GTM）がiframe内のページとして認識される挙動を確認した。相談を受けた際の内容をまとめる。
個人的には出来る限りスコープ外の関数としてコンポーネントを切り出すべきだと考えている。パフォーマンス、コードとしての質、将来性の観点から説明を行った
Renovateでレビュワーを指定する際、Githubで設定したチームを指定することで、放置される可能性を減らしたり、チームメンバーが変わっても設定を変更する必要がなくなるなどのメリットを受けられる。
Renovateでauto mergeを有効化した上で、Githubのブランチプロテクションでレビューを必須にした場合、適切な対応を行わなければオートマージが行われずレビュワーも設定されない。これによりRenovateのPRが見逃されるケースがあり、相談を受けた際の説明をまとめた。
CSSがサポートしている色空間の特性や歴史的な経緯、カラーパレットを生成する場合にOKLCH色空間の利用を推奨する理由について解説する。
ブラウザでは音声の自動再生を防ぐ目的で、音声の再生が制限されている。この記事では、特に制限が厳しいと言われるiOS Safariについて、その制限と回避策の検証を行った内容をまとめる。
Homebrewで任意のパッケージをインストールしようとするとError: Permission denied @ apply2filesというエラーが出るようになった際の対応をメモした。
Hugging Face固有の内容はほぼない。Windows環境からSSH接続しようとするとError connecting to agentと言われた。その対応をまとめる。
Canvas APIを利用してマウスに追従するエフェクトを付与する方法を紹介する。
AstroではMarkdownファイルにMDXやMarkdocと同様のAPIが利用できないため、Gatsybyなどの同様にremarkなどのpluginを利用する必要がある。
フロントエンドテスト講座を行った際の内容をまとめた。
Github WorkflowsでEnvironment SecretsやEnvironment Variablesを使って環境に応じて異なるSecretsやVariablesを使う方法を紹介する。
ホテルや民泊を掲載しているサイトでリッチリザルトを表示するために、どのように構造化データが利用されているか調査した。
Tailwind CSSに新しいクラスつまりユーティリティを追加するには、設定ファイルにプラグインを追加するか、自分でプラグインを作成する必要がある。
Shazamを使えばいい。PCで流れている音楽を検索する方法を紹介する。ブラウザで流れている音声を検索する方法や、周囲で流れている音声を検索する方法、モバイルで検索する方法について。
React v19でstyleタグと@scopeを使って、いくつかのCSS-in-JSライブラリのようにclassNameを指定せずにスタイルのカプセル化が出来るのかを検証した。
国民年金保険料追納申込書の出し方が分からないと相談を受けた際に調べた内容をまとめた。
overflow-yを指定したら、縦スクロールバーが表示されるようになる状況の解説と対処法について書いた。
React Routerを利用している環境で、一度エラーが表示された後に、パスパラメーターが異なるURLに遷移しても、ErrorBoundaryによって表示されたエラーが画面から消えないと相談を受けた。その理由と対応策について書いた。
公式ドキュメントを十分に読んでいないと理解が難しいと思われるParallel routesが404になる理由やdefault.jsの意味について、タブの実装を例に書いた。
約5年振りにhrdtbs/vscode-apacheconf-snippetsのリリースを行ないました。
Git pullするといくつかのファイルのトラッキングが解除されたように見える状況の調査についてまとめた。
React公式ドキュメントを見ながらReact 19の新機能を見る会を主催した際のメモです。多くは最低限このくらいの理解はしておいた方がいいという内容を事前に羅列しておいたものですが、一部その場で話題になった内容も含まれています。
無効化されたbuttonやinputなどのインタラクティブ要素にツールチップを表示したいという相談を複数回受けたので、その問題点と代替手段についてまとめた。
ESLintで特定のpropsを禁止にしたい場合の設定方法について説明する。
ESLintで特定の要素の利用を禁止したい場合の設定方法について説明する。
VitestのspyOnは、Jestなどと異なり同一ファイルの別関数をモックできない。ただし、これはVitestのスコープ外の問題であり、Jestなどでも同条件であれば同様の制限が発生する。
StylelintはCSS-in-JSで扱うことが少し困難になった時期に使わなくなっていたが、久しぶりStylelintを調べると十分に対応されていたので、導入を行った。その際の設定方法を記載する。
Vitestでモックが上手く動作しないと相談されたので、その理由などについてまとめた。
一般的なWebデザインの流れについて質問があったため、その流れとよくあるQ&Aをまとめた。
ESLint Config InspectorをGithub Pagesにデプロイする方法について紹介する。
Renovateには特定のファイルやディレクトリを無視させる機能があり、デフォルトではnode_modulesなどを無視するようになっている。
ESLint v9がリリースされたが、ESLint pluginのESLint v9対応が出来ていないpluginが複数あり、その対応状況を調査した。
fireEventではなくuserEventを使うべき理由と、userEventの使い方、userEventが対応できないケースについて解説する。
textareaにfield-sizing: content; width: 100%;などを指定しても親要素の幅を超えてしまうという相談を受けたので、その原因と対応についてまとめた。
Chrome 124からaspect-ratioが指定されたgridアイテムがoverflowするようになったという報告があったので、その理由と対処方法についてまとめた。
position: stickyが効かないという質問を受けたことが度々あったので、その原因と解決策についてまとめた。
Remix + Cloudflareの環境で、トップページのOutlet内部のコンテンツが表示されず、他のページでは404 Not matchエラーが発生するようになったと相談を受けたので、その原因と解決策についてまとめた。
CircleCI上で特定のmoduleをインストールさせたらrequires go >= 1.22で落ちたと質問を受けた際の対応についてまとめた。
Propsから受け取ったrefを内部的なrefとマージする方法を紹介する。
go mod tidyを実行したらruntime error: invalid memory address or nil pointer dereferenceエラーが発生した問題について解決策をまとめた。
Github Actionsのpull_requestトリガーのworkflowがなぜか実行されていないという相談を受けたので、その原因と解決策についてまとめた。
refが取れないので非制御コンポーネントに出来ないという相談を受けたので、非制御コンポーネントとrefの関係について説明した
Playwrightのテスト結果を動画で録画する方法について紹介する。
Renovateは公式が設定をバリデーションする機能を提供している。
Goのバージョンをv1.21に上げたら、golangci-lint v1.52でerrors parsing go.mod: … unknown directive: toolchainとエラーが出る問題について解決策をまとめた。
RenovateがPRを作成するタイミングをnot-pendingにしている場合、Githubのブランチプロテクションでpull_requestトリガーのGithub Workflowを必須にしているとPRが作成されなくなることについて説明する。ｌ
Prettierで特定のファイルに適用されるParserを変更する方法について紹介する。
VSCodeが勝手にテストを走らせるようになったという相談を受けたので、その理由と対応についてまとめた。
Github Workflowsが落ちたらIssueを作らせる方法について調査した結果をまとめた。
file-selector-buttonを利用してinput[type="file"]を装飾する方法とその是非について。
yarn upgradeするとcanvas: Command failedと言われ失敗するようになったという相談を受けたので、その原因と対応についてまとめた。
useRefでステートを管理する是非について質問を受けたので、個人的な意見をまとめた。
useEventの後継として提案されているuseEffectEventについてのメモ。
Renovateにはパッケージを別のパッケージに差し替える機能がある。
data-属性やaria-属性などは、型定義がJSXに含まれていなくても型エラーになりません。この理由や型エラーになるケースについて紹介します。
iOSでinputにフォーカスするとズームしてしまう問題について調査した結果をまとめた。
JWTをクライアントでデコードする際にエラーが出る場合があると相談を受けた際の調査結果をまとめた。
ReactコンポーネントをJSX形式ではなく、ただの関数として呼ぶとバグの原因になる場合がある。これが原因のバグの相談を度々受けるので、問題になる例と対策をまとめた。
Playwrightのテスト改善をしてほしいという相談を受けた際の対応をまとめた。
Day.jsのisValidメソッドの判定が緩いのは何故かと質問を受けたので、その理由についてまとめた。
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、scrollbar-gutterによる対策を説明する。
npm publishで429 Too Many Request エラーが返ってくる問題について調査した結果をまとめた。
React v18.2.0時点ではexperimentalなuseFormStatusを利用すると、重複送信を防ぐボタンを簡単に実装できる。
Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。
Renovateでnpm.rangeStrategyをpinにするとengineもpinされてしまう問題について解決策をまとめた。
reactwg/server-componentsのDiscussionsで公開された`Why do Client Components get SSR'd to HTML? `のRSCの説明が分かりやすい。
React Router v6に移行する際に気を付けるべき点や、移行時に受けた質問をまとめました。
iPhoneで見るとフォーム画面が崩れる問題について調査した結果をまとめた。
CSS Media Query、特にmin-widthまたはmax-widthを利用する場合に気を付けた方が良いパターンや知見について紹介する。これらのメディア特性が自由に扱われているスタイルは破綻しやすい。
ReactのRouterライブラリなどでパスの書き間違いを防ぎたいと聞かれたので、いくつかの方法を提示した際のメモ。
autoComplete/autoFillを完全に防ぐ方法について質問を受けたので、その対処方法についてまとめた。
フォームでsubmit buttonを押下すると上の方になぜかスクロールされるという相談を受けたので、その原因と対応についてまとめた。
ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合があるという相談を受けたため、その調査と対応についてまとめた。
GithubでReviewer全員のApprovedを必須にする方法を紹介するが、おすすめしない。
npm、pnpm、yarn、npxの違いを一ミリも理解していないと相談を受けた際のメモ。
ESLintをv8に上げたら特定のルールでhasSuggestionを設定していないと言われると相談があったので、その対応についてまとめた。
Renovateでスケジュールが機能しないという相談を受けた際に調べたところ、技術的に分単位の制御が出来ないことが分かった。
PlaywrightでFileChooserオブジェクトを利用してファイル選択をエミュレートする方法について紹介する。
Playwrightのスクリプトを自動生成する方法について紹介する。
Playwrightを利用したE2Eテストで稀に要素が取得できなくなり失敗すると相談を受けた際の対応についてまとめた。
RenovateでGolangのバージョンが上がらないと相談を受けた際に調べた内容をまとめた。
一時的に公開したいだけであればngrokが簡単に利用出来て便利。長期的に公開したい場合は、他のサービスの検討をおすすめする。
チャットボットの音声としてVOICEVOXの利用を検討した際に、REST APIとして利用する方法を調査した内容をまとめた。
Reactの状態管理ライブラリであるJotai、Recoil、Redux、Zustandについて比較した雑感。
CI上でPlaywrightのテストが落ちた場合、どのようなことを確認すると良いか書いた。
モダンなブラウザのみサポートする場合は、scrollbar-width: noneの指定のみでスクロールバーを隠すことが出来る。
React Router v6でパスパラメータが変更された際も再レンダリングをトリガーする方法を紹介する。
Prism.jsを利用していると対応言語に書かれているがハイライトされない言語がいくつかあった。これはprism-react-rendererからprismjs本来の機能を使うように移行した際のメモです。
Unreal Engineのビューポート操作について、最低限困らないための基本的な操作方法をまとめた。
ReactのFunction Componentの型は、歴史的な理由などにより様々な記述ができる。React.FunctionComponent、React.FC、React.VFC、(props: SomeComponentProps): JSX.Elementなどがある。
ReactとTypeScriptでHTML属性を拡張する方法について書いた。React.ComponentPropsWithoutRefやReact.ComponentPropsWithRef、React.ComponentProps、JSX.IntrinsicElements、React.DetailedHTMLProps、React.ButtonHTMLAttributes、React.HTMLProps、React.AllHTMLAttributes、React.HTMLAttributesなど。
Reactのイベント型について書いた。React.MouseEvent、React.ChangeEvent、React.SyntheticEvent、NativeのEvent型、React.XXXEventHandlerなどについて、どれを使うべきか。
Reactのpropsをunion typeにする方法をいくつか紹介する。ただし、これらの利用やそもそもunion typeをpropsに使うこと自体が適切かどうかは慎重に検討する必要がある。
2022年10月時点でのCSS in JSについてのメモ。Zero Runtime CSS in JSやZero-runtime CSS in JSライブラリの比較など。
PlaywrightでAPIのレスポンスを差し替える方法について紹介する。
Playwrightでページ内で任意のスクリプトを実行する方法について紹介する。
Playwrightでページ内で発生したエラーを検出する方法について紹介する。
PlaywrightでCookieやLocal storageをstate.jsonに保存してセッションを再利用する方法について紹介する。
PlaywrightでVisual Regression Testingを行う方法について紹介する。
Playwrightをheadedまたはデバックモードで実行する方法について紹介する。
Fire-and-forgetパターンつまりuseEffectOnceのようなコードをuseEventでどのように置き換えられるか
CSS変数に色をそのまま宣言するのではなく、パラメーターを持たせておくことで、`rgb()`や`hsl()`、`lch()`などの関数に渡して、色を生成する方法を紹介する。
@media printや@page、break-inside、break-before、break-after、print-color-adjustなどを利用して印刷時の見た目を調整する方法を紹介する。
Safari 16でサポートされ、全ての主要なブラウザで利用できるようになったtext-align-lastについて紹介する。
会社にて、ほとんどのサービスのReactのバージョンをアップグレードするイベントを開催した際のQ&Aなどをまとめました。
要素を返す前にstateを更新すると何が起きるかのクイズ。
リリースされたばかりのReact Router V6のOutletを使って、ページコンポーネントを遅延読み込みするいい感じの方法を考えた。
CSS-in-JSのstyledとcss propの記法について、styled-componentsの作者であるGlen Maddern氏による説明のメモ。
React-Routerでリダイレクトさせる際にreplaceさせないと、リダイレクトされるページの前にいたページに戻れなくなるのは当たり前だと思うが、質問があったのでまとめた。
ReactにおいてgetElementByIdやquerySelectorを避けた方が良い理由の説明。
useEffectのdepsに依存関係を入れる理由について解説する。