React でヒートマップカレンダーを作成する | React チュートリアル

はじめに

このプロジェクトでは、Reactを使ってGitHubのコントリビューショングラフに似たヒートマップカレンダーを作成する方法を学びます。この種のカレンダーは、時間経過に伴う活動データを視覚化する魅力的な方法であり、色の濃淡が特定の日の活動レベルを示します。このプロジェクトが終了するとき、Reactアプリケーションでカレンダーヒートマップを統合して使用する方法を明確に理解するようになります。

👀 プレビュー

必要な依存関係をインストールする

私たちのヒートマップカレンダーの基礎は新しいReactアプリケーションです。

機能：

プロジェクトの依存関係をインストールする。
ヒートマップ用にreact-calendar-heatmapライブラリをインストールする。
日付の操作を簡単にするためにdate-fnsをインストールする。

プロジェクトの依存関係をインストールするには、次のコマンドを使用します。

cd github-heatmap-calendar
npm install

カレンダーヒートマップ機能を追加するには、React固有のライブラリと日付ユーティリティライブラリをインストールする必要があります。（このライブラリは既にプロジェクトに含まれており、インストールする必要はありません。）

npm install react-calendar-heatmap date-fns

ヒートマップコンポーネントのシェルを作成する

まずは、機能を持たないヒートマップコンポーネントの基本構造を作成します。

機能：

ヒートマップコンポーネント用の新しいファイルを作成する。
プレースホルダー付きのコンテンツを持つ関数型コンポーネントを定義する。

コード：

// src/GitHubCalendar.js
import React from "react";

const GitHubCalendar = () => {
  return (
    <div>
      {/* ヒートマップのためのプレースホルダー */}
      <div>Heatmap will go here</div>
    </div>
  );
};

export default GitHubCalendar;

フィルタリング用の状態を追加する

ヒートマップにデータを埋め込む前に、ユーザーの操作に基づいてデータのフィルタリングを管理するための状態を追加しましょう。

機能：

useStateフックをインポートする。
colorFilter状態変数を初期化する。

コード：

// src/GitHubCalendar.js
import React, { useState } from "react";

const GitHubCalendar = () => {
  const [colorFilter, setColorFilter] = useState(null);

  return (
    <div>
      {/* ヒートマップのためのプレースホルダー */}
      <div>Heatmap will go here</div>
    </div>
  );
};

export default GitHubCalendar;

ダミーデータを生成する

活動をシミュレートするためにダミーデータを生成します。本番のアプリケーションではこれを実際のデータに置き換えます。

機能：

date-fnsを使って日付範囲を作成する。
各日にダミーデータで配列を埋める。

コード：

// src/GitHubCalendar.js
import { subYears, isBefore, format } from "date-fns";

// Add inside the GitHubCalendar component
const startDate = subYears(new Date(), 1);
const endDate = new Date();
const values = [];
let currentDate = startDate;

while (isBefore(currentDate, endDate)) {
  values.push({
    date: format(currentDate, "yyyy-MM-dd"),
    count: Math.floor(Math.random() * 5)
  });
  currentDate = new Date(currentDate.setDate(currentDate.getDate() + 1));
}

カレンダーヒートマップをレンダリングする

ここでは、CalendarHeatmapコンポーネントを含め、ダミーデータを渡します。

機能：

データを使ってヒートマップをレンダリングする。
カウントに基づいて色スケールを定義する。

コード：

// src/GitHubCalendar.js
import CalendarHeatmap from "react-calendar-heatmap";
import "react-calendar-heatmap/dist/styles.css";

// Add inside the GitHubCalendar component's return statement
<CalendarHeatmap
  startDate={startDate}
  endDate={endDate}
  values={values}
  classForValue={(value) => {
    if (!value || value.count === 0) {
      return "color-empty";
    }
    return `color-scale-${value.count}`;
  }}
  showWeekdayLabels={true}
/>;

フィルタリングロジックを実装する

クリック時にヒートマップをフィルタリングする、各活動レベル用のボタンを作成します。

機能：

colorFilter状態を設定するボタンを追加する。
選択されたフィルタに基づいてヒートマップデータをフィルタリングする。

