CSS を使用せずに React でメディア クエリを設定する

1. React でのメディア クエリ
2. CSS を使用せずに React でメディア クエリを設定するクラス コンポーネントを作成する
3. CSS を使用せずに React でメディア クエリを設定する機能コンポーネントを作成する

2022 年にインターネットを閲覧するユーザーは、20 年前、さらには 10 年前よりもはるかに予測しにくくなっています。 現在、ほとんどの人はスマートフォンでインターネットを閲覧しており、以前よりもはるかに優れたユーザー エクスペリエンスを期待しています。

顧客にも選択肢が殺到しているため、企業は顧客の注意を引くために可能な限り最高の Web サイトを設計するために一生懸命努力する必要があります。

React でのメディア クエリ

ユーザーはさまざまな画面サイズのデバイスから Web サイトにアクセスするため、Web 開発者はそれに応じて Web サイトのデザインを調整する方法を見つける必要があります。 メディア クエリの使用は、アプリケーションの応答性を確保するための主要な方法です。

React は、高速なシングルページ アプリケーションを構築するための最も一般的な JavaScript ベースのライブラリです。 DOM を使用し、HTML、CSS、および JavaScript を使用してアプリケーションを構築したことがある場合は、React での作業に移行するのに苦労することはありません。

React は、HTML に似たテンプレート言語である JSX を使用します。 多くの点で HTML のように機能しますが、大きな違いがあります。 たとえば、インライン スタイルの設定は、JSX では動作が異なります。

ご存知かもしれませんが、メディア クエリは CSS で比較的簡単に実装できます。 ただし、何らかの理由で、CSS を使用せずにメディア クエリを実装したい場合は、React でプレーンな JavaScript を使用して実現できます。

CSS を使用せずに React でメディア クエリを設定するクラス コンポーネントを作成する

クラス コンポーネントは、長い間 React で 状態 機能を持つ主要な方法でした。 state は React コンポーネントをユーザーのアクションに応答させる必要があります。

苦労せずに、React クラス コンポーネントでメディア クエリを設定する方法を見てみましょう。

例：

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenSizeFits: window.matchMedia("(min-width: 768px)").matches
        };
    }

    componentDidMount() {
        const adjustScreenSize = (e) =>
            this.setState({ screenSizeFits: e.matches });
        window
            .matchMedia("(min-width: 768px)")
            .addEventListener("change", adjustScreenSize);
    }
    render() {
        return (
            <div>
                {this.state.screenSizeFits && <h1>Laptop</h1>}
                {!this.state.screenSizeFits && <h3>Smartphone or Tablet</h3>}
            </div>
        );
    }
}

export default App;

screenSizeFits と呼ばれる 1つの state プロパティを持つ App コンポーネントがあります。 window.matchMedia() メソッドを使用して取得するブール値に初期化されます。

componentDidMount() ライフサイクル メソッドを使用して、イベント リスナーを追加し、状態を更新します。 window オブジェクトにイベント リスナーを追加して、画面の解像度が変わるたびに state 変数をそれに応じて更新します。

画面解像度が 768 ピクセルより大きい場合、screenSizeFits プロパティは true に設定されます。 小さい場合、プロパティは false に設定されます。

最後に、単純な && 論理コネクタを使用して、state プロパティ値に基づいて関連テキストを表示します。

この ライブ デモ をチェックして、その仕組みを確認できます。 画面サイズを大きくしたり小さくしたりして、それに応じてテキストがどのように変化するかを確認してください。

画面の解像度を変更するたびに、コンポーネントはイベント リスナーを採用し、それに応じて state を更新します。

CSS を使用せずに React でメディア クエリを設定する機能コンポーネントを作成する

React v16.8 以降、フックを使用してインタラクティブな機能を機能コンポーネントに追加できます。 React コミュニティは、開発者が機能コンポーネントでメディア クエリを簡単に管理できるように、react-media-hook ライブラリを考案しました。

次のコマンドを入力して、パッケージをインストールできます。

npm i react-media-hook --save

次に、useMediaPredicate フックをアプリケーションに直接インポートし、ユーザーのデバイスの画面サイズに基づいて条件付きでアプリケーションのスタイル設定を開始できます。

例：

import React from "react";
import { useMediaPredicate } from "react-media-hook";

const App = () => {
    const moreThan720 = useMediaPredicate("(min-width: 720px)");

    return <div style={{border: moreThan720 ? "2px solid red" : ""}}>
        <button>SomeButton</button>
    </div>
};

この例では、変数 moreThan720 は、useMediaPredicate フックに渡す引数が true であるかどうかに応じて、ブール値を格納します。

次に、三項演算子を使用してインライン スタイルを条件付きで設定します。 ウィンドウの幅が 720px を超える場合は、border プロパティを次の値に設定します: 2px solid red; そうでなければ、国境はありません。