お疲れ様です！！ 非エンジニアのバックオフィスが頑張るシリーズです。
今回は GitHub Issues をデータベース代わりにしたタスク管理Webアプリ を作りました。サーバーレス・無料・スマホで使えるのがポイントです。taskをGithubで管理するので tasgy と名付けました！
背景：なぜ作ったのか
バックオフィスの仕事って、細かいタスクが大量に発生するんですよね。Notion や Google TODOリスト も使ったんですが、なかなか続かないんですよ。ADHDの気があるからだと思うのですが、ちょっといいなと思っても、ずっと長く続けることができない。
ところが最近Claude Code を秘書的に使ってタスク管理始めたところ、タスクに上げ下げするのはClaudeがやってくれるので、続くようになったんですよ。で、ローカルにタスクのmd作って置いておいてもいいのですが、Notionみたいにどんな環境でも見れるようにしておきたいため、Github の Issues を利用してみることにしました。
- タスクの 経緯やメモ を時系列で残したい → Issue のコメントが最適
- ラベルで分類 して優先度を一目で把握したい → Issue ラベルがそのまま使える
でもスマホの Github アプリは Issue の管理に特化してるわけではないので、ちょい使いにくい。
できれば 無料 で、スマホからサクッと確認したい
…ということで、GitHub Issues をそのままバックエンドにしたWebアプリを作ってしまえばいいのでは？と思い立ちました。
完成したもの
tasgy — GitHub Issues ベースのスマホ向けタスク管理アプリ
リポジトリ: https://github.com/ishiinorifumi-ws/tasgy-app
┌──────────────────────────┐
│ 📋 マイタスク [＋] │
├──────────────────────────┤
│ 🔴緊急│🟡今週│🔵次週│👀待ち│ ← 優先度タブ
├──────────────────────────┤
│ カテゴリ: [全て ▼] │
│ ソート: [作成日順 ▼] │
├──────────────────────────┤
│ ┌────────────────────┐ │
│ │ #38 タスクタイトル │ │
│ │ 🏢 カテゴリ 📅 4/30 │ │ ← タップでプレビュー展開
│ │ 最新コメント表示... │ │ ← さらにタップで全詳細
│ └────────────────────┘ │
└──────────────────────────┘
システム構成
[ブラウザ] ←→ [GitHub REST API] ←→ [GitHub Issues]
↑
└── GitHub Pages でホスティング（静的サイト）
サーバーは一切なし。すべてクライアントサイドで完結しています。
| 要素 | 選択 | 理由 |
|---|---|---|
| フレームワーク | React 19 + Vite | 軽量・高速ビルド |
| スタイル | Tailwind CSS v4 | モバイルファーストで素早く構築 |
| Markdown | react-markdown + remark-gfm | Issue 本文・コメントの GFM 描画 |
| API通信 | fetch（ネイティブ） | 追加ライブラリ不要 |
| 認証 | GitHub Personal Access Token | localStorage に保存、初回に入力 |
| ホスティング | GitHub Pages | 無料、Vite の静的ビルドをデプロイ |
費用
完全無料です。
| リソース | 無料枠 | 実際の使用量 |
|---|---|---|
| GitHub API（認証済み） | 5,000リクエスト/時 | タスク20件で数十リクエスト/回 |
| GitHub Pages | 無制限 | 静的サイト1つ |
| GitHub Issues | 無制限 | パブリックリポジトリ |
機能一覧
| 機能 | 説明 | GitHub API |
|---|---|---|
| タブ切り替え | 🔴緊急 / 🟡今週 / 🔵次週 / 👀確認待ち | ラベルでフィルタリング |
| カテゴリフィルター | ドロップダウンで絞り込み | クライアント側フィルター |
| ソート | 期限順・作成日順 | クライアント側ソート |
| タスク詳細 | 2段階展開（プレビュー→全詳細） | GET .../comments |
| メモ追記 | コメントとして追加 | POST .../comments |
| 優先度変更 | ラベル付け替え | PUT .../labels |
| タスク完了 | Issue を Close |
PATCH ... (state: closed) |
| 新規作成 | タイトル・詳細・優先度・期限 | POST .../issues |
| 期限アラート | 3日以内 ⚠️ / 超過 🔥 | Issue 本文からパース |
ラベル設計がキモ
このアプリの肝は GitHub Issues のラベル設計 です。ラベルがそのままアプリの UI に対応しています。
優先度ラベル → タブ
| ラベル名 | 色 | アプリ上のタブ |
|---|---|---|
🔴 緊急 |
#d73a4a |
緊急タブ |
🟡 今週 |
#fbca04 |
今週タブ |
🔵 次週以降 |
#0075ca |
次週タブ |
👀 確認待ち |
#f9d0c4 |
確認待ちタブ |
優先度ラベルなしの Issue は自動的に「🟡 今週」タブに振り分けられます。
カテゴリラベル → フィルター
カテゴリラベルは自由にカスタマイズできます。src/utils/labels.js を編集するだけ：
export const CATEGORY_LABELS = [
{ name: '📧 メール', color: '#0e8a16' },
{ name: '📝 ドキュメント', color: '#d876e3' },
{ name: '💻 開発', color: '#006b75' },
]
GitHub CLI でラベルを一括作成できます：
REPO="your-username/your-repo"
gh label create "🔴 緊急" --color "d73a4a" --description "今日〜3日以内に対応必須" --repo $REPO
gh label create "🟡 今週" --color "fbca04" --description "今週中に着手すべき" --repo $REPO
gh label create "🔵 次週以降" --color "0075ca" --description "追跡が必要だが緊急でない" --repo $REPO
gh label create "👀 確認待ち" --color "f9d0c4" --description "相手のアクション待ち" --repo $REPO
2段階展開の UI
スマホで使うとき、全詳細をいきなり展開すると画面を占有しすぎます。そこで 2段階展開 にしました。
- タップ1回目（プレビュー） — 最新コメント1件だけ表示
- 「詳細を表示」タップ — 本文・全コメント・優先度変更・完了ボタンを表示
- タイトルタップ — 閉じる
// TaskCard.jsx — 3段階の state 管理
const [mode, setMode] = useState('collapsed')
// 'collapsed' → 'preview' → 'full' → 'collapsed'
コメント取得は プレビュー段階で開始 するので、全詳細を開いたときに待ち時間がありません。
// プレビュー以上になったら1回だけ fetch
useEffect(() => {
if (mode === 'collapsed' || fetchedRef.current) return
fetchedRef.current = true
fetchComments(issue.number)
.then(setComments)
.catch(() => setComments([]))
}, [mode, issue.number])
期限の仕組み
GitHub Issues には期限フィールドがないので、Issue 本文の先頭行 で表現しています。
📅 期限: 2025-04-30
ここから本文が始まる...
アプリ側でパースして、期限の状態に応じた表示を出します：
// utils/deadline.js
export function getDeadlineInfo(deadline) {
if (!deadline) return null
const diff = /* 残り日数を計算 */
if (diff < 0) return { text: `🔥 ${-diff}日超過`, status: 'overdue' }
if (diff <= 3) return { text: `⚠️ あと${diff}日`, status: 'soon' }
return { text: `📅 ${month}/${day}まで`, status: 'normal' }
}
セットアップ手順
1. クローン & インストール
git clone https://github.com/ishiinorifumi-ws/tasgy-app.git
cd tasgy-app
npm install
2. 環境変数
.env をプロジェクトルートに作成：
VITE_REPO_OWNER=your-github-username
VITE_REPO_NAME=your-task-repo
3. GitHub Personal Access Token
- GitHub Settings > Tokens にアクセス
- Fine-grained token を作成（
Issues: Read and write権限） - アプリ初回アクセス時にトークンを入力
4. 起動
npm run dev
デプロイ（GitHub Pages）
- リポジトリの Settings > Pages で Source: GitHub Actions を選択
- Settings > Secrets > Actions > Variables に
VITE_REPO_OWNERとVITE_REPO_NAMEを追加 -
mainブランチに push すると自動デプロイ
CI（lint + build チェック）も入っているので、壊れたコードがデプロイされる心配はありません。
ハマったところ
| 問題 | 原因 | 解決 |
|---|---|---|
| Markdown のスタイルが当たらない |
@tailwindcss/typography が未インストール |
npm install -D @tailwindcss/typography + @plugin 追加 |
| テーブルがプレーンテキスト | react-markdown は GFM 非対応がデフォルト |
remark-gfm を追加して remarkPlugins={[remarkGfm]}
|
| ESLint が effect 内の setState を怒る | React 19 の react-hooks/set-state-in-effect ルール |
useRef でフラグ管理し、同期的な setState を回避 |
| Vite の環境変数が undefined |
VITE_ プレフィックスが必要 |
.env で VITE_REPO_OWNER=... に変更 |
ファイル構成
tasgy-app/
├── src/
│ ├── main.jsx # エントリーポイント
│ ├── App.jsx # ルートコンポーネント
│ ├── api/
│ │ └── github.js # GitHub API ラッパー（fetch ベース）
│ ├── components/
│ │ ├── Header.jsx # ヘッダー
│ │ ├── TabBar.jsx # 優先度タブ
│ │ ├── FilterSort.jsx # フィルター・ソート
│ │ ├── TaskCard.jsx # カード（2段階展開）
│ │ ├── TaskDetail.jsx # 全詳細表示
│ │ ├── CommentForm.jsx # メモ追記フォーム
│ │ ├── NewTaskModal.jsx # 新規タスク作成
│ │ └── TokenInput.jsx # トークン入力画面
│ └── utils/
│ ├── labels.js # ラベル定義（カスタマイズはここ）
│ └── deadline.js # 期限パース・判定
├── index.html
├── vite.config.js
└── package.json
まとめ
GitHub Issues は「タスク管理のデータベース」としてかなり優秀です。
- コメントで経緯が残る — メールのやりとりや MTG メモをコメントに貼れる
- ラベルで自由に分類 — 優先度・カテゴリ・ステータスを組み合わせ放題
- API が充実 — REST API だけで CRUD が完結する
- 無料 — パブリックリポジトリなら完全無料（Issues のリポジトリはプライベートでOK）
GitHub を普段使っている人なら、データの管理先を増やさなくて済むのも地味にうれしいポイントです。
てことでぜんぶ Claude Code にやってもらいました！（記事もほぼほぼ😛）