<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】マップ型によるデータの扱い

楽天でなんと480円！ 右手用・左手用を選ぶことができます。 私は両方購入してみました。

商品紹介

届いたものを開けてみると、片手の親指に少し穴が空いている…？ 不良品のようですが支障はないところなので見なかったことに…手にはめてみると、私は手が小さいので余裕ありすぎです。 でも手首のマジックで固定できるので外れることはありません。 少しやりにくさはありますが値段相応だと思います。我が家のキャットを早速撫でてみると…？ お気に召したご様子。<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/3d288d7ff11847329e51f248c9278bf0/%E3%83%A9%E3%83%8F%E3%82%99%E3%83%BC%E3%82%AF%E3%82%99%E3%83%AD%E3%83%BC%E3%83%95%E3%82%99.JPG" alt="" width="2880" height="2160"></figure>

正直レビュー

毛を取った後は端っこからゆっくりと剥がすと気持ちいいくらいきれいに取れます。 ※ある程度毛が溜まってないときれいに剥がれません剥がしただけだと完璧には取れないので最後はコロコロで除去してます。<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/2b3c777633954b4982ee52f6729a089a/IMG_6806.jpeg" alt="" width="4032" height="3024"></figure>我が家はキャットから取れた毛で猫毛100％のボールを生成し、キャットがそれを使って大運動会をしています。<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/9bf985c0ac3e479fbb04a2a9d49a08ef/IMG_6967.jpeg" alt="" width="4032" height="3024"></figure>

取れた毛の処理

見た目と作りは少し微妙だが、コスパ最強の良い商品👍

猫の毛取り　ラバーグローブ使ってみた！

Situation（状況）は、具体的な場面や出来事に関連して使います。例えば、学校でのテストや友達との会話など、日常の特定の状況を表現するときに使います。Situationは一時的なもので、時間が経つと変化することがあります。たとえば、<blockquote>I had a difficult situation at work today （今日、仕事で困難な状況があった）</blockquote>と言えば、その日の特定の出来事を指しています。

Situationの使い方

Circumstance（状況・事情）は、より広い視点での状況や条件を表します。自分の生活環境や社会的な状況など、大きな背景や影響を指します。Circumstanceは一般的なものであり、長期間にわたって影響を与えることがあります。たとえば、<blockquote>Despite the difficult circumstances, I&apos;m staying positive （困難な状況にもかかわらず、前向きに考えています）</blockquote>と言えば、より広い背景や条件を考慮した表現です。

Circumstanceの使い方

SituationとCircumstanceを使い分けるためのヒントをいくつかご紹介します。もし特定の出来事や状況に焦点を当てたい場合は、Situationを使います。例えば、学校での試験や旅行中のトラブルなど、具体的な場面に関連する言葉として使います。一方、広い背景や条件を考慮した表現が必要な場合は、Circumstanceを使います。自分自身の生活状況や社会的な背景など、より一般的な状況を表現する際に使います。

使い分けのヒント

SituationとCircumstance: 英語学習者のための使い方ガイド。これらの言葉の微妙な違いを理解することで、日常会話で的確に意思を伝えることができます。

<ul><li>Situationは具体的な場面や出来事を指し、一時的な変化を表します。</li><li>Circumstanceはより広い状況や条件を指し、一般的な背景や影響を表します。</li><li>自信を持って使い分けるためには、具体的な例文や状況を実際に使って練習しましょう！</li></ul>

SituationとCircumstanceって何が違うの？日常会話で自信を持って使い分けるには？

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コンポーネントの外からアクセスしたい時

購入したのはAmazonでも楽天でも人気を博しているこちらの商品！６つのサイズから選べるそうです。 今回購入したのは一番小さい45cm×2.4mのものです。お試しで購入する方におすすめのサイズです！

二人で貼るのがおすすめです。 端から少しずつ少しずつ剥がしていきます。 ヘラがあると便利です。 私はたまたま近くにあった期限切れのパスポートを使いました（笑） 定規などでもOKです。<figure><img src="https://images.microcms-assets.io/assets/5942e5cf26724e10aa69112cbe6bf983/c0555afb08e94450958e7980c8f7695b/54C6E51B-7EF1-4C96-B89D-097BC55ED5DF_1_102_a.jpeg" alt="" width="2048" height="1536"></figure>

いざ、貼り付け！

我が家で貼ってみた感想とレビューに載せられていた感想をまとめたので、ご自宅の壁と相談しながら参考にしてみてください！

グッドポイントと注意点

こんな方におすすめです！使っている間の見た目のスッキリさが大事 あまり気にせず利用できる賃貸に住んでいる、もしくは持ち家なので剥がすことはほとんどない →おすすめ度100%壁紙を傷つけないこと重視 剥がした後のベタベタを取るのは面倒くさい →おすすめ度50%我が家は貼ってからトラブルは全くなく爪とぎもしなくなったので快適です。 でも筆者は賃貸を転々とする予定なので、剥がす時のことが気になります。 もっと不安なく手軽かつおしゃれな方法も考えてみたいと思います！

