はじめに
このプロジェクトでは、Reactを使ってGitHubのコントリビューショングラフに似たヒートマップカレンダーを作成する方法を学びます。この種のカレンダーは、時間経過に伴う活動データを視覚化する魅力的な方法であり、色の濃淡が特定の日の活動レベルを示します。このプロジェクトが終了するとき、Reactアプリケーションでカレンダーヒートマップを統合して使用する方法を明確に理解するようになります。
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
このプロジェクトでは、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を定義します。
機能:
コード:
/* 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コンポーネントを構築する手順を提供しました。これは、さまざまな種類の時系列データやユーザー活動を表示するように調整できます。