<ul><li>react@18.2.0</li><li>next@14.0.3</li><li>@mui/material@5.14.12</li><li>jotai@2.4.3</li></ul>

ライブラリ

例えば、こんなやつ。Webアプリケーションで多数登場することになる。<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/02565f264907459bacc77ae2b055ba81/image.png" alt="" width="726" height="148"></figure>グローバル関数<code>callFlashMessage</code>を作成し、プロジェクトのどこからでも呼び出せるようにする。

フラッシュメッセージとは

フラッシュメッセージを制御するための情報を状態管理に持たせる。今回は、jotaiライブラリを使う。<pre><code class="language-typescript">import { AlertColor, SnackbarProps } from &quot;@mui/material&quot;;
import { atom } from &quot;jotai&quot;;

export const snackbarAtom = atom&lt;{severity?: AlertColor, loading: boolean} &amp; SnackbarProps&gt;({
 loading: false,
 autoHideDuration: 5000,
})</code></pre>MUIの<code>snackbar</code>のpropsに加えて、loadingとserverityプロパティを設定。loading→trueの場合、サーキュレートインディケータをつけて永久表示させる。デフォルトでは５秒間表示。serverity→<code>AlertColor</code>つまり<code>&apos;info&apos; | &apos;success&apos; | &apos;warning&apos; | &apos;error&apos;</code>の中から色を選べるように。

まずは状態管理

<code>FlashMessage</code>コンポーネントを作る。グローバルフラッシュメッセージなるものを作りたいので、コンポーネントはlayout.tsx付近に配置。<pre><code class="language-typescript">&apos;use client&apos;

import { snackbarAtom } from &quot;@/atom/snackbar&quot;;
import { Alert, CircularProgress, Slide, Snackbar } from &quot;@mui/material&quot;;
import { useAtom } from &quot;jotai&quot;;
import { FC, SyntheticEvent, useEffect, useState } from &quot;react&quot;;
import { IconButton } from &quot;@mui/material&quot;;
import CloseIcon from &apos;@mui/icons-material/Close&apos;;

const close = (handleClose) =&gt; (
 &lt;IconButton
 size=&quot;small&quot;
 onClick={handleClose}
 color=&quot;inherit&quot;
 &gt;
 &lt;CloseIcon fontSize=&quot;small&quot; /&gt;
 &lt;/IconButton&gt;
)

export const FlashMessage: FC = () =&gt; {
 const [ { key, loading, children, message, severity, ...props}, setProps ] = useAtom(snackbarAtom)
 const defaultDuration = 5000
 const [ autoHideDuration, setAutoHideDuration ] = useState(defaultDuration)

 useEffect(() =&gt; {
 setAutoHideDuration(loading ? null : defaultDuration)
 }, [ loading ])

 const handleClose = (event: SyntheticEvent | Event, reason?: string) =&gt; {
 if (reason === &apos;clickaway&apos;) {
 return;
 }

 setProps({ key, loading, children, message, severity, ...props, open: false });
 }

 const action = close(handleClose)

 return(
 &lt;Snackbar
 key={key || &apos;snackbar&apos;}
 action={action}
 onClose={handleClose}
 autoHideDuration={autoHideDuration}
 message={message}
 TransitionComponent={(props) =&gt; &lt;Slide { ...props } direction=&quot;right&quot; /&gt;}
 {...props}
 &gt;{children || severity &amp;&amp; (
 &lt;Alert
 onClose={handleClose}
 severity={severity}
 sx={{ width: &apos;100%&apos; }}
 icon={loading ? &lt;CircularProgress color=&quot;inherit&quot; size={22} /&gt; : undefined}
 &gt;
 {message}
 &lt;/Alert&gt;
 )}&lt;/Snackbar&gt;
 )
}
</code></pre>

コンポーネント作成

ここまでで、<code>useAtom</code>を使いながらグローバルにフラッシュメッセージを呼び出そうと思えば呼び出せる。<pre><code class="language-typescript">import { snackbarAtom } from &apos;@/atom/snackbar.ts&apos;

snaconst [ snackbar, setSnackbar] = useAtom(snackbarAtom)