大人気の爪とぎ防止シートを賃貸で使ってみた！

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をもっと使いこなせるようになりたい…。

【TypeScript・MappedType】型の再定義

”Out&quot;は、単語ごとに意味が違いますが、一般的には「外に」「超えて」といった意味を持ちます。

”Out"の意味

<h3 id="he0642e80cd">Outweigh</h3>&quot;Outweigh&quot;は、「（重さや重要性などが）上回る」という意味です。ある要素が他の要素よりも重要である場合に使われます。<blockquote>The benefits of regular exercise outweigh the challenges. （定期的な運動のメリットは、課題を上回る。）</blockquote><h3 id="h56feae87a0">Outnumber</h3>&quot;Outnumber&quot;は、「数で勝る」という意味です。あるグループや要素が他のグループよりも多いことを表現します。<blockquote>The students outnumbered the teachers in the classroom. （生徒の数が教師の数を上回った。）</blockquote><h3 id="h9db898d02c">Outshine</h3>&quot;Outshine&quot;は、「（輝きや優越性などで）勝る」という意味です。他のものよりも優れていることを強調します。<blockquote>Her talent and dedication allowed her to outshine her competitors. （彼女の才能と献身によって、競争相手を凌駕した。）</blockquote><h3 id="h78c834cb96">Outgrow</h3>&quot;Outgrow&quot;は、「成長して（服や状況など）に合わなくなる」という意味です。ある段階を超えて適さなくなることを示します。<blockquote>Children quickly outgrow their clothes, requiring frequent replacements. （子供たちは服がすぐに小さくなり、頻繁に交換が必要です。）</blockquote>

代表的な単語

"Out"を含む単語の意味と使い方について解説するガイド記事です。"Out"の接頭辞が付く単語の意味を理解できると、英語表現の幅が広がります！

&quot;Out&quot;を含む単語は、さまざまな意味を持ちながら、共通して「外に」や「超えて」という意味を含んでいます。これらの単語を使いこなすことで、より精緻で表現豊かなコミュニケーションが可能となります。

 【outweigh, outnumber, outshine, outgrow】"Out"を含む単語

&quot;Sustain&quot;の語根&quot;sus&quot;は「支える」や「維持する」という意味を持ち、&quot;Maintain&quot;の語根&quot;main&quot;は「持つ」「保つ」という意味を持ちます。これらの語根から、それぞれの単語の持つニュアンスを想像することができます。

語根”sus”と”main”からイメージできる違い

&quot;Sustain&quot;は一般的に外部要因によって物事を継続・維持する場合に使われます。一方で&quot;Maintain&quot;は個人や内部の努力によって物事を保つ場合に使われます。例えば、経済的な困難によってビジネスが危機的な状況にある場合は&quot;Sustain&quot;、個人の努力によって健康的な生活を保つ場合は&quot;Maintain&quot;と使い分けることができます。<h3 id="h007c59f392">&quot;Sustain&quot;の例文:</h3><blockquote>The company received financial support from investors to sustain its operations during the economic downturn. （会社は経済的な低迷期に投資家からの支援を受け、事業を継続させました。）</blockquote><blockquote>The charity organization needs ongoing donations from the community to sustain its humanitarian projects. （その慈善団体は、地域からの持続的な寄付が必要で、人道的なプロジェクトを維持しています。）</blockquote><h3 id="h4179b49849">&quot;Maintain&quot;の例文:</h3><blockquote>He maintains a healthy lifestyle by exercising regularly and eating nutritious food. （彼は定期的に運動をして栄養価の高い食事を摂ることで健康的な生活を保っています。）</blockquote><blockquote>The team&apos;s strong communication and collaboration skills help maintain a positive work environment. （チームの強いコミュニケーションと協力スキルが、良好な職場環境を保つのに役立っています。）</blockquote>

考え方その１：外から支えるか内部で保つか

&quot;Sustain&quot;は深刻な状況や危機に直面している物事を持続させる際に使われることがあります。一方で&quot;Maintain&quot;は相対的に安定した状況で物事を保つ場合に使われることが多いです。例えば、地球環境を持続可能にするための取り組みを&quot;Sustainable Development Goals&quot;（SDGs）として捉えることができます。<h3 id="h007c59f392">&quot;Sustain&quot;の例文:</h3><blockquote>The emergency aid provided by international organizations sustained the affected communities after the natural disaster. （国際機関による緊急援助が、自然災害の影響を受けたコミュニティを支えました。）</blockquote><blockquote>The small business struggled to sustain itself during the economic crisis, leading to its closure. （経済危機の間、小規模ビジネスは自らの維持が難しく、最終的に閉店しました。）</blockquote><h3 id="h4179b49849">&quot;Maintain&quot;の例文:</h3><blockquote>The well-established safety protocols helped maintain a secure working environment at the factory. （確立された安全プロトコルが工場内の安全な作業環境を維持するのに役立ちました。）</blockquote><blockquote>Despite facing challenges, the team&apos;s strong spirit and dedication helped maintain their winning streak. （困難に直面しながらも、チームの強い気持ちと献身的な姿勢が勝ち続ける要因となりました。）</blockquote>

