作業フォルダを開くと、プロジェクトのフォルダが22個並んでいる。そのうち20が Git リポジトリで、コードだけで合計15.67GB。半年前に自分で作ったアプリでも、フォルダ名を見ただけでは「それが Python だったか」「最後に触ったのはいつか」「どうやって起動するのか」は何も分からない。毎回エクスプローラーを行き来して、README を開いて、ターミナルで起動コマンドを思い出す。この往復を消すために、作業フォルダ配下の全プロジェクトを一覧して、状況を把握して、その場から起動できる「開発の司令塔」を Electron で作った。名前は WorkSpace Explorer。この記事では、その画面と設計の勘所を、実際に動かしたスクリーンショットつきで全部見せる。
目次
このガイドで作るもの
WorkSpace Explorer は、作業フォルダ（私の場合は MY_Work_Space）の直下にあるプロジェクトを、起動した瞬間に全部スキャンして一覧化するデスクトップアプリだ。画面は3列。左に検索とフィルタ、中央にプロジェクトの一覧、右に選んだプロジェクトの詳細が出る。詳細には技術スタック、作成日と最終更新、コードサイズ、Git のブランチと未コミット数、起動コマンド、README のプレビューまでが1枚にまとまる。バンドラは使わず、Electron 30 とバニラの HTML/CSS/JS だけで組んだ。
ダッシュボードの数字で言うと、この時点の中身は22プロジェクト・Git リポジトリ20個・合計15.67GB。以前は100個近くまで膨らんでいたのを、このツールで棚卸ししながら整理して、今の22個まで絞った。散らかったフォルダを片づける管理ツールとして、ちゃんと働いている証拠でもある。数としては多くない。それでも「フォルダ名の並び」から中身を思い出す作業は、20を超えたあたりから確実に重くなる。だから狙いは1点に絞った。プロジェクトを1つ選んで起動するまでの時間を、ゼロに近づける。
探すのをやめて、一覧から選ぶ
入口は検索とフィルタだ。上の検索ボックスに文字を打つと、200ミリ秒のディレイでプロジェクト名を絞り込む。下のスクリーンショットは「a」を含むプロジェクトだけに絞った状態で、右上のカウントが22から11に減っている。キーボードの Ctrl+F で検索へ即フォーカス、Esc で解除。マウスに持ち替えずに端から絞れる。
フィルタチップは、ステータス（Active / Dormant / Retired）と主要スタック（Python / Node.js / Electron）で用意した。ステータスはアプリが自動で判定する。最後にファイルを触った日から90日以内なら Active、1年以内なら Dormant、それ以上なら Retired。Obsidian のノートに status: を書いてあればそちらを優先する。だから「放置して1年経ったプロジェクト」が勝手に灰色（Retired）に落ちてくれて、今動いているものだけを Active で拾える。よく開くものは 📌 でピン留めして最上段に固定できる。
フォルダ名だけでは分からないことを、1枚に集める
一覧から1つ選ぶと、右にそのプロジェクトの「プロフィール」が開く（1枚目の画面）。ここに集めたのは、フォルダを開いても一目では分からない情報だけだ。
まず技術スタックとサイズ。package.json があれば Node.js、その依存に next や electron があれば Next.js・Electron まで見分ける。requirements.txt に lightgbm や pyside6 があれば LightGBM・PySide6 のバッジが付く。サイズは node_modules や .venv を除いた「コードだけの重さ」を出すので、依存で水増しされない実際の規模が分かる。
次に Git。プロジェクトを選ぶと裏で git を呼び、現在のブランチ・未コミット数・最後のコミットからの経過を非同期で読み込む。「main、3未コミット、2日前」のような一行が出るので、開く前に「これはまだ作業中だ」と分かる。起動方法も自動で推測する。npm start があればそれ、run.bat があればそれ、Streamlit を使っていれば streamlit run app.py というふうに、プロジェクトの中身から起動コマンドを組み立てて「▶ 起動」ボタンに載せる。押せば新しいターミナルでそのコマンドが走る。VS Code で開く、エクスプローラーで開く、Obsidian のノートへ飛ぶボタンも同じ列に並べた。「選ぶ→起動する」までを、この画面から一歩も動かずに終わらせたかった。
README も右下でそのまま読める。Markdown を描画して表示するので、フォルダを開いて別のエディタに切り替える手間が要らない。CLAUDE.md や AGENTS.md があれば、タブで切り替えて中身を確認できる。
ワークスペース全体を上から眺める
個別のプロフィールとは別に、全体を俯瞰する 📊 ダッシュボードを付けた。ここは「今の作業場が、どういう構成になっているか」を数字で見る場所だ。
棒グラフのスタック分布を見ると、自分の作業がどこに寄っているかが分かる。私の場合は Python が12個で断トツ、そこに Node.js と PySide6 のデスクトップ系が混じる、というのが数字で見えた。「最近更新」の8件はそのまま「今週の作業ログ」になり、「サイズ TOP 8」は容量を食っている犯人を教えてくれる。ダッシュボードのプロジェクト名はクリックでき、押すとその詳細へ飛んで一覧が閉じる。眺めてから、そのまま作業へ入れる。
散らかった中間生成物を安全に片づける
もう1つ、🧹 Workspace Janitor という掃除機能を積んでいる。プロジェクトが増えると、各フォルダの .venv や node_modules が積み上がって、気づくと数十GBを占める。Janitor は作業フォルダ全体を監査して、それらの中間生成物を休眠日数つきで一覧にする。
.venv・node_modules をサイズと休眠日数つきで並べる。回収候補にはチェックボックスが付く。ここで気をつけたのは、消す操作を絶対に一撃で走らせないことだ。回収したい項目にチェックを入れても、いきなり削除はしない。まず dry-run の内容（何を消し、どうやって元に戻すか）を表示し、「dry-run を確認した」というチェックを自分で入れて初めて実行ボタンが有効になる。削除は「依存記録 → マニフェスト保存 → 削除 → 検証」の順で進み、途中で失敗したらそこで止まる。ディスクを空けたい気持ちと、うっかり必要なものを消す事故は、いつも隣り合わせだ。だから面倒でも確認を1枚挟む設計にした。
作り方の要点：3つのプロセスと、1本のスキャナ
中身は Electron の教科書的な3層構成だ。ファイルを読んだり git を叩いたりするメインプロセス（main.js）、画面を描くレンダラー（renderer/）、その2つを安全につなぐpreload。レンダラーからは OS を直接触れないようにして、必要な操作だけを window.api という窓口越しに呼ぶ。contextIsolation を有効にし、nodeIntegration は切ってある。ローカル専用の道具でも、README を描画する以上は外から来た文字列を扱うので、そこは固めておきたかった。
アプリの心臓は scanner.js 1本だ。作業フォルダの直下を readdirSync で読み、node_modules や .git、それに自分自身のフォルダを除外して、残りをプロジェクトとして扱う。各フォルダに対してスタック検出・ステータス判定・サイズ計算・起動コマンド推測・Obsidian ノートの読み込みを回す。サイズ計算では重いフォルダを歩かないので、100個近くまで増えても数秒で返る。Git 情報だけは重いので、一覧のスキャンとは切り離して、プロジェクトを選んだ時に git を spawn して非同期で取りにいく。全部を最初に読もうとすると起動が遅くなる。だから「一覧に必要な軽い情報」と「開いた時に欲しい重い情報」を分けた。
README の描画は marked で Markdown を HTML にして、DOMPurify で通してから差し込む。Obsidian との連携は、Projects/ フォルダのノートを名前で突き合わせて、frontmatter の status やタグ、本文の1行目を説明文として拾う仕組みにした。プロジェクトの「事実」を Obsidian 側の1箇所に置いておけば、このアプリはそれを読むだけでいい。
AI との分担はこうだ。3画面の構成と「何を1枚に集めるか」は自分で決め、スキャナの判定ロジックやIPCの配線はほとんど Claude に書かせた。判定のしきい値（Active を90日にするか）や、Janitor の確認を何段にするかは、実際に自分の作業フォルダで動かしながら調整した。使う人が自分1人だからこそ、しきい値は自分の手で合わせる意味がある。
実際に使って見えたこと
スクリーンショットの数字は、どれも私の作業フォルダの実データだ。22プロジェクト、うち20が Git 管理、コードだけで15.67GB。Janitor を回したら、.venv と node_modules だけで最大のものが7.58GB、上位を合計すると二桁GBが「中間生成物」として眠っていた。全部「除外」判定で安全側に倒してあるとはいえ、数字で突きつけられると片づけたくなる。
使ってみて効いたのは、意外にもステータスの自動判定だった。手で「これは休眠」とタグ付けする運用は、まず続かない。最終更新日から機械的に色を割り振るだけで、Active のフィルタを押した瞬間に「今の自分の戦線」だけが残る。逆に弱点もある。ファイルを1つ開いて保存しただけで最終更新が動くので、「中身は進んでいないのに Active に見える」ことは起きる。そこは日付と未コミット数を併せて見て補っている。
探す時間は、道具で消せる。
正直なまとめ
プロジェクトが20を超えたら、私はこういう司令塔を1つ持つ価値があると考えている。既製のIDEでも一覧は出るが、「Git の状況・コードサイズ・起動コマンド・README・作った時のメモ」を1枚に束ねてくれる道具は、探すより自分の作業フォルダの形に合わせて作ったほうが速かった。使った部品は Electron と、標準の HTML/CSS/JS と、Markdown を描く marked だけ。スキャンのしきい値も、掃除の安全弁も、自分の手に馴染むところに置ける。次はあなたの作業フォルダの「探すのが面倒な瞬間」を1つ選んで、そこだけを潰す小さな司令塔から作ってみてほしい。
この制作で使ったもの PR
🖥 サーバ/ドメイン
🤖 使ったAIツール（公式）
📚 技術書（Amazon）
👉 関連: 開発実例ギャラリー：Workspace Explorer ・ ほかのアプリの作り方 ・ バイブコーディング入門