setSnackbar({
 ...snackbar,
 key: &apos;flashMessage&apos;,
 loading: true,
 severity: &apos;info&apos;,
 message: &apos;〇〇処理を開始しました。&apos;,
 open: true
})</code></pre>…が、いちいち<code>snackbar</code>のpropsを意識しなといけないので、簡単に呼び出せるよう自作関数<code>callFlashMessage</code>を作る。<a href="/programing/mz36w3pvc/">こちら</a>の記事を参考に、まず<code>store</code>を設置。<pre><code class="language-typescript">export const store = createStore()

&lt;JotaiProvider store={store}&gt;{children}&lt;/JotaiProvider&gt;</code></pre><code>store</code>を使って制御するための関数を作成。<pre><code class="language-typescript">import { store } from &apos;@/components/Atom/Provider&apos;

type Action = &apos;start&apos; | &apos;success&apos; | &apos;fail&apos;
export const callFlashMessage = (action: Action, message: string) =&gt; {
 let severity;
 switch(action) {
 case &apos;start&apos;:
 severity = &apos;info&apos;;
 break;
 case &apos;success&apos;:
 severity = &apos;success&apos;
 break
 case &apos;fail&apos;:
 severity = &apos;error&apos;
 break
 default:
 severity = undefined
 break
 }

 store.set(snackbarAtom, ((prevState) =&gt; ({
 ...prevState,
 key: &apos;flashMessage&apos;,
 open: true,
 loading: action == &apos;start&apos;,
 message,
 severity
 })))
}</code></pre>引数には、actionとmessageを設定。actionには&apos;start&apos; | &apos;success&apos; | &apos;fail&apos;の３種類を許可。正直、フラッシュメッセージの種類としてはたいていこの3つだけでいい。<pre><code class="language-typescript">callFlashMessage(&apos;start&apos;, &apos;〇〇処理を開始しました。&apos;)
callFlashMessage(&apos;success&apos;, &apos;〇〇処理が完了しました。&apos;)
callFlashMessage(&apos;fail&apos;, &apos;〇〇処理が失敗しました。&apos;)</code></pre>もっとカスタマイズしたければ、自作関数も自由に増やせばいい。

callFlashMessageの作成

何回も呼び出すフラッシュメッセージは、より簡単に！！

【Next.js, MUI】フラッシュメッセージを表示させるベストプラクティス

<pre><code class="language-typescript">type NAME = `something`</code></pre>こんな<code>``</code>で囲った型のやつ。代入できる型が作られる。

テンプレートリテラル型とは

ただ決まったテキストだけが代入するのは意味がないが、ユニオン型と組み合わせることで「〇〇_data」といった決まった形式の名前を作れるようになる。<pre><code class="language-typescript">type val = &apos;Cat&apos; | &apos;N&apos; | &apos;R&apos;

type data_type = `${val}_data`
type attr_type = `${val}_attr`</code></pre>上記の場合、以下と同義になります！<pre><code>type data_type = &apos;data_Cat&apos; | &apos;data_N&apos; | &apos;data_R&apos;
type attr_type = &apos;attr_Cat&apos; | &apos;attr_N&apos; | &apos;data_R&apos;</code></pre>

ユニオン型と組み合わせる

テンプレートリテラル型を使って、より見通しの良いTypeScriptライフを。

【TypeScript】テンプレートリテラル型で定型の名前の型を作る