考え方その２：深刻な状況かそうでないか

 "Sustain"と"Maintain"の違いを理解し、英語学習者にとって役立つ使い分け方法を解説するガイド記事です。

<ul><li>&quot;Sustain&quot;と&quot;Maintain&quot;は似た意味を持つが微妙な違いがある</li><li>&quot;Sustain&quot;は外部要因によって物事を継続させる</li><li>&quot;Maintain&quot;は個人や内部の努力によって物事を保つ</li><li>&quot;Sustain&quot;は深刻な状況や危機に直面した場合に使われることがある</li></ul>

「Sustain」と「Maintain」の違いと使い分けをマスターしよう！英語学習者のための解説ガイド

「Rub Off On」は、もともと物理的な意味を持つ英語のフレーズです。表面同士が接触することで、物体がこすり落とすように影響を与える場合に使われます。

「Rub Off On」とは？

具体的な例として、インクが手についてしまい、その手が紙に触れるとインクが付着する状況が挙げられます。次のように表現できます。<blockquote>The ink from my hand rubbed off on the paper （手についたインクが、紙に付着してしまった）</blockquote>

「Rub Off On」の物理的な使い方

一方で、「Rub Off On」は物理的な意味だけでなく、感情や行動に影響を与える場合にも使われます。例えば、次の例はポジティブな感情が他者に伝わる表現として使われます。<blockquote>Her enthusiasm rubbed off on me. （彼女の熱意が私に影響を与えた。）</blockquote>

「Rub Off On」の意外なニュアンス

「Rub Off On」は他者に影響を与える表現として使われますが、こちらは意図せずに影響を与えるニュアンスを含みます。「意図的に影響を与える・こすり付ける」という場合に適した表現は「Rub In」です。「Rub In」は何かをしっかりとこすり付けたり、押し込んだりすることで、意図的に影響を与えることを意味します。例として、次の文では「Rub In」が意図的に影響を与えることを示し、コーチが選手たちに大切なことをしっかりと印象付けたことを伝えています。<blockquote>Before going to the big game, the coach rubbed in the importance of teamwork and dedication to the players. （大きな試合に備えて、コーチが選手たちにチームワークと献身性の大切さを説いた。）</blockquote>

「Rub Off On」は何かに意図せずに影響を与える

「Rub Off On」という英語の表現に潜む謎を解明！物理的な意味から感情への影響まで、広がりを持つこのフレーズの使い方を詳しく解説します。英語学習者必見の記事で、自然な表現力を向上させましょう！

<ul><li>「Rub Off On」は物理的な意味だけでなく、「〜に影響を与える」という意味もある表現です。</li><li>インクのような物理的な影響から、感情や行動に影響を及ぼす場合まで、様々な場面で使われる表現です。</li><li>「Rub Off On」は、意図せずにある対象に影響を与えることを意味します。</li></ul>

NeeR-Cat
フリーランスエンジニアと猫のブログ

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

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

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

猫の毛取り　ラバーグローブ使ってみた！

SituationとCircumstanceって何が違うの？日常会話で自信を持って使い分けるには？

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

大人気の爪とぎ防止シートを賃貸で使ってみた！

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

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

【TypeScript・MappedType】型の再定義

【outweigh, outnumber, outshine, outgrow】"Out"を含む単語

「Sustain」と「Maintain」の違いと使い分けをマスターしよう！英語学習者のための解説ガイド

【Rub Off On】「こすり落とす」から「〜に影響を与える」に結びつけるには！？

NeeR-Cat.css-mo7whg{margin:0;font-family:'__Reem_Kufi_40688b','__Reem_Kufi_Fallback_40688b';font-weight:400;font-size:1rem;line-height:1.5;font-size:.5em;}フリーランスエンジニアと猫のブログ

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

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

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

猫の毛取り ラバーグローブ使ってみた！

SituationとCircumstanceって何が違うの？日常会話で自信を持って使い分けるには？

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

大人気の爪とぎ防止シートを賃貸で使ってみた！

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

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

【TypeScript・MappedType】型の再定義

【outweigh, outnumber, outshine, outgrow】"Out"を含む単語

「Sustain」と「Maintain」の違いと使い分けをマスターしよう！英語学習者のための解説ガイド

【Rub Off On】「こすり落とす」から「〜に影響を与える」に結びつけるには！？

NeeR-Cat
フリーランスエンジニアと猫のブログ

猫の毛取り　ラバーグローブ使ってみた！