React

MUI Buttonテスト:基本から実践パターンまで網羅【React Testing Library】

MUI ButtonをReact Testing Libraryでテストする方法を解説します。基本的なクリックイベントから、disabled状態、各種プロパティ、非同期処理中の二重クリック防止まで、実務で必要なパターンを網羅しています。動作...
AI関連

Spec Kitを日本語化する方法【2行追加するだけ】Claude/Copilot対応

Speckitの出力を日本語にする方法を解説します。各コマンドファイルに2行追加するだけで、仕様書・計画書・タスクリストがすべて日本語で生成されます。Claude Code、GitHub Copilotのいずれでも動作確認済みです。多分これ...
AI関連

Spec Kit アップグレード方法|CLIとテンプレートの更新手順

GitHub Spec Kit のアップグレード方法を解説します。CLI の更新からプロジェクトのテンプレート更新まで、3ステップで完了します。前提Spec Kit 導入済みuv インストール済み現在のバージョン確認specify vers...
Git

GitHub GraphQL APIをOctokitで使う方法 – PRのデータ取得

GitHub GraphQL APIを使って、リポジトリのPRデータを効率的に取得する方法を解説します。REST APIでは複数回のリクエストが必要だったデータも、GraphQLなら1回のクエリで取得可能です。この記事では、Octokitを...
Git

GitHub REST APIからGraphQLへ移行して7分→20秒に高速化した話

GitHubリポジトリの開発活動を分析するWebアプリを開発中、データ取得に7分もかかる問題に直面しました。そこで、REST APIからGraphQL APIに移行した結果、7分 → 約20秒と約20倍の高速化を達成しました。この記事では、...
Next.js

Vercelでsimple-gitが動かない!GitHub APIへの移行記録

Next.jsで開発したGitHub分析アプリ「Team Insights」をVercelにデプロイしたところ、ローカルでは完璧に動いていたsimple-gitが全く動かない問題に遭遇しました。この記事では、なぜVercelでgitコマンド...
Git

【個人開発】開発チームのパフォーマンスを可視化するツール「Team Insights」を作った

はじめにエンジニアとして5年ほど働いてきて、最近はフロントエンドチームのリーダーを任されるようになってきました。チームをマネジメントしていると、こんな悩みが出てきます。「チームの開発活動を客観的に把握したい」「メンバーの貢献をちゃんと可視化...
JavaScript

React Query入門 導入から簡単な使い方までを解説

サンプルを例に、React Queryの使い方を解説します。入門レベルですが、参考になればと思います。今回作成するサンプルReact Queryとaxiosを使って、GETとPOSTのHTTP通信を行うサンプルを作成しました。GET:取得し...
JavaScript

【React】buttonがdisabledかチェックするテストを実装

Reactで、buttonがdisabledがチェックするテストを実装します。disabledかチェックする方法使用するメソッドbuttonのdisabledをチェックするには、次の2つのメソッドが使えます。toBeDisabled() →...
JavaScript

buttonのclickイベントをテストする方法【React Testing Library】

Reactで、buttonをクリックしてonClickイベントを発生させるテストを実装します。buttonをクリックするテストを実装使用するメソッドbuttonをクリックするには、次の2つのメソッドが使えます。userEvent.click...