キーと値がセットになって情報を保管する型。 かつ、キーも値も型指定したもの。<code>type</code>を使って、このように定義できます。<pre><code class="language-typescript">type NAME = { [ key in TYPE ]: TYPE</code></pre>

マップ型とは

キーも値も共に<code>string</code>のマップ型。<pre><code class="language-typescript">type stringMap = { [ key in string ]: string }

const data: stringMap = {
 a: &apos;AAA&apos;,
 b: &apos;BBB&apos;,
 c: &apos;CCC&apos;,
}

data[&apos;d&apos;] = &apos;DDD&apos;
data[1] = &apos;ONE&apos;
console.log(data)</code></pre>ちなみに、上記の<code>data[1]</code>は、<code>&apos;1&apos;</code>のテキストに変換される。<pre><code>[LOG]: {
 &quot;1&quot;: &quot;ONE&quot;,
 &quot;a&quot;: &quot;AAA&quot;,
 &quot;b&quot;: &quot;BBB&quot;,
 &quot;c&quot;: &quot;CCC&quot;,
 &quot;d&quot;: &quot;DDD&quot;
} </code></pre>

stringのキーのマップ

enumの値をキーに指定したマップ型。<pre><code class="language-typescript">enum company { name=&apos;name&apos;, address=&apos;address&apos; }

type CompanyMap = { [ key in company ]: string }

const toyota: CompanyMap = {
 name: &apos;toyota&apos;,
 address: &apos;Aichi&apos;
}

const sony: CompanyMap = {
 name: &apos;sony&apos;,
 address: &apos;Tokyo&apos;
}</code></pre><code>[ key in company ]</code>としたことで、<code>CompanyMap</code>型では必ず<code>name</code>と<code>address</code>の項目が必須となる。あらかじめ用意されている項目が確定されているような場合は<code>type</code>でマップ型を作成するべし！！

enumで指定されたキー

キーと値がセットになって情報を保管する型。 かつ、キーも値も型指定したもの。あらかじめ用意されている項目が確定されているような場合は<code>type</code>でマップ型を作成するべし！！

【TypeScript】マップ型によるデータの扱い

Jotaiの<code>Store</code>の説明はこちら。 <a href="https://jotai.org/docs/core/store">https://jotai.org/docs/core/store</a>appRouterを使ってるので、<code>Provider</code>用にコンポーネントを切り分けます。 @/components/Atom/Provider.tsxを作成します。<div data-filename="@/components/Atom/Provider.tsx"><pre><code class="language-typescript">&apos;use client&apos;
import { Provider as JotaiProvider, createStore } from &apos;jotai&apos;;
import { ReactNode } from &apos;react&apos;;

type Props = {
 children: ReactNode
}

export const store = createStore()

export default function Provider ({ children }: Props) {
 return &lt;JotaiProvider store={store}&gt;{children}&lt;/JotaiProvider&gt;
}</code></pre></div>layout.tsxに適用します。これで、storeを使ってアプリ内のどこからでもアクセスできるようになる。<div data-filename="@/app/layout.tsx"><pre><code class="language-typescript">&lt;html lang=&quot;ja&quot;&gt;
 &lt;body&gt;
 &lt;Provider&gt;
 {children}
 &lt;/Provider&gt;
　　 &lt;/body&gt;
&lt;/html&gt;</code></pre></div>

CreateStoreを使う

あとは、公式ドキュメントにあった通り<code>get</code> <code>set</code> <code>sub</code> 関数を使って取得したり更新したり…。<pre><code class="language-typescript">import { store } from &apos;@/components/Atom/Provider&apos;

store.get(somethingAtom)
store.set(somethingAtom, value)
store.sub(somethingAtom, () =&gt; {console.log(store.get(somethingAtom))})</code></pre>

コンポーネント外からアクセス

【Jotai】Reactコンポーネントの外からアクセスしたい時

react@18.2.0 recharts@2.8.0 @mui/material@5.14.12

recharts公式ドキュメントにあるサンプルデータを使う。 ついでに型を作る。<pre><code class="language-typescript">export type Data = {
 name: string
 uv: number
 pv: number
 amt: number
}

export type Column = {
 key: string | number
}

export type Row = Data &amp; {
 key: string | number
}

const data: Data[] = [
 {
 &quot;name&quot;: &quot;Page A&quot;,
 &quot;uv&quot;: 4000,
 &quot;pv&quot;: 2400,
 &quot;amt&quot;: 2400
 },
 {
 &quot;name&quot;: &quot;Page B&quot;,
 &quot;uv&quot;: 3000,
 &quot;pv&quot;: 1398,
 &quot;amt&quot;: 2210
 },
 {
 &quot;name&quot;: &quot;Page C&quot;,
 &quot;uv&quot;: 2000,
 &quot;pv&quot;: 9800,
 &quot;amt&quot;: 2290
 },
 {
 &quot;name&quot;: &quot;Page D&quot;,
 &quot;uv&quot;: 2780,
 &quot;pv&quot;: 3908,
 &quot;amt&quot;: 2000
 },
 {
 &quot;name&quot;: &quot;Page E&quot;,
 &quot;uv&quot;: 1890,
 &quot;pv&quot;: 4800,
 &quot;amt&quot;: 2181
 },
 {
 &quot;name&quot;: &quot;Page F&quot;,
 &quot;uv&quot;: 2390,
 &quot;pv&quot;: 3800,
 &quot;amt&quot;: 2500
 },
 {
 &quot;name&quot;: &quot;Page G&quot;,
 &quot;uv&quot;: 3490,
 &quot;pv&quot;: 4300,
 &quot;amt&quot;: 2100
 }
]</code></pre>

サンプルデータ確認

テーブルの列と行に合わせてデータを加工する。 ※この例ではヘッダー列を設けています。<pre><code class="language-typescript">let originalColumns: Column[] = data.map(d =&gt; ({ key: d.name }))
originalColumns.unshift({ key: &apos;header&apos; })
const [ columns, setColumns ] = useState&lt;Column[]&gt;(originalColumns)

let rows: Row[] = [ &apos;uv&apos;, &apos;pv&apos;, &apos;amt&apos; ].map(r =&gt; {
 let row = { key: r }
 columns.forEach(c =&gt; {
 const originalData = data.find(d =&gt; d.name === c.key)
 row[c.key] = originalData ? originalData[r] : &apos;&apos;
 })
 return row as Row
})</code></pre>

データの加工

<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/dbbedccc960840c39d958476e53c98c9/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%2010.50.31.png" alt="" width="882" height="234"></figure><pre><code class="language-typescript">// ヘッダー列のスタイル
const ColumnSticky: CSSProperties = {
 position: &apos;sticky&apos;,
 left: 0,
 backgroundColor: &apos;#fff&apos;,
 zIndex: 1,
}

return (
 &lt;&gt;
 &lt;TableContainer&gt;
 &lt;Table&gt;
 &lt;TableHead&gt;
 {/* ここにグラフを描画する */}
 &lt;TableRow&gt;
 {columns.map(column =&gt; column.key === &apos;header&apos;
 ? &lt;TableCell
 key={column.key}
 width={160}
 style={ColumnSticky}
 &gt;&lt;/TableCell&gt;
 : &lt;TableCell key={column.key}&gt;{column.key}&lt;/TableCell&gt;
 )}
 &lt;/TableRow&gt;
 &lt;/TableHead&gt;
 &lt;TableBody&gt;
 {rows.map(row =&gt; (
 &lt;TableRow key={row.key}&gt;
 {columns.map(column =&gt; column.key === &apos;header&apos;
 ? &lt;TableCell
 component=&quot;th&quot;
 key={`${row.key}___${column.key}`}
 width={160}
 style={ColumnSticky}
 &gt;{row.key}&lt;/TableCell&gt;
 : &lt;TableCell key={`${row.key}___${column.key}`}&gt;{row[column.key]}&lt;/TableCell&gt;
 )}
 &lt;/TableRow&gt;
 ))}
 &lt;/TableBody&gt;
 &lt;/Table&gt;
 &lt;/TableContainer&gt;
 &lt;/&gt;
)</code></pre>

テーブルを用意

副作用フックと、ResizeObserverを使う。 verticalPointsがX軸線の位置、graphData.xが棒グラフ等の位置となる。<code>&lt;Table ref={table}&gt;</code>も忘れずに。<pre><code class="language-typescript">const table: MutableRefObject&lt;HTMLTableElement | null&gt; = useRef(null)
const [ verticalPoints, setVerticalPoints ] = useState&lt;number[]&gt;([])
const [ graphData, setGraphData ] = useState(data)

useEffect(() =&gt; {
 const observer = new ResizeObserver((entries) =&gt; {
 entries.forEach((e) =&gt; {
 let columnWidths: number[] = Array.from(e.target.querySelector(&apos;thead tr:last-child&apos;)?.children || [])
 .map((th: HTMLElement) =&gt; th.getBoundingClientRect().width)
 const verticalPoints = columnWidths.reduce((acc, cur, idx) =&gt; {
 if(idx === 0) return acc
 const accumulated = (acc[idx - 2] || 0) + cur
 acc.push(accumulated)
 return acc
 }, [] as number[])
 setVerticalPoints(verticalPoints)
 setGraphData(graphData.map((d,i) =&gt; {
 const x = verticalPoints[i] - ( columnWidths[i + 1] / 2 )
 return {
 ...d,
 x,
 }
 }))
 })
 })

 if(table.current) observer.observe(table.current)

 return () =&gt; observer.disconnect()
}, [])

return (
 &lt;TableContainer&gt;
 &lt;Table ref={table}&gt;
 {/* 略 */}
 &lt;/Table&gt;
 &lt;/TableContainer&gt;
)</code></pre>

列の幅を計算し、ステートを更新する

TestChartsコンポーネントの作成。 type=numberのX軸<code>XAxis</code>を用意し、graphData.xの位置と合わせる。<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/8ea821c1a01d4ae1a0dafd810c88b555/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%2014.32.01.png" alt="" width="986" height="437"></figure><pre><code class="language-typescript">export interface Props {
 data: Data[]
 verticalPoints: number[]
}

