プログラミング 【MUI,Next.js】MediaQueryの判別ユーティルティ作成した。備忘録
はじめに環境 mui/material:^5.15.5 next: 14.0.3 typescript": ^5MediaQueryの判別用ファイルimport useMediaQuery from '@mui/material/useMe...
Hase
プログラミング 
プログラミング 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...
プログラミング Embla-CarouselでAutoplayで自動化と時間指定をする方法。
はじめにEmbla-Carouselとは、非依存型でシンプルなカルーセルライブラリです。様々なオプションがあり、自由度高く設定することができます。Embla-Carouselにはサンプルが多く転記し易いですが、バージョンによるオプション等の...
プログラミング Next.jsでmdxの要素にTailwind CSSのスタイルを適用させる方法のご紹介。
はじめにMdxはマークダウン記法ができる、マークダウンの拡張形式です。jsxを埋め込むことができ、柔軟にカスタマイズすることができます。何かしらのUIやスタイルのフレームワークを使用している場合、マークダウンからレンダリングしてHTMLを生...
プログラミング Next.js AppRouterの動的ページでmdxを表示させる方法（SSG)
はじめにインストールまでの手順プロジェクト内で使えるように、インストールまでの手順は以下をご参照ください。動的ページに直で記すとエラーが発生TypeError: createContext only works in Client Comp...
プログラミング Next.jsでmdxを使ってみた。@next/mdxのインストールから表示までの手順。
はじめにマークダウンのライブラリの選択肢は、今回紹介するNext/MDXの他にもあります。Reactで、react-markdownを使用したことがありますが、個人的には好みではなく、完全なマークダウンではなく、何かしら変数を組み合わせられ...
プログラミング Next.jsでMUIのTypographyを設置すると「Element type is invalid」とエラーが出るときの対処法
エラーNext.jsにおいて、MUI要素であるTypographyを特定条件下で配置した際、以下のようなエラーが発生します。Error: Element type is invalid. Received a promise that re...
プログラミング Next.js AppRouterにて動的ページをビルドする（SSG)
はじめにNext.js13.4の新機能でApp Routerが追加されました。ファイルシステムベースのRouterのことで、Server Componentなど新機能に対応しています。AppRouterでは、すべてのコンポーネントがServ...
レンタルサーバ XserverにSSHで接続する手順（証明書生成からターミナルで接続まで）
はじめにSSH認証方法SSHでの接続方法には、主に２種類あります。パスワード認証と公開鍵認証です。レンタルサーバでは、どちらの認証方法も許可されていたり、将又、公開鍵認証しか許可されていないと制限されるケースがあります。Xserverでは、...