Reactで簡単に実装できるハンバーガーメニューの作り方

Reactを使って、ハンバーガーメニューを簡単に実装する方法を紹介します。ハンバーガーメニューは、スマートフォンやタブレットなどの小さな画面でメニューを表示するためのアイコンです。CSSを使って簡単に実装できますが、Reactを使えば、コンポーネントを使って再利用性の高いコードを書くことができます。

必要なもの

このチュートリアルを完了するには、以下が必要です。

• React
• CSS

ステップ1：Reactコンポーネントを作成する

まず、Reactコンポーネントを作成します。以下のようなコードを書きます。

import React from 'react';
import './HamburgerMenu.css';

function HamburgerMenu(props) {
  return (
    <div className="hamburger-menu">
      <div className="line"></div>
      <div className="line"></div>
      <div className="line"></div>
    </div>
  );
}

export default HamburgerMenu;

このコードでは、HamburgerMenuコンポーネントが作成されます。propsパラメータは使用していませんが、将来的に使用する可能性があるため、引数として受け取っています。

ステップ2：CSSを追加する

次に、CSSを追加します。以下のようなコードを書きます。

.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 20px;
  cursor: pointer;
}

.line {
  width: 25px;
  height: 3px;
  background-color: black;
  border-radius: 5px;
}

このコードでは、hamburger-menuクラスとlineクラスが作成されます。hamburger-menuクラスは、フレックスコンテナーとして機能し、3つのlineクラスを垂直方向に表示します。

ステップ3：ハンバーガーメニューをトグルする

最後に、ハンバーガーメニューをトグルする方法を追加します。以下のようなコードを書きます。

import React, { useState } from 'react';
import './HamburgerMenu.css';

function HamburgerMenu(props) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  function handleClick() {
    setIsMenuOpen(!isMenuOpen);
  }

  return (
    <div className="hamburger-menu" onClick={handleClick}>
      <div className={`line ${isMenuOpen
        ? 'open'
        : ''}`}></div>
      <div className={`line ${isMenuOpen ? 'open' : ''}`}></div>
      <div className={`line ${isMenuOpen ? 'open' : ''}`}></div>
    </div>
  );
}

export default HamburgerMenu;

このコードでは、useStateフックを使用して、isMenuOpenステートを作成します。これは、メニューが開いているか閉じているかを示すために使用されます。

handleClick関数は、ハンバーガーメニューがクリックされたときに呼び出されます。この関数では、isMenuOpenステートを反転させます。

最後に、lineクラスのopenクラスを条件に基づいて追加することで、メニューが開いたときにアニメーションを表示するようにします。

まとめ

以上で、Reactを使ってハンバーガーメニューを簡単に実装する方法を紹介しました。コンポーネントとCSSを組み合わせることで、再利用性の高いコードを書くことができます。また、useStateフックを使用して、状態を管理することもできます。

この方法は、React初心者でも理解しやすいものであり、スマートフォンやタブレットなどの小さな画面でメニューを表示する際に非常に便利です。ぜひ、実際に試してみてください。