【React】MaterialUIのGrid2を使ってみる。

# 前提
この記事は、React、TypeScript勉強中の私が、Gridを使って履歴書入力フォームのUIを作成した時のことをまとめたものです。

認知にずれなどありましたらコメントで指摘していただけると幸いです。

https://mui.com/material-ui/react-grid2/

# 開発環境
- next 15.0.3
- raect 18.3.1
- mui 6.1.8

# 旧Gridとの違い
- importの方法
- サイズプロパティの指定方法(CSS変数の採用)
- オフセットが使える
# 旧Gridについて
まずは日本語の記事を参考にして、旧Grid(Grid1)を使ったところ斜線が引かれ、**非推奨**との表示が出ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929797/d4cb8d85-c3e1-2fbe-09d7-1d8452672f35.png)

https://qiita.com/E_MM/items/6c845db32f05cfa57f4a

↓　公式ドキュメントでも**非推奨**とされています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929797/015f1828-ca48-585d-9926-b28d135bf5a7.png)

↓　ちなみに**ChatGPTは旧Gridでコードを出力してきます**。(Grid2のコードを投げると旧Gridに修正されます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929797/305a0eec-1bd4-0fb5-f80e-c3d60845a40a.png)

# インストール
materialUIがインストールされていればそのまま使えます。
```
npm install @mui/material @emotion/react @emotion/styled
```
# import
importは次のように行います。
```typescript
import  Grid  from "@mui/material/Grid2";
```

公式ドキュメントでは次のようになっていますが、エラーになります
```typescript
//Error:モジュール '@mui/material/Unstable_Grid2' またはそれに対応する型宣言が見つかりません。
import Grid from '@mui/material/Unstable_Grid2';
```
また、ほかのMUIコンポーネントと一緒にimportすると旧Gridとして扱われます。
```typescript
import {Box,Grid} from '@mui/material'
```
# 使い方
`Grid Container`の中に`Grid`を入れます。`spacing`で`Grid`間のスペースを調整できます。

画面を**縦に12分割し各`Grid`が何割占めるのか**を`size`プロパティで設定します。`md`,`xs`プロパティを使い、**画面サイズ**に応じてこれを変更できます。

ちなみに、旧Gridではこのサイズを`<Grid item xs={6}>`のようにしていました。

```tsx
<Grid container spacing={2}>                            
    <Grid size={{xs:8,md:8}}>
        <div></div>
    </Grid>
</Grid>    
```
公式ドキュメントから、色んなパターンをレスポンシブにいじれるので試してみてください。
https://mui.com/material-ui/react-grid2/

# 出来たもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929797/586bcb01-a9bf-78a9-ab94-f991b65dc0b7.png)

# コード(UIのみ)
```tsx
<Container maxWidth="md" sx={{ mt: 3, mb: 3 }}>
<Stack spacing={2}>
    <Grid container spacing={2}>
        <Grid size={{ xs: 8, md: 8 }}>
            <Stack spacing={2}>
                <TextField id="氏名" label="氏名" variant="filled" />
                <TextField fullWidth size="medium" id="生年月日" label="生年月日" variant="filled" type="date" slotProps={{ inputLabel: { shrink: true } }} />
                <Grid container spacing={2}>
                    <Grid size={{ xs: 6, md: 6 }}>
                        <TextField fullWidth size="medium" id="年齢" label="年齢" variant="filled" type="number" />
                    </Grid>
                    <Grid size={{ xs: 6, md: 6 }}>
                        <TextField select fullWidth size="medium" id="性別" label="性別" variant="filled">
                            <MenuItem value={1}>男性</MenuItem>
                            <MenuItem value={2}>女性</MenuItem>
                            <MenuItem value={3}>その他</MenuItem>
                        </TextField>
                    </Grid>
                </Grid>
                <TextField fullWidth size="medium" id="最終学歴" label="最終学歴" variant="filled" />
            </Stack>
        </Grid>
        <Grid size={{ xs: 4, md: 4 }}>
            <Card sx={{ bgcolor: "#555555", width: "100%", aspectRatio: "1 / 1" }} />
        </Grid>
    </Grid>
    <TextField fullWidth multiline maxRows={4} size="medium" id="プログラミングの経験・使用言語" label="プログラミングの経験・使用言語" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="自己PR" label="自己PR" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="研究成果" label="研究成果" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="資格" label="資格" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="学生時代頑張ったこと" label="学生時代頑張ったこと" variant="filled" />
    <TextField fullWidth multiline maxRows={4} size="medium" id="志望理由" label="志望理由" variant="filled" />
</Stack>
</Container>
```
# まとめ
以上になります。公式ドキュメントの大切さを身にしみて感じました。

間違っている部分があれば、コメントで指摘していただけると幸いです！😸