React.jsとMaterial-UIでレスポンシブデザインを実現する方法

2024-06-19

React.jsとMaterial-UIにおけるメディアクエリ：コンポーネントでレスポンシブデザインを実現する方法

メディアクエリは、CSSにおける@mediaルールを用いて、特定の条件下でのみスタイルを適用する仕組みです。具体的には、ブラウザのウィンドウ幅、デバイスの種類、解像度などを条件として設定することができます。

例えば、スマートフォン向けのスタイルを定義したい場合は、メディアクエリを使って画面幅が一定以下になった場合のみスタイルを適用することができます。

Material-UIでは、メディアクエリを簡単に実装するための以下の2つの方法を提供しています。

useMediaQueryフックは、メディアクエリの条件が真偽値として返されるReactフックです。このフックを活用することで、条件に応じてコンポーネントの表示・非表示を切り替えたり、スタイルを動的に変更したりすることができます。

import React from 'react';
import { useMediaQuery } from '@mui/material';

const MyComponent = () => {
  const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down('sm'));

  return (
    <div>
      {isSmallScreen ? (
        <SmallScreenComponent />
      ) : (
        <LargeScreenComponent />
      )}
    </div>
  );
};

上記の例では、useMediaQueryフックを使用して、画面幅がsmブレイクポイントよりも小さいかどうかを判定しています。判定結果に応じて、SmallScreenComponentとLargeScreenComponentを使い分けています。

ブレークポイントユーティリティ

Material-UIは、あらかじめ定義されたブレイクポイントに基づいてメディアクエリを生成するユーティリティを提供しています。これらのユーティリティを使用することで、コードをより簡潔に記述することができます。

import React from 'react';
import { makeStyles } from '@mui/material';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: '50%',
    },
  },
}));

const MyComponent = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {/* コンテンツ */}
    </div>
  );
};

上記の例では、makeStylesフックを使用して、smブレイクポイント以上の場合のみ要素の幅を50%に設定するスタイルを定義しています。

上記以外にも、Material-UIではCSS Modulesやstyled-componentsなどと組み合わせてメディアクエリを使用することができます。詳細は、Material-UIの公式ドキュメントを参照してください。

Material-UIは、メディアクエリを容易に実装するための様々な機能を提供しています。これらの機能を活用することで、ブラウザのウィンドウ幅に応じて柔軟にレイアウトを変化させるレスポンシブなWebサイトを構築することができます。

サンプルコード：Material-UIでメディアクエリを使用する

グリッドレイアウトのレスポンシブ化

import React from 'react';
import { Grid, Container } from '@mui/material';

const MyComponent = () => {
  return (
    <Container maxWidth="lg">
      <Grid container spacing={2}>
        <Grid item xs={12} md={6}>
          <div>Item 1</div>
        </Grid>
        <Grid item xs={12} md={6}>
          <div>Item 2</div>
        </Grid>
        <Grid item xs={12} md={4}>
          <div>Item 3</div>
        </Grid>
        <Grid item xs={12} md={8}>
          <div>Item 4</div>
        </Grid>
      </Grid>
    </Container>
  );
};

このコードでは、以下のレイアウトを実現します。

ブラウザ幅が小さい場合（xs）: 4つのアイテムがそれぞれ1段ずつ表示されます。
ブラウザ幅が中程度の場合（md）:
- Item 1とItem 2が2段に並べて表示されます。
ブラウザ幅が大きい場合（lg）:
- 上記のレイアウトが維持されます。

ボタンのスタイル変更

本例では、useMediaQueryフックを使用して、ブラウザ幅に応じてボタンのスタイルを変更するサンプルコードを紹介します。

import React from 'react';
import { Button, useMediaQuery } from '@mui/material';

const MyComponent = () => {
  const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down('sm'));

  const styles = {
    button: {
      fontSize: 16,
      padding: '10px 20px',
      [theme.breakpoints.down('sm')]: {
        fontSize: 14,
        padding: '5px 10px',
      },
    },
  };

  return (
    <Button variant="contained" style={styles.button}>
      ボタン
    </Button>
  );
};

ブラウザ幅が小さい場合（sm以下）:
ブラウザ幅が大きい場合（sm超）:
- デフォルトのスタイルが適用されます。

コンポーネントの表示・非表示

import React from 'react';
import { useMediaQuery, Hidden } from '@mui/material';

const MyComponent = () => {
  const isSmallScreen = useMediaQuery((theme) => theme.breakpoints.down('sm'));

  return (
    <div>
      {!isSmallScreen && <LargeScreenComponent />}
      <Hidden smDown>
        <SmallScreenComponent />
      </Hidden>
    </div>
  );
};

ブラウザ幅が小さい場合（sm以下）:

これらのサンプルコードはあくまでも一例であり、状況に応じて様々な使い方が可能です。ぜひ、Material-UIのメディアクエリ機能を活用して、レスポンシブなWebサイトを構築してみてください。

上記のサンプルコードは、React 17とMaterial-UI v5.xをベースにしています。
コードの動作は、ブラウザの設定や環境によって異なる場合があります。
詳細については、Material-UIの公式ドキュメントを参照してください。

Material-UIでメディアクエリを実装するその他の方法

CSS Modulesは、コンポーネントごとにCSSを分離して管理する仕組みです。メディアクエリをCSS Modulesと組み合わせることで、コンポーネントごとに柔軟にスタイルを定義することができます。

import React from 'react';
import styles from './MyComponent.module.css';

const MyComponent = () => {
  return (
    <div className={styles.root}>
      {/* コンテンツ */}
    </div>
  );
};

.MyComponent.module.css {
  .root {
    width: 100%;
    @media (min-width: 600px) {
      width: 50%;
    }
  }
}

上記の例では、MyComponent.module.cssというCSSファイルでメディアクエリを定義し、MyComponentコンポーネント内でstyles.rootクラスを使用して適用しています。

styled-componentsは、コンポーネントをテンプレートリテラルを用いて定義し、スタイルを直接記述するライブラリです。メディアクエリをstyled-componentsと組み合わせることで、コンポーネントのスタイルをより直感的に記述することができます。

import React from 'react';
import styled from '@emotion/styled';

const MyComponent = styled.div`
  width: 100%;
  @media (min-width: 600px) {
    width: 50%;
  }
`;

const MyComponent = () => {
  return (
    <MyComponent>
      {/* コンテンツ */}
    </MyComponent>
  );
};