export const TestCharts:FC&lt;Props&gt; = ({ data, verticalPoints }) =&gt; {
 return (
 &lt;TableRow&gt;
 &lt;TableCell
 padding=&quot;none&quot;
 style={ColumnSticky}
 &gt;
 {/* 目盛用のグラフ */}
 &lt;ResponsiveContainer width=&quot;100%&quot; height={200}&gt;
 &lt;ComposedChart
 data={data}
 margin={{right: 0, left: 0}}
 &gt;
 &lt;YAxis
 type=&quot;number&quot;
 includeHidden
 domain={[&apos;auto&apos;, &apos;auto&apos;]}
 orientation=&quot;right&quot;
 mirror
 /&gt;
 &lt;Bar hide dataKey=&quot;uv&quot; /&gt;
 &lt;Bar hide dataKey=&quot;pv&quot; /&gt;
 &lt;Line hide dataKey=&quot;amt&quot; /&gt;
 &lt;/ComposedChart&gt;
 &lt;/ResponsiveContainer&gt;
 &lt;/TableCell&gt;
 &lt;TableCell
 colSpan={verticalPoints.length}
 padding=&quot;none&quot;
 &gt;
 {/* 本グラフ */}
 &lt;ResponsiveContainer width=&quot;100%&quot; height={200}&gt;
 &lt;ComposedChart
 data={data}
 barGap={5}
 margin={{right: 0, left: 0}}
 &gt;
 &lt;CartesianGrid
 strokeDasharray=&quot;4 1 2&quot;
 stroke=&quot;#333&quot;
 verticalPoints={verticalPoints}
 fillOpacity={.6}
 /&gt;
 &lt;XAxis
 hide
 dataKey=&quot;x&quot;
 type=&quot;number&quot;
 domain={[0, verticalPoints[verticalPoints.length - 1]]}
 /&gt;
 &lt;Bar dataKey=&quot;uv&quot; barSize={20} fill=&quot;#00552e&quot; /&gt;
 &lt;Bar dataKey=&quot;pv&quot; barSize={20} fill=&quot;#a03e41&quot; /&gt;
 &lt;Line dataKey=&quot;amt&quot; strokeWidth={2} stroke=&quot;#33ccff&quot; /&gt;
 &lt;/ComposedChart&gt;
 &lt;/ResponsiveContainer&gt;
 &lt;/TableCell&gt;
 &lt;/TableRow&gt;
 )
}</code></pre>これを先ほどのテーブルに差し込む。<pre><code>&lt;TableContainer&gt;
 &lt;Table ref={table}&gt;
 &lt;TableHead&gt;
 &lt;TestCharts data={graphData} verticalPoints={verticalPoints} /&gt;
 {/* 略 */}
 &lt;/TableHead&gt;
 &lt;/Table&gt;
