React MUI Buttonテスト：基本から実践パターンまで網羅【React Testing Library】
MUI ButtonをReact Testing Libraryでテストする方法を解説します。基本的なクリックイベントから、disabled状態、各種プロパティ、非同期処理中の二重クリック防止まで、実務で必要なパターンを網羅しています。動作...
React 
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をチェックするには、次の２つのメソッドが使えます。toBeDisabled() →...
JavaScript buttonのclickイベントをテストする方法【React Testing Library】
Reactで、buttonをクリックしてonClickイベントを発生させるテストを実装します。buttonをクリックするテストを実装使用するメソッドbuttonをクリックするには、次の２つのメソッドが使えます。userEvent.click...