プログラミング

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...
JavaScript

Reactでテストを実行してみよう!React Testing Libraryの使い方

Reactコンポーネントは、JestとReact Testing Libraryを使ってテストを実施できます。Create React Appで作成したコードを参考に、テストを実行してみましょう。構成はReact+TypeScript+ya...
VSCode

VSCodeにESLintとPrettierを設定してReact+TypeScriptのコードを自動整形

チーム開発をしていると、コーディングスタイルがバラバラで困ることがあります。インデントがずれているスペースの開け方が違う改行の位置がそろっていないということで、コードを自動整形してしまおうという試みです。エディターはVSCode、プロジェク...
JavaScript

JavaScriptで月末/来週/先週/次の○曜日など特殊な日時をdate-fnsで取得する方法

来週とか月末とか、今を基準とした日時を出力したいってことがありました。ちょっと特殊な日時でも、data-fnsを使用すれば簡単に取得できます。日付取得のさまざまなパターンを記事にまとめました。多いので、目次を活用してください。最初にインスト...
Git

[Git]間違ってdevelopブランチにコミットした時はそのままfeatureブランチにマージしちゃえばいいんじゃない?って話

ローカルの変更を間違えて developブランチにコミットしちゃったことありませんか?私はよく、featureブランチを切る前にdevelopブランチにコミットしてしまうことがあります。Gitのミスって、すごく焦りますよね。この記事では、そ...
React

[React]useStateでオブジェクト(連想配列)や配列の一部を更新する方法

私はいつも、ReactのuseStateでオブジェクト(連想配列)の更新に手を焼いています。どうやるんだっけ?ということで、この記事に更新のやり方を残しておきます。useStateでオブジェクトを更新する方法オブジェクトの一部だけ変更con...
docker

DBコンテナ内のデータ確認はdocker execコマンドを使用(Docker DesktopからでもOK)

dockerでDBのコンテナを立ち上げた時、データはどうやって確認していますか?私は、docker execコマンドでコンテナ内のDBをチェックしたりします。この記事では、PostgreSQLを例に解説します。コンテナ上のDBにdocker...