【React】useMediaで簡単にレスポンシブ対応

2021-01-17

はじめに

おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です!!

今回はReactアプリケーションで簡単にレスポンシブ対応が実装できるuse-mediaというReact Hooksの便利なライブラリを紹介します!!

  • 前提
  • use-mediaのインストール
  • use-mediaの使用方法
  • react-responsiveとの比較
  • react-responsiveのインストール
  • react-responsiveで同じ仕様を書く
  • ソースとデモ
  • まとめ

概要

CSSメディアクエリの状態を追跡するReactのフックです。

以下公式のREADME.mdにフックの使用方法とテスト方法が説明されていますので詳細はこちらを見てください。

use-mediaのインストール

お好きなほうでインストールしてください。

npm install --save use-media
or
yarn add use-media

use-mediaの使用方法

useMediaをインポートして、useMedia関数に閾値をオブジェクトで渡してあげれば、閾値を超えているかどうかの真偽値を取得できます。

以下の例だと、widthが1000pxを超えたら😃で、超えてなかったら😢が表示されます。

import useMedia from 'use-media';

const App = () => {
  const isWide = useMedia({minWidth: '1000px'});
  return (
    <div>
      Screen is wide: {isWide ? '😃' : '😢'}
    </div>
  );
};

react-responsiveとの比較

Reactアプリケーションでレスポンシブ対応させる時に、react-responsiveというパッケージを使っている人もいると思いますので、比較のために同じ仕様のコードを書いてみたいと思います。

react-responsiveのインストール

お好きなほうでインストールしてください。

npm install --save react-responsive
or
yarn add react-responsive

react-responsiveで同じ仕様を書く

react-responsiveを使って同じ仕様を書くと以下のようになります。

import MediaQuery from "react-responsive";

const App = () => {
  return (
    <>
      <MediaQuery query="(max-width: 999px)">
        <div>Screen is wide2: 😢</div>
      </MediaQuery>
      <MediaQuery query="(min-width: 1000px)">
        <div>Screen is wide2: 😃</div>
      </MediaQuery>
    </>
  );
};

好みであるかもしれませんが、use-mediaを用いた書き方のほうが短く書けますし、真偽値を用いて表示を切り替えるのでReactらしい書き方だと思います。

ソースとデモ

以下のCodesandboxでソースとデモを確認できます。

まとめ

今回はReactアプリケーションで簡単にレスポンシブ対応が実装できるuse-mediaというReact Hooksの便利なライブラリを紹介しました!!

react-responsiveを使うより短くかけたりするので、今後はこちらを使用していきたいと思いますので、皆さんも是非試してみてください。

今後も便利なReactのライブラリなどを紹介していきたいと思います!!
よろしければまた見てください!!!



最後まで見ていただきありがとうございます!!


Written by のふのふ

東京で働く名古屋生まれの麻雀と芝生と娘と妻を愛するアラフォーエンジニアです。 フロントエンドよりのweb開発技術(React,TypeScriptなど)を中心に扱っています。 web開発やデータサイエンス周りの技術に興味があります。 個人開発でwebアプリをリリースすることを目標にしています。

©2020 のふのふ All Rights Reserved.