コード：

// src/GitHubCalendar.js
// Add below the CalendarHeatmap component in the return statement
<div className="filter-bar">
  {Array.from({ length: 5 }, (_, i) => (
    <button
      key={i}
      className={`filter-btn color-scale-${i}`}
      onClick={() => setColorFilter(colorFilter === i ? null : i)}
    >
      Filter {i}
    </button>
  ))}
</div>

コンポーネントのスタイリング

データを視覚的に伝えるために、ヒートマップとフィルタボタン用のCSSを定義します。

機能：

ヒートマップの色とボタンのスタイリング用のCSSルールを追加する。

コード：

/* src/App.css */
/* Add your CSS rules here */
.color-empty {
  fill: #ebedf0; /* 寄与なし - 白色 */
}
.color-scale-0 {
  fill: #ebedf0; /* 最も薄い緑 - これをあなたの最も薄い緑に変更してください */
}
.color-scale-1 {
  fill: #9be9a8; /* 薄い緑 */
}
.color-scale-2 {
  fill: #40c463; /* 中程度の緑 */
}
.color-scale-3 {
  fill: #30a14e; /* 濃い緑 */
}
.color-scale-4 {
  fill: #216e39; /* 最も濃い緑 */
}

.filter-bar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.filter-btn {
  background: none;
  border: 2px solid transparent;
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition:
    background-color 0.3s,
    border-color 0.3s;
}

/* フィルタボタンに同じ色を適用する */
.filter-btn.color-scale-0 {
  border-color: #ebedf0;
}
.filter-btn.color-scale-1 {
  border-color: #9be9a8;
}
.filter-btn.color-scale-2 {
  border-color: #40c463;
}
.filter-btn.color-scale-3 {
  border-color: #30a14e;
}
.filter-btn.color-scale-4 {
  border-color: #216e39;
}

.filter-btn:hover,
.filter-btn:focus {
  background-color: #ddd;
}

.reset {
  border-color: #000; /* リセットボタンの境界色 */
}

/* アクティブなフィルタを強調表示する */
.filter-btn.active {
  border-color: #666; /* アクティブなボタンの境界色 */
  font-weight: bold;
}

色スケールとボタンスタイルの設定に関するガイダンスについては、以前のCSSの例を参照してください。

アプリケーションを組み立てる

ヒートマップコンポーネントをメインのアプリケーションファイルに統合します。

機能：

GitHubCalendarコンポーネントをApp.jsにインポートする。
アプリケーション内でGitHubCalendarコンポーネントをレンダリングする。

コード：

// src/App.js
import React from "react";
import "./App.css";
import GitHubCalendar from "./GitHubCalendar";

function App() {
  return (
    <div className="App">
      <GitHubCalendar />
    </div>
  );
}

export default App;

アプリケーションを起動する

すべての要素が準備できたので、ヒートマップカレンダーを実際に動かしてみましょう。

機能：

アプリケーションを実行して、ヒートマップカレンダーを表示する。

コマンド：

npm start

これにより、Reactアプリケーションがコンパイルされ、8080番ポートで既定のウェブブラウザで開かれます。

まとめ

おめでとうございます！あなたは今、GitHubのコントリビューショングラフに似たヒートマップカレンダーを含むReactアプリケーションを作成しました。プロジェクトの初期化から始めて、必要なライブラリをインストールし、ヒートマップコンポーネントを作成し、フィルタリング機能を実装し、コンポーネントをスタイリッシュにしました。このプロジェクトは、Reactで複雑なUIコンポーネントを構築する手順を提供しました。これは、さまざまな種類の時系列データやユーザー活動を表示するように調整できます。

React を使った GitHub のヒートマップコントリビューションの作成

はじめに

👀 プレビュー

🎯 タスク

🏆 成果

必要な依存関係をインストールする

ヒートマップコンポーネントのシェルを作成する

フィルタリング用の状態を追加する

ダミーデータを生成する

カレンダーヒートマップをレンダリングする

フィルタリングロジックを実装する

コンポーネントのスタイリング

アプリケーションを組み立てる

アプリケーションを起動する

まとめ