&lt;/TableContainer&gt;</code></pre>テーブルの列幅を変えても崩れない、グラフ＆テーブルの完成。<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/d6976606384441a1b7df04cf35207bcf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-14%2014.24.23.png" alt="" width="986" height="460"></figure>

グラフコンポーネント

Rechartsは、APIが読みやすい。

【Recharts】グラフの軸とテーブルの列幅を合わせる

<ul><li>React Hook Form ^7.47.0</li><li>Yup ^1.3.2</li></ul><h3 id="h2d24316611">通常時</h3><figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/99d150588c8f4e218e6c83478a382655/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2013.26.46.png" alt="" width="738" height="165"></figure><h3 id="h7750eb2f07">マウスオーバー時</h3><figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/ebacf5ba424a4039907c9a63e5cf2a49/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2013.27.56.png" alt="" width="738" height="165"></figure><h3 id="hcb0cf4d190">ファイルアップロード後</h3><figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/ba932af5a496491ca1b2bea864e0012d/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2013.28.13.png" alt="" width="738" height="188"></figure>

完成品

<pre><code class="language-typescript">import { ChangeEvent, DragEvent, useState } from &apos;react&apos;;
import { Button, IconButton, Paper, Typography } from &apos;@mui/material&apos;;
import { styled } from &apos;@mui/material/styles&apos;;
import CloudUploadIcon from &apos;@mui/icons-material/CloudUpload&apos;;
import { bytesToSize } from &apos;@/utils/fileSize&apos;;
import CancelIcon from &apos;@mui/icons-material/Cancel&apos;;
import CheckCicleIcon from &apos;@mui/icons-material/CheckCircle&apos;;
import { Control, useController } from &apos;react-hook-form&apos;;


