1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[個人開発] VSCodeで作業時間を見える化する拡張機能を作ってみた

Last updated at Posted at 2025-05-04

vscodeの拡張機能「Time Tracker」を作成したので共有します

Time Trackerとは

一言で言うと、VSCode上でファイルごとの作業時間を自動計測する拡張機能です。
「どのファイルに一番時間使ったんだろう?」
「今日はプログラミングに何時間集中したかな?」
「タスクの見積もりにかかった実際の時間を知りたい」
そんな疑問に答えてくれるツールを目指して開発しました。

主な機能

1. ファイルの切り替えで自動計測スタート 🚀

ファイルを開いた瞬間から時間計測が始まり、別のファイルに切り替えると自動でストップ&新しいファイルの計測がスタートします。
普段通りにコーディングするだけで、時間データが溜まっていきます。

2. ステータスバー ⏱️

ステータスバー

VSCodeの右下には、以下の情報が常に表示されます:

今日の合計作業時間
現在開いているファイルの作業時間

「あ、もう2時間経ってる。休憩しよう」みたいな使い方ができます。

3. タイムカードで振り返り 📊

作業データを可視化する「タイムカード」機能があります。

タイムカード

  • グラデーション背景が綺麗
  • ファイルごとの時間配分がグラフでわかる

4. フローティングタイマー ⏳

常時表示できる小さなタイマーウィンドウ。

  • 作業中も邪魔にならないサイズ
  • 一時停止やミニマイズ機能付き
  • ドラッグして好きな位置に配置可能

フローティングタイマー

5. 除外機能 🚫

以下のような時に便利:

  • 設定ファイルは計測から除外したい
  • チュートリアルを見てるだけの時間はカウントしない
  • READMEの確認時間は省きたい

ワンクリックで計測対象から外せます。

6. リセットボタンで気軽に再スタート 🔄

「新しいプロジェクトを始めるから時間をリセットしたい」そんな時に便利なリセット機能

実際に使ってみた感想

1週間使ってみましたが、以下のような発見がありました:

  • READMEを書く時間が意外と長い:コーディングよりドキュメント作成に時間がかかっていた
  • 休憩のタイミングがわかる:60分以上同じファイルを触ってたら休憩サイン

インストール方法

下記リンクからインストールいただけます

こんな人にオススメ

  • 個人開発者で作業ログを取りたい人
  • タスクの見積もり精度を上げたい人
  • 単純に「何に時間を使ってるか」を知りたい人

さいごに

個人的なニーズから始まったこのプロジェクトですが、思いの外便利なツールが完成しました。時間管理に悩むエンジニアの皆さんの役に立てば幸いです。
ご意見やバグ報告は、GitHubのIssueでお待ちしています!

1
1
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
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?