目次 MUI v5 でのスマホサイズの判定方法 必要なインポート スマホサイズの判定方法 まとめ MUI v5 でのスマホサイズの判定方法 Material-UI（MUI）は、ReactのUIフレームワークとして非常に人気があります。 最新バージョンのMUI v5では、名前空間やインポ…

目次 React Router: ナビゲーションとパラメータの受け取り useNavigate でのナビゲーション useParams での URL パラメータの受け取り まとめ React Router: ナビゲーションとパラメータの受け取り React Router は React アプリケーションにおけるルーティ…

useNavigate を使ったURLパラメータに値を設定して React Router での遷移方法 React Router v6 から、useNavigate という新しいフックが導入されました。 これを使って、プログラム的にルーティングの遷移を行うことができます。 以下は useNavigate を使っ…

目次 Reactビルドファイルのindex.htmlを開く方法 1. 手動で開く 2. ローカルサーバーでホスティング 3. 実際のホスティング環境へデプロイ Reactビルドファイルのindex.htmlを開く方法 Reactアプリケーションをビルドすると、最適化された静的ファイルが生…

目次 HTTPのファイアウォール設定: 閉じる方法とその必要性 1. ufw (Uncomplicated Firewall)の場合 2. firewalldの場合 3. iptablesの場合 ファイアウォールを閉じるべきか？ 閉じる理由: 開けておく理由: 結論 HTTPのファイアウォール設定: 閉じる方法とそ…

目次 Dockerのポート競合エラーの解決方法 原因 解決方法 1. 既存のプロセスを確認・終了 2. 異なるポートでの起動 3. Docker Composeファイルの修正 Dockerのポート競合エラーの解決方法 DockerやDocker Composeを使用してコンテナを起動しようとした際に、…

TypeScriptでunknown型の扱い方 TypeScriptでは、unknownという特別な型があります。 これはある値の型がコンパイル時には明確でないことを示すための型です。 この記事では、unknown型の値を安全に操作する方法について説明します。 基本的な問題 以下の関…