Git GitHub GraphQL APIをOctokitで使う方法 – PRのデータ取得
GitHub GraphQL APIを使って、リポジトリのPRデータを効率的に取得する方法を解説します。REST APIでは複数回のリクエストが必要だったデータも、GraphQLなら1回のクエリで取得可能です。この記事では、Octokitを...
TypeScript
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...
JavaScript Reactでテストを実行してみよう！React Testing Libraryの使い方
Reactコンポーネントは、JestとReact Testing Libraryを使ってテストを実施できます。Create React Appで作成したコードを参考に、テストを実行してみましょう。構成はReact+TypeScript+ya...
VSCode VSCodeにESLintとPrettierを設定してReact+TypeScriptのコードを自動整形
チーム開発をしていると、コーディングスタイルがバラバラで困ることがあります。インデントがずれているスペースの開け方が違う改行の位置がそろっていないということで、コードを自動整形してしまおうという試みです。エディターはVSCode、プロジェク...
Material-UI [React]Material-UI(MUI)を使うと画面設計がとても簡単になるので初心者にもおすすめです
私ごとですが、最近初めてUIの開発に手を出しています。React + TypeScriptで開発するっぽいのですが、UIなんて作ったことありません。困ったなぁ〜って思っていたのですが、ReactのUIライブラリを使うことになりました。Mat...
React React + TypeScriptのプロジェクトをパパっと簡単に作成する方法!
どうやってReactでTypeScript使うのかな？って思うことがあったので、ローカルで環境構築してみました。新規プロジェクトで作成する場合はコマンド一発で出来るので簡単です。React + TypeScriptのプロジェクト新規作成次の...