const VisuallyHiddenInput = styled(&apos;input&apos;)({
 clip: &apos;rect(0 0 0 0)&apos;,
 clipPath: &apos;inset(50%)&apos;,
 height: 1,
 overflow: &apos;hidden&apos;,
 position: &apos;absolute&apos;,
 bottom: 0,
 left: 0,
 whiteSpace: &apos;nowrap&apos;,
 width: 1,
});

type props = {
 files: File[]
 setFiles: Function
 name: string
 control: Control
}

export default function FileUpload({ files, setFiles, name, control }: props) {
 const {
 field: { ref, onChange, ...rest },
 fieldState: { invalid, error, }
 } = useController({ name, control })

 const [isOver, setIsOver] = useState(false);

 // Define the event handlers
 const handleDragOver = (event: DragEvent&lt;HTMLDivElement&gt;) =&gt; {
 event.preventDefault();
 setIsOver(true);
 };

 const handleDragLeave = (event: DragEvent&lt;HTMLDivElement&gt;) =&gt; {
 event.preventDefault();
 setIsOver(false);
 };

 const handleDrop = (event: DragEvent&lt;HTMLDivElement&gt;) =&gt; {
 event.preventDefault();
 setIsOver(false);

 // Fetch the files
 const droppedFiles = Array.from(event.dataTransfer.files);


 if(droppedFiles.length &gt; 1) {
 console.log(&apos;ファイルは1つだけ選択してください。&apos;)
 return
 }

 readFiles(droppedFiles)
 };

 const handleChange = (event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 const selectedFiles = Array.from(event.target.files)

 readFiles(selectedFiles)
 }

 const readFiles = async (files) =&gt; {
 console.log(files)
 setFiles(files)

 await files.forEach((file) =&gt; {
 const reader = new FileReader()

 reader.onloadend = () =&gt; {
 console.log(reader.result);
 };

 reader.onerror = () =&gt; {
 console.error(&apos;There was an issue reading the file.&apos;);
 };

 reader.readAsDataURL(file);
 return reader;
 })
 }

 return (
 &lt;&gt;
 &lt;Paper
 onDragOver={handleDragOver}
 onDragLeave={handleDragLeave}
 onDrop={handleDrop}
 sx={{
 padding: 2,
 display: &apos;flex&apos;,
 flexDirection: &apos;column&apos;,
 justifyContent: &apos;center&apos;,
 alignItems: &apos;center&apos;,
 minWidth: 300,
 backgroundColor: isOver ? (theme) =&gt; theme.palette.grey[300] : undefined,
 transition: &apos;.5s all&apos;
 }}
 &gt;
 &lt;Typography fontSize={54} color=&quot;grey&quot; lineHeight={1}&gt;
 { error || files.length === 0
 ? &lt;CloudUploadIcon
 fontSize=&quot;inherit&quot;
 sx={{
 transition: &apos;.5s all&apos;,
 transform: isOver &amp;&amp; &apos;translateY(-10%)&apos;
 }}
 /&gt;
 : &lt;CheckCicleIcon fontSize=&quot;inherit&quot; color=&quot;success&quot; /&gt;
 }
 &lt;/Typography&gt;
 {files.length === 0
 ? &lt;Button component=&quot;label&quot; variant=&quot;contained&quot;&gt;
 Upload file
 &lt;VisuallyHiddenInput type=&quot;file&quot; onChange={handleChange} name={name} /&gt;
 &lt;/Button&gt;
 : &lt;&gt;
 {files.map(file =&gt; (&lt;Typography key={file.name} fontSize=&quot;small&quot;&gt;{file.name} / {bytesToSize(file.size)}&lt;/Typography&gt;))}
 &lt;IconButton color=&quot;error&quot; onClick={() =&gt; setFiles([])}&gt;&lt;CancelIcon /&gt;&lt;/IconButton&gt;
 &lt;/&gt;
 }
 &lt;/Paper&gt;
 { error &amp;&amp; &lt;Typography fontSize=&quot;small&quot; color=&quot;error&quot;&gt;{error.message}&lt;/Typography&gt;}
 &lt;/&gt;
 );
}</code></pre><ol><li>VisuallyHiddenInput設置</li><li>useControllerを使用して、onChangeやerrorを参照できるように</li><li>isOverで、ドラッグ＆ドロップのイベントを検知</li><li>onDropとonChangeイベントでファイル読み込みを走らせる</li></ol>

