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

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• ヒートマップカレンダーに必要な依存関係をインストールする方法。
• ヒートマップコンポーネントの基本構造を作成する方法。
• データをフィルタリングするための状態を追加する方法。
• ヒートマップにデータを埋め込むためのダミーデータを生成する方法。
• ダミーデータを使ってカレンダーヒートマップをレンダリングする方法。
• 活動レベルに基づいてヒートマップをフィルタリングするためのフィルタリングロジックを実装する方法。
• ヒートマップコンポーネントとフィルタボタンをスタイリッシュにする方法。
• ヒートマップコンポーネントをメインアプリケーションファイルに統合する方法。
• アプリケーションを起動してヒートマップカレンダーを表示する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• React アプリケーションにカレンダーヒートマップを統合する。
• React コンポーネントで状態を管理し、データをフィルタリングする。
• React と CSS を使ってカレンダーヒートマップをレンダリングしてスタイリッシュにする。
• 視覚化のためのダミーデータを生成して埋め込むプロセスを理解する。
• ヒートマップカレンダーアプリケーションを起動して表示する。

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

私たちのヒートマップカレンダーの基礎は新しい 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 コンポーネントを構築する手順を提供しました。これは、さまざまな種類の時系列データやユーザー活動を表示するように調整できます。