はじめに 先日、MUIを使って日付・時刻の入力処理を実装しました。公式のドキュメントやブログを参考に実装したのですが、中には除方が古く参考にならないものもあったので改めて基本的な使い方をまとめてみました。 パッケージのインストール MUIの日時入力コンポーネントを使用するには@mui/x-date-pickersをインストールします。また、Locale・型などの指定にdayjsを使用します。 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs'; import {DateTimePicker, LocalizationProvider} from '@mui/x-date-pickers'; import {Dayjs} from 'dayjs'; import 'dayjs/locale/ja'; interface

はじめに 先日、Nuxt3のuseFetchを使ってデータ取得処理を実装していました。useFetch()の引数に動的なURLを渡したかったのですが、たったこれだけのことがなかなか上手くいきませんでした。今回は上手く動作した・動作しなかったパターンをご紹介します。 前提条件 ・Nuxt3を使用しています ・APIのURLは/api/user/${userId}とします 上手く動作したパターン 以下のパターンではuserIdの値が更新される度に/api/user/1、/api/user/2...とfetch処理が実行されます。

はじめに 先日、JavaScriptでファイルアップロード処理を実装していたところ、ファイル名が以下のように表示されてしまいました。 元のファイル名は「アップロードしたファイル.csv」だったのですが、濁点、半濁点が一文字として扱われている状態です。今回はこちらをJavaScript(TypeScript)で解消する方法をまとめました。 前提条件 ・Mac OSのPCを使っている ・アップロードしたファイルはuploadedFileで保持している 解消方法 uploadedFile.name.normalize('NFC'); // 使用例 const fileName = uploadedFile.name.normalize('NFC'); if (fileName.includes('アップロード')) { return; } 原因 Mac OSではファイル名を「NFD(Normal