TypeScriptでMaterial-UI練習帳 — Hello, world! —

Reactの基本はなんとなく理解できてきた（気がする）。自分はUIデザインのセンスがク○レベルなので、ちょっとしたサンプルを作る上でも、次はMaterial-UIを使えるようになりたい。React＋TypeScriptの情報ってまだまだ少ないので、一から手探りになってしまうのがつらみ。

create-react-appのコマンドはもう覚えたぞ。

$ npx create-react-app --typescript material-ui-hello

--typescriptはdeprecatedになったから今後は--template typescriptを使えと言われた。覚えておこう。

$ cd material-ui-hello
$ yarn start

とやって、サンプルの画面がブラウザで表示されればOKっと。なんか以前と雰囲気変わった？

Material-UIのインストール。

$ yarn add @material-ui/core

App.tsxを編集して簡単なフォームを作ってみる。テキストを表示するのは<Typography/>を使うらしい。

import React from 'react';
import './App.css';
import { Typography, TextField, Button, CssBaseline, Container } from '@material-ui/core';

const App = () => {
  return (
    <Container maxWidth="sm" >
      <CssBaseline />
      <Typography variant="h5">ようこそ</Typography>
      <form>
        <TextField
          label="名前"
          name="name"
          variant="outlined"
          size="small"
          fullWidth
          margin="normal" />
        <Button
          variant="contained"
          color="primary"
          fullWidth >
          Click!
        </Button>
      </form>
    </Container>
  );
}

export default App;

とりあえずこんな感じ。

次にボタンをクリックしたら、ダイアログを表示するようにしてみたい。公式APIドキュメントの<Dialog/>のサンプルがそのまま参考になりそうなので真似てみよう。公式、TSのコードスニペットも載せてくれてて助かるわー。

import React from 'react';
import './App.css';
import { Typography, TextField, Button, CssBaseline, Container, DialogTitle, Dialog } from '@material-ui/core';

type HelloDialogProps = {
  open: boolean;
  name: string;
  onClose: () => void;
}

function HelloDialog(props: HelloDialogProps) {
  const { open, name, onClose } = props;

  return (
    <Dialog onClose={onClose} open={open}>
      <DialogTitle>ご挨拶</DialogTitle>
      <Typography variant="h5">こんにちわ、{name}さん！</Typography>
    </Dialog>
  );
}


const App = () => {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <Container maxWidth="sm" >
      <CssBaseline />
      <Typography variant="h5">ようこそ</Typography>
      <form>
        <TextField
          label="名前"
          name="name"
          variant="outlined"
          size="small"
          fullWidth
          margin="normal" />
        <Button
          variant="contained"
          color="primary"
          fullWidth
          onClick={handleClickOpen}>
          Click!
        </Button>
        <HelloDialog open={open} name={"TODO"} onClose={handleClose} />
      </form>
    </Container>
  );
}

export default App;

公式のサンプルもフックを使った書き方になってるんだな（24行目のuseState）。新しくコンポーネントを書き始める場合はクラスコンポーネントを使わずに関数コンポーネントでいくのがよさそうだ。

const [open, setOpen] = React.useState(false);

React.useStateを使って、状態変数openと、値をセットする関数setOpenを定義。seStateの引数には初期値を渡すんだな。

以下のようにダイアログを表示できるようになった。

後は、入力した名前の受け渡しを実装する。名前と、ボタンが押せるかどうかを状態に追加すればよさそうだ。

const App = () => {
  const [open, setOpen] = React.useState(false);
  const [name, setName] = React.useState("");
  const [buttonDisabled, setButtonDisabled] = React.useState(true);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setName(value);
    setButtonDisabled(!Boolean(value));
  }

  return (
    <Container maxWidth="sm" >
      <CssBaseline />
      <Typography variant="h5">ようこそ</Typography>
      <form>
        <TextField
          label="名前"
          name="name"
          variant="outlined"
          size="small"
          fullWidth
          margin="normal"
          onChange={handleNameChange} />
        <Button
          variant="contained"
          color="primary"
          fullWidth
          disabled={buttonDisabled}
          onClick={handleClickOpen}>
          Click!
        </Button>
        <HelloDialog open={open} name={name} onClose={handleClose} />
      </form>
    </Container>
  );
}

よし、これで入力した名前をダイアログに表示できるようになった！