ちょっと、そこ！ React アプリケーション用の素晴らしいナビゲーション バー (navbar) を構築する準備はできていますか?このガイドでは、設計上の考慮事項から実装およびアクセシビリティのベスト プラクティスに至るまで、すべてを説明します。飛び込んでみましょう！

Navbar が重要な理由

ナビゲーションバーは、あらゆる Web アプリケーションの重要な要素です。これにより、ユーザーはサイトのさまざまなページやセクション間を移動できるようになります。適切に設計されたナビゲーションバーがないと、ユーザーは簡単に道に迷ったりイライラしたりする可能性があるため、ナビゲーションバーに必要なリンクとアクセシビリティ機能がすべて備わっていることを確認することが重要です。

重要なポイント

1. 重要な要素: ナビゲーションバーは、ユーザーがウェブサイトをナビゲートするのに不可欠です。
2. 再利用可能なコンポーネント: React は再利用可能なモジュール式コンポーネントの作成に最適で、ナビゲーションバーの構築に最適です。
3. アクセシビリティの問題: ナビゲーションバーがアクセシビリティ対応であることを保証するということは、障害を持つユーザーを含むすべてのユーザーが効果的にサイトを移動できることを意味します。

ナビバーとは何ですか?

ナビゲーションバーは、通常、Web ページの上部または側面に配置されるユーザー インターフェイス要素です。これはナビゲーション補助として機能し、ユーザーが Web サイト内のさまざまなセクションやページにアクセスできるようにするリンクやボタンを提供します。適切にデザインされたナビゲーションバーは、ユーザーがサイトの構造を理解し、サイトの各部分間を簡単に移動できるようにします。

適切に設計された Navbar の例

• Airbnb: 「宿泊場所」、「体験」、「オンライン体験」などのセクションへの明確なリンクを備えたクリーンでミニマルなデザイン。
• Dropbox: シンプルでありながら効果的で、さまざまなサービスを探索できる目立つ「製品」ドロップダウン メニューが特徴です。

React で Navbar を構築する

「ShopNow」という電子商取引 Web サイトのナビゲーションバーを作成しましょう。

ステップ 1: ナビゲーションバーのデザイン

コーディングを始める前に、デザインを計画しましょう。 ShopNow の場合は次のようになります:

• 左側のロゴ
• 「製品」、「会社概要」、「お問い合わせ」などのセクションへのリンク
• 商品数を示すバッジが付いたショッピング カート アイコン
• 「サインイン」や「マイアカウント」などのアカウントアクションのユーザーアイコン

これがどのように見えるかのモックアップです:

• ロゴ: 左側に「ShopNow」
• リンク: 中央にある「製品」、「会社概要」、「お問い合わせ」
• アイコン: 右側のショッピングカートとユーザーのアイコン

ステップ 2: React プロジェクトのセットアップ

まず、Create React App を使用して新しい React プロジェクトをセットアップします:

npx create-react-app shopnow
cd shopnow
npm start

ステップ 3: Navbar コンポーネントの作成

src ディレクトリに Navbar.js という新しいファイルを作成し、次のコードを追加します。

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

const Navbar = () => {
  return (
    
  );
};

export default Navbar;

次に、同じディレクトリに Navbar.css ファイルを作成して、ナビゲーションバーのスタイルを設定します。

ステップ 4: Navbar 構造の追加

Navbar コンポーネント内に Navbar の構造を追加します:

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

const Navbar = () => {
  return (
    
  );
};

export default Navbar;

このコードは、ナビゲーションバーを 3 つのセクションに分割します。左側はロゴ、中央はナビゲーション リンク、右側はアイコンです。

ステップ 5: Navbar のスタイルを設定する

Navbar.css を開いて次のスタイルを追加します:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.navbar-left .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.navbar-center .nav-links {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.navbar-center .nav-links li {
  margin-right: 1rem;
}

.navbar-center .nav-links a {
  color: #fff;
  text-decoration: none;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-right .cart-icon,
.navbar-right .user-icon {
  color: #fff;
  text-decoration: none;
  margin-left: 1rem;
  position: relative;
}

.navbar-right .cart-count {
  background-color: #f44336;
  color: #fff;
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

ステップ 6: Navbar のインポートとレンダリング

最後に、Navbar コンポーネントをインポートし、App.js ファイルにレンダリングします。

import React from 'react';
import Navbar from './Navbar';

function App() {
  return (
    

      
      {/* Rest of your app content goes here */}
    
  );
}

export default App;

これで、React アプリを実行すると、ページの上部にナビゲーションバーが表示されるはずです。

ステップ 7: アクセシビリティの強化

アクセシビリティは、すべてのユーザーがサイトを確実に移動できるようにするために非常に重要です。以下にいくつかのベスト プラクティスを示します:

1. セマンティック HTML を使用する: