react-burger-menuとReactでサイドバーコンポーネントを構築する方法

序章

サイドバーメニューは、Webページの側面に表示されるナビゲーションの形式です。 これらのメニューは、ページのコンテンツに干渉することなく、Webサイトのさまざまな部分へのアクセスを提供します。

ボタンは、サイドバーメニューの開閉を切り替えるためによく使用されます。 これらのボタンには、メニューを表す3本の横線のアイコンが付いている傾向があります。 このアイコンの形状から、一般に「ハンバーガー」メニューアイコンと呼ばれます。 外側の2本の線が「パン」を形成し、中央の線が「パティ」を形成します。

react-burger-menu は、Reactアプリケーションのサイドバーを作成できるライブラリです。 また、メニューのルックアンドフィールをカスタマイズするための多数のエフェクトとスタイルが付属しています。

このチュートリアルでは、react-burger-menuを使用して、サラダ、ピザ、デザートを提供する概念的なレストランWebサイトのサイドバーを作成します。

前提条件

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

• Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。

このチュートリアルは、ノードv14.7.0、npm v6.14.7、react v16.13.1、およびreact-burger-menuv2.7.1で検証されました。

ステップ1—プロジェクトの設定

create-react-appを使用してReactAppを生成し、依存関係をインストールすることから始めます。

npx create-react-app react-burger-menu-example

新しいプロジェクトディレクトリに移動します。

cd react-burger-menu-example

次に、index.cssを開きます。

nano src/index.css

次のスタイルを追加します。

* {
  box-sizing: border-box;
}

#page-wrap {
  padding-bottom: 10px;
  padding-top: 10px;
}

このコードは、 box-sizingプロパティをborder-boxに設定して、CSSボックスモデルの計算に関する問題に対処します。 このコードは、折りたたまれたマージンを防ぐためにいくつかの垂直パディングも確立します。

変更をindex.cssに保存してから、App.jsを開きます。

nano src/App.js

logo.svgを削除し、Appコンポーネントのコンテンツをサンプルレストランからのメッセージに置き換えます。

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

function App() {
  return (
    <div className="App" id="outer-container">
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

export default App;

outer-containerとpage-wrapは重要なidであり、後でreact-burger-menuによって参照されます。

変更を保存した後、Reactアプリケーションを実行できます。

npm start 

プロジェクトのエラーや問題を修正してから、Webブラウザでlocalhost:3000を開きます。

Cool Restaurant メッセージが正しく表示されたら、サイドバーの作成を開始できます。

ステップ2—サイドバーコンポーネントを追加する

サイドバーにはreact-burger-menuとReactコンポーネントが必要です。

まず、react-burger-menuをインストールします。

npm install react-burger-menu@2.7.1

次に、新しいSidebarコンポーネント用の新しいSidebar.jsファイルを作成します。

nano src/Sidebar.js

次のコードを追加します。

import React from 'react';
import { slide as Menu } from 'react-burger-menu';

export default props => {
  return (
    <Menu>
      <a className="menu-item" href="/">
        Home
      </a>
      <a className="menu-item" href="/salads">
        Salads
      </a>
      <a className="menu-item" href="/pizzas">
        Pizzas
      </a>
      <a className="menu-item" href="/desserts">
        Desserts
      </a>
    </Menu>
  );
};

このコードは、Home、Salads、Pizzas、およびDessertsへのメニューリンクを持つSidebarを生成します。

このチュートリアルでは、これらのアイテムに個別のルートを作成する方法については説明しません。 代わりに、Sidebar自体の機能に焦点を当てます。

react-burger-menuではいくつかのスタイルを指定する必要があるため、Sidebar.cssファイルを作成します。

nano src/Sidebar.css

react-burger-menuドキュメントで提供されているデフォルトのスタイルを追加します。

/* Position and sizing of burger button */
.bm-burger-button {
  position: fixed;
  width: 36px;
  height: 30px;
  left: 36px;
  top: 36px;
}

/* Color/shape of burger icon bars */
.bm-burger-bars {
  background: #373a47;
}

/* Color/shape of burger icon bars on hover*/
.bm-burger-bars-hover {
  background: #a90000;
}

/* Position and sizing of clickable cross button */
.bm-cross-button {
  height: 24px;
  width: 24px;
}

/* Color/shape of close button cross */
.bm-cross {
  background: #bdc3c7;
}

/*
Sidebar wrapper styles
Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
*/
.bm-menu-wrap {
  position: fixed;
  height: 100%;
}

/* General sidebar styles */
.bm-menu {
  background: #373a47;
  padding: 2.5em 1.5em 0;
  font-size: 1.15em;
}

/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
  fill: #373a47;
}

/* Wrapper for item list */
.bm-item-list {
  color: #b8b7ad;
  padding: 0.8em;
}

/* Individual item */
.bm-item {
  display: inline-block;
}

/* Styling of overlay */
.bm-overlay {
  background: rgba(0, 0, 0, 0.3);
}

チュートリアルでは、リンクの色とホバーの色を適用する必要があります。 Sidebar.cssを変更して、次のカスタムスタイルを追加します。

/* Individual item */
.bm-item {
  display: inline-block;

  color: #d1d1d1;
  margin-bottom: 10px;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s;
}

.bm-item:hover {
  color: #ffffff;
}

次に、./Sidebar.cssをSidebar.jsファイルに追加します。

import React from 'react';
import { slide as Menu } from 'react-burger-menu';
import './Sidebar.css';

// ...

最後に、アプリケーションでSidebarを使用するには、App.jsに再度アクセスする必要があります。

nano src/App.js

Sidebarコンポーネントをインポートし、Appコンポーネントに追加します。

import React from 'react';
import Sidebar from './Sidebar';
import './App.css';

function App() {
  return (
    <div className="App" id="outer-container">
      <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} />
      <div id="page-wrap">
        <h1>Cool Restaurant</h1>
        <h2>Check out our offerings in the sidebar!</h2>
      </div>
    </div>
  );
}

export default App;

この時点で、アプリケーションを再度実行できます。

npm start

プロジェクトのエラーや問題を修正します。 そして、Webブラウザでlocalhost:3000にアクセスします。

ここで、「ハンバーガー」メニューアイコンをクリックすると、サイドバーメニューが表示され、Home、Salads、Pizzas、およびDessertsへのリンクが表示されます。

次に、react-burger-menuで利用できる高度なカスタマイズのいくつかを調べることができます。

ステップ3—高度なアニメーションを追加する

現在、サイドバーはslideアニメーションを使用しています。 react-burger-menuには10のアニメーションの可能性があります。

別のアニメーションを試すには、Sidebar.jsを開きます。

nano src/Sidebar.js

そして、slideを別のアニメーションに置き換えます。

// ...
import { bubble as Menu } from 'react-burger-menu';
// ...

このコードにより、メニューがバブル効果で表示されます。

// ...
import { elastic as Menu } from 'react-burger-menu';
// ...

このコードにより、メニューが弾力的な効果で表示されます。

アニメーションの完全なリストは、react-burger-menudocsにあります。

ドキュメントには、アプリケーションに合わせてサイドバーメニューを取得するための高度なカスタマイズも含まれています。

結論

このチュートリアルでは、react-burger-menuを使用してサイドバーメニューを作成しました。 サイドバーメニューは、Webサイトをナビゲートするための一般的なソリューションの1つです。

サイドバーメニューの代替ライブラリが存在し、アプリケーションにより適したライブラリが見つかる場合があります。

Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。