javascriptのwindow.matchMediaでreactのカスタムフック（useMediaQuery）を作成してレスポンシブ対応
Webページをレスポンシブ対応する場合に、cssの@media クエリを利用する以外にjavascriptのwindows.matchMedia()を利用する方法があります。 javascriptのwindow.matchMedia()の使 ...
reactのデザインをmaterial-ui + styled components (CSS in JS)を組み合わせて利用する
react のデザインで styled components (CSS in JS)で行う場合、「全てのスタイルを１から作成するのは嫌だ」というときに、material-uiと組み合わせて利用することで省エネでデザインすることができます。 ...
Windows 10 Home（WSL2）にUbuntu(18.04 | 20.04)をインストールする手順まとめ
Windows 10 Home上のWSL2でUbuntu(18.04 | 20.04)をインストールする手順についてまとめました。 Windows 10 HomeにWSL2を設定する Ubuntu18.04をインストールする前に、WSL2を ...
.gitignoreに追加したファイルが反映されない場合の対処方法 ～ git rm -r –cached ～
.gitignoreの内容が反映されない gitの管理対象に含めたくないファイルやディレクトリは .gitignore ファイルに記述することで対象外とすることができるのですが、 .gitignoreファイルに追加したのに、git st ...
Windows プログラミング開発環境の構築方法 (WSL2 + docker + VSCode + GitHub CLI + Terminal + PowerToys)
Windows 開発環境の構成 Windows で大丈夫？ プログラミング開発環境としては Windows よりも Mac の方が人気が高いです。 人気の理由は、 本番環境は Li ...
git commitメッセージを間違った時の修正方法
gitコマンドで コミット時にコミットメッセージだけを間違えることがよくあります。 コミットメッセージだけを修正したい場合には、以下のコマンドで簡単に修正できます。 git pushする前に実行しましょう。 git commit --ame ...
GitHubのプルリクエスト（Pull Request）でコンフリクト（Conflict）が発生した場合の解決方法 ～merge編～
GitHubでプルリクエスト（Pull Request）を発行したがコンフリクト（conflict）が発生した場合に、コンフリクトを解消するまで「Merge Pull Request」ボタンが非活性でマージが出来ません。 GitHubのPu ...
GitHub CLI (gh)のインストール方法とコマンド（repo/pr）の使い方
GitHub公式のGitHub CLIツールghのインストール方法とコマンドの使い方をまとめました。 GitHub CLIを利用するとリポジトリの作成やプルリクエストを発行をブラウザではなくターミナルから実行できます。 シェルなどにも組み込 ...
WSL2のUbuntuやCentOSをシャットダウンや再起動する方法
WSL2上で実行しているUbuntuの設定を変更し再起動が必要な場合に、PCの再起動を行うことは面倒です。 そこで、WSL2のUbuntuやCentOSのみをシャットダウンや再起動する方法をまとめました。 WSL2をシャットダウンする方法 ...
Express（Node.js）でTypeScriptを利用した開発環境構築 ～REST APIのひな形を作成する～
フロント側ではReact、Vue、Angularなどは静的型付け言語であるTypeScriptでコーディングされることが一般的になってきました。 今回は、Node.jsのフレームワークであるExpressについてもJavaScriptではな ...
GitHub ActionsでCI/CD環境を構築する ～ReactアプリをFirebaseへデプロイするyamlファイルの書き方～
CI/CD環境はこれまでCircleCIを利用してきたのですが、Reactのversion17でcreate-react-appしたプロジェクトをCircleCIでbuildすると以下のエラーが発生するようになりました。 The build ...
エクスプローラでWSL2（ubuntu）のディレクトリを開く方法
WSL2を利用していると、Windows側で「このディレクトリやファイルを開きたい」と思うことがありますよね。 具体的には、以下のようなことを考えたことはないでしょうか。 Windows側とWSL2（Ubuntuなど）のファイルをやり取りす ...
gitで追加・変更したファイルやディレクトリを取り消し方法（add前／add後／commit後／push後）
gitで追加や変更したファイルを取り消したい場合のコマンドをまとめました。 に追加・変更したファイルやディレクトリの取り消し方法 追加と更新を同時に取り消すことはできないため、追加用と更新用で別のコマンドを実行します。 ポイント 全ディレク ...
Google Chromeの「パスワードを保存できるようにする」がグループポリシーで制限された状態でパスワードを保存する方法
Google Chromeの「パスワードを保存できるようにする」が利用できない 会社のPCなどでは、グループポリシーで「パスワードを保存できるようにする」が制限されている場合があります。 このような感じでロックされている場合です。 Goog ...
circleciで「error Couldn’t find a package.json file in “xxx/xxx”」が発生した場合の原因と対処方法
circleciでビルド中に以下のようなエラーが発生した場合の原因と対処方法についてまとめました。 #!/bin/bash -eo pipefail yarn build yarn run v1.22.4 error Couldn't fi ...
firebase loginで「localhost で接続が拒否されました。」でアクセスできない場合の対処方法
firebase loginで表示されるエラー firebase でloginする際やtoken文字列を取得する際に以下のコマンドを実行します。 firebase login や firebase login:ci URLが表示され、 Vi ...
sambaを導入してファイルサーバを構築する手順（インストールから設定方法まで）
Linux上にWindows端末から利用できるファイルサーバを構築したい場合に、あまり複雑なアクセス権などを考えず、簡単に構築する手順をご紹介します。 ユーザ・パスワードなしでsambaを利用したい場合は、こちらの記事を参考にしてください。 ...
Dockerコンテナでapt-getするとエラーになる場合の対処方法（Err:1 http://security.debian.org /debian xxx InRelease）（Failed to fetch http://deb.debian.org/debian/dists/buster/InRelease Temporary failure resolving ‘deb.debian.org’）
Dockerfileのapt-getでエラーになる dockerで開発していると、昨日まで動作していたのに突然apt-getコマンドでエラーにあることがあります。 こんなエラーです。 Err:1 buster InRelease Tempo ...
Reactの開発環境（WSL2+docker）構築から本番環境（DockerHub＋kubernetes）へのデプロイ手順まとめ
最近は、開発環境をDockerで構築することが多くなってきたので、Reactアプリの開発環境構築手順をまとめました。 また、本番デプロイ用にDockerHubへのPushとkubernetesへのデプロイ用YAMLの作成手順についてもまとめ ...
コンテナ間通信の設定をkubernetesとdocker-composeで同じ構成で構築してみた（nginx <-> uWSGI <-> Flask）
kubernetesでコンテナ間の通信を設定する方法の勉強のために、同じ環境をkubernetesとdocker-composeの両方で構築してみました。 環境 クライアント／サーバ クライアント ソフトバージョンOSUbuntu 20.0 ...