Docker Dockerで最小構成なリバースプロキシを作成した。《備忘録》
はじめに本内容は、今後作成する構成のチュートリアルです。私はDockerの初学者で、学習の一環で記しているため、不十分な内容の場合があります。環境 ホスト：Ubuntu 24.04構成同一ネットワークでリバースプロキシ、Webのコンテナを存...
備忘録
Docker 
VMware VMware FusionのubuntuでホストとClipboard(コピペ）の共有ができなくて諦めて別の方法に移行。
VMware FusionにてホストがMac（Apple Silicon)、ゲストにUbuntuServerを使用して、開発環境を構築中に、クリップボード（コピーアンドペースト機能）がホストゲスト間で共有できない不具合に見舞われました。結論...
プログラミング ReactMarkdownでLinkや見出しにスタイルや要素を適用する方法。（独自コンポーネント）
はじめに環境 react-markdown: 9.0.1ReactMarkdownでLinkや見出しにスタイルを適用する以下のように、componentsに構造を定義することで、独自な要素のスタイルなどを適用できます。import Reac...
プログラミング MUIのTextFieldで枠線（fieldset）を消す方法。
はじめにMUIのTextFieldを使用すると、Borderが適用されて、このBorderを無効化したい場合があります。例えば、TextFieldをrenderInput内で使用して、スタイルはラッパー側を適用したい場面など。そういったとき...
プログラミング 【Next.js】NextRouter was not mountedとエラーが出て、router.push(“/”)が使えない
はじめにrouter.push("/")等で、画面遷移を実装しようとした時、Unhandled Runtime ErrorError: NextRouter was not mounted.とエラーが出ていしまいます。環境 next: 14...
プログラミング Django REST framework × MySQLでよく使うコマンド集（覚書）
Django REST framework依存パッケージのインストールpip install -r requirements.txtデータベースのマイグレーションpython manage.py makemigrations app_nam...
プログラミング MUIのAppBarでfixedを使用すると要素が重なり、stickyだと固定されないときに確認すること。
はじめにMUIのAppBarを固定させたい時、positionをfixedにすることで実現することができます。しかし、fixedを使用すると、元々reativeで下にあった要素が上がり重なってしまいます。AppBarのheightはドキュメ...
プログラミング 【MUI,Next.js】MediaQueryの判別ユーティルティ作成した。備忘録
はじめに環境 mui/material:^5.15.5 next: 14.0.3 typescript": ^5MediaQueryの判別用ファイルimport useMediaQuery from '@mui/material/useMe...
プログラミング DataGridのヘッダーから「…(テンテンテン)」や上矢印のメニューをなくす方法。
はじめにDataGridのヘッダーから「...(テンテンテン)」や上矢印のメニューをなくす方法を記します。このテンテンテンは、Kebab Menu (ケバブメニュー）と呼ぶそうです。環境@mui/x-data-grid”: “6.19.4”...
プログラミング DataGridのセルにてWidthが一定以上小さくならないときに確認すること（備忘録）
はじめにData Gridで表を作成するとき、セルのサイズなど指定することができますが、Widthを一定以上小さくしようとプロパティを設定しても小さくならないです。そのときに確認するべきことを記します。環境@mui/x-data-grid"...
プログラミング MUIのDataGridでshowCellRightBorderを使うとエラーが出る。対処法。
はじめにDataGridを使っていて、セルにBorderを適用させたかったのですが、用意されていたプロパティ「showCellRightBorder」を設定しても割り当てられないとエラーが発生してしまいます。<DataGrid rows={...
プログラミング MUIのDataGridで初期表示時に特定の列を非表示にする(React)
はじめに環境 mui/x-data-grid: 6.19.4特定の列を非表示にする方法DataGrid要素内のプロパティ「columnVisibilityModel」で、非表示にしたい列を指定することで初期非表示にすることができます。列管理...
プログラミング MUIのDataGridで標準の日本語と任意の文字列をマージさせる方法（備忘録）
はじめにMUIのx-data-gridは、多機能なデータテーブルのコンポーネントです。フィルター等機能も簡単につけられます。しかし、標準で英語になっているため日本語に変更する方法と、一部任意の文字列に変更したい場合の手順を記します。環境 r...
プログラミング MUIでの「AppBar」をスクロール時に隠す方法（備忘録）
はじめに環境 react: "^17.0.0 || ^18.0.0", @mui/material：^5.15.9 @emotion/react：^11.11.3 @emotion/styled：^11.11.0実装下にスクロールしたときに...
開発 MUIのCardActionsをalign centerやrightにする方法（備忘録）
はじめにMUIのCardActionに配置しているボタンなど要素を中央寄せ、右寄せにする方法を記します。方法<CardActions sx={{justifyContent: 'center'}}></CardActions>CardAct...
プログラミング 【Next.js】MUIの要素にGoogleFontsを適用する方法（備忘録）
MUI要素にGoogleFontsを適用する方法GoogleFontsでフォントを選ぶGoogle FontsでFontを選ぶ。globals.cssにimportするglobals.cssにfontをimportする。@import ur...