ボタンの作り方【React×MUI】

ここでは、ReactでWEBアプリの画面を作っているときに、ボタンを作ったり、単なる文字をボタンにする場合の方法を紹介していきたいと思います。

この記事でわかること

• 単純なボタンを作る方法
• 文字をクリック可能なボタンにする方法
• 三点リーダなどのメニューボタンを作る方法

一口にボタンと言ってもいろいろな種類があります。よくWebサイトなどで見かける四角や丸型をしたボタン、Webサイトのリンクなどで見る、青字にアンダーバーが入っていてクリックできるようになっている文字のボタン、文字はなくて、記号だけのボタンなど、用途によってデザインが変わってきます。

左から順に、「コンテインドボタン」「テキストボタン」「アイコンボタン」　と呼ぶことにします。

それぞれのボタンを作るためのコードを、順に個別に見ていきましょう。

コンテインドボタン

import React from 'react';
import Button from '@mui/material';

{/*　中略　*/}

<Button variant="contained" color="primary">
　　　ボタン
</Button>

こちらは、ボタンを作る最も一般的な方法で、<Button>タグを使用します。プロパティに色々と設定を記述していますが、極論を言うと、<Button>タグで囲ってあげて、ボタンに表示したい文字を記述すれば、ひとまずボタンを作ることができます。

<Button>
  ボタン
</Button>

するとこのようなボタンが出来上がります。

文字だけが表示されています。

ホバー時（マウスポインタをボタン上に持ってきた状態）にうっすら実体がわかる状態です。もちろんクリックすることはできますが、これだとボタンかどうかが分かりづらいですね。そこで、

<Button variant="contained">
  ボタン
</Button>

このようにvariantプロパティを設定することで

背景色がつき、実体がはっきりわかるようになりました。これだったらボタンだとすぐにわかりそうですね。ちなみに、

<Button variant="outlined">

このように変えることで、

外枠だけのボタンにすることもできます。

MUIでは、variantプロパティは、"text"、"contained"、"outlined"の３つが設定でき、"text"がデフォルトとなっています。そのため、このプロパティを省略すると、最初の画像のような、文字だけのボタンとなってしまいます。場合によっては文字だけのデザインのボタンを使うこともあるかと思いますので、用途に合わせて設定してみてください。

テキストボタン

import React from 'react';
import Typography from '@mui/material';

{/*　中略　*/}

<Typography style={{ cursor: 'pointer', color: 'blue', textDecoration: 'underline' }}>
  ボタン
</Typography>

<Typography>タグは、一般には文字を挿入するために使用されます。なので、先ほどの<Button>タグの時みたいに、

<Typography>
  ボタン
</Typography>

すると、

このようにただの文字となり、クリックしたりすることはできません。そこで先述のようにスタイルを設定してあげることで、

クリックできるようになります。

それぞれのプロパティについて説明します。

cursor: 'pointer'

これはホバー時にポインタを指の形にする指示です。インターネットを閲覧しているときなど、ボタンをクリックしようとした時に指の形になるアレです。これを設定することで

このようにマウスポインタが指の形になるようになります。

color: 'blue'

これはなんとなく想像つくかと思いますが、文字を青に設定しています。もちろん他の色にも設定できます。

textDecoration: 'underline'

これはテキストにアンダーラインを引く設定です。

これらの設定を組み合わせることで、テキストボタンが作成できます。

5月8日追記
ご指摘がありましたので、当該部分を訂正いたします。

アイコンボタン

import React from "react";
import IconButton from '@mui/material';
import MoreVert　from '@mui/icons-material';

{/*　中略　*/}

<IconButton>
  <MoreVert />
</IconButton>

これはMUI のMaterial Iconsを利用します。これはMUIが用意してくれているアイコン群で、２０００以上の種類があります。
https://mui.com/material-ui/material-icons/
それぞれのアイコンには名称があり、例えば三点リーダならMoreVentです。使用する際は使用したいアイコンをインポートして使用します。このようにすることで、簡単にアイコンを挿入することができます。

最後に、ボタンをクリックした際にページ遷移したり、何か処理を実行するための記述も紹介したいと思います。今紹介したボタンは、クリックするとエフェクトもあり、何かが実行されたように見えますが、現状のコードでは何の処理も行われていません。

そこで下記のコードを追加します。一例として、１つ目に紹介したコンテインドボタンで実装してみます。

import React from 'react';

function App() {
  // ページ遷移を行う関数
  function navigateToURL() {
    window.location.href = 'https://mui.com/material-ui/material-icons/?query=More';
  }

  return (
    <button variant="contained"　onClick={navigateToURL}>
      ボタン
    </button>
  );
}

export default App;

ボタンに何か処理をさせる際は、onClickイベントを使用します。上記のように、別で関数を定義してあげて、onClick={}のところに関数名を記述してあげることで、ボタンをクリックしたときにその関数が呼び出されるといったプロセスです。ちなみに上記の関数では、ボタンをクリックすることで、MUIのホームページに遷移するようにできています。

ちなみに、

<button variant="contained"　onClick={() => window.location.href = 'https://mui.com/material-ui/material-icons/?query=More'}>
  ボタン
</button>

このように、onClick={}のところに直接処理内容を記載することもできます。この方法は、特に簡単な操作やコード量を最小限に抑えたい場合に便利です。

以上、さまざまなボタンの作り方でした。