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