1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GitHub Issues で GTD を回す PWA を作って公開しました——todo.saitoko.net

1
Last updated at Posted at 2026-05-11

この記事の概要(2026年5月公開): GitHub Issues をバックエンドにした GTD タスク管理 PWA を作り、todo.saitoko.net で公開した。React 18 + TypeScript + Vite 製でサーバーレス。iPhone のホーム画面に追加すればネイティブアプリのように動く。現時点で作者本人しか使っていないため、フィードバックが欲しくて記事を書いた。


Claude Code で /todo スキル(GTD × GitHub Issues の CLI ツール)を毎日使っているのですが、困ったことがありました。

外出先でタスクが浮かんだとき、Inbox に入れようとすると GitHub の Web UI を開かないといけない。これが地味にストレスで、「面倒だから後で入れよう」と思った瞬間にキャプチャの習慣が崩れます。

GTD の第一原則は「頭から出してシステムに入れること」なのに、その入口が面倒では意味がない。

そこで、GitHub Issues を GTD のバックエンドにした PWA(Progressive Web App)を自作して公開しました

URL: https://todo.saitoko.net

何を作ったか

iPhoneのホーム画面に追加した状態
iPhoneのホーム画面に「GTD Todo」として追加できる

一言で言うと、「GitHub Issues をタスクストアにして、GTD の7カテゴリで管理するブラウザアプリ」です。Claude Code の /todo スキルと組み合わせると最もスムーズに動きますが、Claude Code を使っていなくても単独で完結します。

  • GitHub OAuth でログイン
  • 操作データは GitHub Issues に保存——外部データベース、Firestore 等は一切使っていない
  • バックエンドサーバーなし(ブラウザが GitHub API を直接呼ぶ)
  • iPhone のホーム画面に追加するとネイティブアプリのように動く(PWA)

技術スタックは React 18 + TypeScript + Vite です。OAuth の callback 処理だけ Cloudflare Functions を使っています。

5ステップでセットアップできます

「GitHub のトークンを渡すのが怖い」と思った方へ先に補足: トークンはブラウザの localStorage にのみ保存されます。OAuth ログイン時の1ステップを除き、その後の GitHub API 通信はすべてブラウザから直接行われます(後述の技術的な話を参照)。

手順はシンプルです。

  1. GitHub にリポジトリを1つ用意する(既存でも新規でも可)
  2. todo.saitoko.net を開く
  3. Settings から GitHub OAuth でログイン
  4. リポジトリ名とオーナー名を設定する
  5. Inbox にタスクを追加してみる

GTD のラベル(inbox / next / waiting / someday / routine / project / reference)はアプリが自動的に管理します。GitHub 側でラベルを手動で作る必要はありません。

Settings画面(ログイン前)
「GitHub でログイン」ボタンを押すだけ。Token はデバイスの localStorage にのみ保存される旨が表示される

Settings画面(ログイン後)
ログイン後はリポジトリ名を入力して「保存」するだけでセットアップ完了

GTD を知らなくても使えますか?

GTD(Getting Things Done)は、David Allen が提唱したタスク管理の方法論です(新装版 はじめてのGTD ストレスフリーの整理術)。

「GTD って難しそう」という方も、最初は2つの操作だけ覚えれば使えます。

Inbox に入れる: 思いついたことをとりあえず全部入れる。考えない。ただ書く。

Focus で今日やることを確認する: Focus ページを開くと「今日期限のタスク」と「優先度 p1/p2 のタスク」だけが絞り込まれて表示されます。

この2ステップだけでも、「やること一覧が GitHub Issues に集まる」という状態が作れます。残りの GTD 機能(整理・週次レビュー)は、慣れてから使えばいい。

各ページの役割

List ページ

Inboxページ
Inbox にタスクが3件。下のカテゴリ選択パネルで7つのリストを切り替えられる

GTD の7カテゴリ(Inbox / Next / Waiting / Someday / Routine / Project / Reference)をタブで切り替えながら表示します。タスクの追加・完了・カテゴリ間移動がここでできます。「とりあえず Inbox に投げておけばいい」という感覚になるだけで、キャプチャの心理的ハードルが下がります。

Focus ページ

Focusページ
「今やること」が2件に絞り込まれた状態。朝ここだけ見れば今日のタスクがわかる

next カテゴリの中から「今日期限」または「優先度 p1/p2」のタスクだけを表示します。私は毎朝通勤電車の中でここを開いて、今日やることを頭に入れてから仕事を始めます。

@context ラベルを使っているなら、コンテキストフィルタで「家でできること」「電話が必要なこと」といった絞り込みもできます。

Insight ページ

Insightページ
期日超過・放置タスクを自動抽出。週次レビューで棚卸しするのに使う

週次レビュー用のページです。「期日超過タスク」「30日以上更新のないタスク」「長期間 waiting に留まっているタスク」を自動で抽出してくれます。週に一度ここを開いて、放置タスクを棚卸しするのに使っています。

Search ページ

Searchページ
キーワード検索。「本文も検索する」オプションで Issue のボディも対象にできる

全タスクをキーワードで検索できます。「あのタスク、どのカテゴリに入れたっけ」というときに使います。個人的に使用頻度が高い機能です。

/todo スキル(CLI)がなくても使えます

「Claude Code の /todo コマンドを使っていない人には意味ないのでは?」

このアプリは Claude Code とは独立して使えます。

todo.saitoko.net から Inbox にタスクを追加 → PC で GitHub Issues を直接確認・処理、という使い方で完結します。

Claude Code を使っている方なら、こんな流れが作れます。朝の電車でスマホから Inbox にタスクを追加しておき、帰宅後に Claude Code セッションを開いて /todo process でまとめて整理する。キャプチャと処理を分離できるため、「思いついたが手が離せなくて忘れた」という損失がなくなりました。

技術的な話(Token の安全性について)

コードは Private リポジトリのため公開できませんが、Token の扱いだけ説明します。

Token はブラウザの localStorage にのみ保存されます。

OAuth callback 時、Cloudflare Functions がGitHub から受け取った Token を URL のクエリパラメータとして Settings ページにリダイレクトします。Settings ページがそれを受け取り、localStorage に保存します。その後の GitHub API 呼び出しはすべてブラウザ(クライアントサイド)から直接行われます。アプリのサーバーが Token を受け取るのはこの OAuth callback の1回だけで、Token を保存・ログ記録することはありません。

心配な場合は、専用のリポジトリを新規作成して使うことをお勧めします。不要になったらそのリポジトリと GitHub OAuth App の認可を削除すれば完全に切り離せます。

フィードバック募集——セットアップで詰まった点を教えてください

このアプリは、現時点で作者本人しか使っていません

「自分以外のユーザーに使ってもらえるか検証したい」というのが、この記事を書いた正直な動機です。

フィードバックをいただければ、使い勝手の改善に役立てます。特に知りたいのは以下の点です。

  • セットアップで詰まった箇所
  • 「こういう操作ができない」という不満
  • PWA としてホーム画面に追加できたか

バグ報告や感想はこの記事のコメントからご連絡いただければ確認します。


GitHub Issues でタスク管理しているエンジニアで、モバイルから手軽に操作したい方はぜひ試してみてください。完全無料、広告なし、有料プランなしです。

https://todo.saitoko.net

この記事が役に立ったと思ったら、Zenn のフォローをしてもらえると励みになります。

この記事は はてなブログ からのクロスポストです。


はてなブログ版: https://blog.saitoko.net/entry/2026/05/10/175319

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?