ファイルアップロードコンポーネント

<pre><code>const {
 handleSubmit,
 control,
 setValue,
} = useForm&lt;FormValues&gt;({
 resolver: yupResolver(schema),
 mode: &apos;onBlur&apos;,
});

const [ files, setFiles ] = useState&lt;File[]&gt;([]);

const handleSetFiles = async (fileList: File[]) =&gt; {
 setFiles(fileList)
 setValue(&apos;files&apos;, fileList, { shouldValidate: true })
}

&lt;FileUpload
	files={files}
	setFiles={handleSetFiles}
	name=&quot;files&quot;
	control={control}
/&gt;</code></pre>注意すべきポイントは、自作関数handleSetFiles。input[type=hidden]は、reactが変更を検知しないため、react hook formsのsetValueを使って更新する。

コンポーネントの呼び出し

今回はYupを使用。<pre><code class="language-typescript">const schema = yup.object({
 files: .array()
 .length(1, &apos;ファイルを選択してください。&apos;)
 .test(
 &apos;is-pdf&apos;,
 &apos;CSVファイルを選択してください。&apos;,
 (value: [File]) =&gt; {
 return value[0] &amp;&amp; value[0].type === &apos;text/csv&apos;
 }
 )
 .test(
 &apos;is-size&apos;,
 `ファイルサイズは、${bytesToSize(maxSize)}以下にしてください。`,,
 (value: [File]) =&gt; value[0] &amp;&amp; value[0].size &lt;= maxSize
 ),
});</code></pre><h3 id="h8a1834b308">ファイルサイズ関数</h3><pre><code>const units = [&apos;Bytes&apos;, &apos;KB&apos;, &apos;MB&apos;, &apos;GB&apos;, &apos;TB&apos;];

type unit = (typeof units)[number]

export const bytesToSize = (bytes: number): string =&gt; {
 if (bytes === 0) return &apos;n/a&apos;;
 const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
 if (i === 0) return `${bytes} ${units[i]}`;
 return `${(bytes / (1024 ** i)).toFixed(1)} ${units[i]}`;
}

export const SizeToBytes = (size: number, unit: unit): number =&gt; {
 return size * 1024 ** units.indexOf(unit)
}</code></pre>

バリデーション

【React Hook Form / Yup / TypeScript】ドラッグ＆ドロップできるファイルアップロード

<h3 id="hd56e4caf46">関数</h3><div data-filename="PickPropsWithType.ts"><pre><code class="language-typescript">type PickPropsWithType&lt;T, TYPES&gt; = {
 [P in { [K in keyof T]: T[K] extends TYPES ? K : never }[keyof T]]: T[P]
};</code></pre></div><h3 id="h73c11d078e">実装例</h3>例えば、MUIで<code>Palette</code>はこのように定義されている。<div data-filename="Palette.ts"><pre><code class="language-typescript">export interface Palette {
 common: CommonColors;
 mode: PaletteMode;
 contrastThreshold: number;
 tonalOffset: PaletteTonalOffset;
 primary: PaletteColor;
 secondary: PaletteColor;
 error: PaletteColor;
 warning: PaletteColor;
 info: PaletteColor;
 success: PaletteColor;
 grey: Color;
 text: TypeText;
 divider: TypeDivider;
 action: TypeAction;
 background: TypeBackground;
 getContrastText: (background: string) =&gt; string;
 augmentColor: (options: PaletteAugmentColorOptions) =&gt; PaletteColor;
}</code></pre></div>ここから、<code>PaletteColor</code>のみ取り出すようにするには、<pre><code class="language-typescript">type paletteColors = keyof PickPropsWithType&lt;Palette, PaletteColor&gt;</code></pre>とすると、paletteColorsは、<code>&quot;primary&quot; | &quot;secondary&quot; | &quot;error&quot; | &quot;warning&quot; | &quot;info&quot; | &quot;success&quot;</code>のユニオン型となる

特定の型のプロパティだけ取り出す

TypeScriptをもっと使いこなせるようになりたい…。