「VS Codeで使えるポモドーロタイマーはある？」「プログラミング中にエディタから離れず時間を管理したい」。
Visual Studio Code（VS Code）でプログラミングをしているなら、ポモドーロ・テクニックを取り入れて作業時間を区切る方法があります。
基本的なポモドーロでは、
25分集中 → 5分休憩
というサイクルを繰り返します。
VS Codeでポモドーロを使う方法としては、
- VS Codeの拡張機能を利用する
- Web版ポモドーロタイマーを併用する
- デスクトップアプリを併用する
などがあります。
この記事では、VS Codeでポモドーロタイマーを使う方法や、プログラミングで利用するときのポイントを紹介します。
VS Codeでポモドーロタイマーは使える？
VS Codeには拡張機能を追加できる仕組みがあります。
ポモドーロやタイマーに対応した拡張機能を導入すれば、VS Codeを使いながら時間を管理できます。
また、必ずしもVS Codeへ拡張機能を追加する必要はありません。
ブラウザでWeb版ポモドーロタイマーを開き、
VS Codeでプログラミング
↓
ブラウザでタイマーを管理
という使い方もできます。
VS Codeの拡張機能を使う
VS Codeでは、Marketplaceからさまざまな拡張機能を追加できます。
ポモドーロに対応した拡張機能を利用すれば、エディタ内から集中時間を管理できる場合があります。
機能は拡張機能によって異なりますが、
- タイマーの開始
- タイマーの停止
- 集中時間の設定
- 休憩時間の設定
- 終了通知
- ステータスバーへの残り時間表示
などに対応しているものがあります。
VS Codeだけで作業を完結させたい人には便利な方法です。
VS Code内で使うメリット
VS Codeの拡張機能を利用するメリットは、タイマーを確認するために別のアプリへ移動する必要がないことです。
例えば、
コードを書く
↓
VS Code上で残り時間を確認する
↓
タイマー終了
↓
休憩する
という流れにできます。
ブラウザへ移動する必要がないため、プログラミング中の画面切り替えを減らせます。
ステータスバー表示が便利
ポモドーロ系のVS Code拡張機能を選ぶ場合は、ステータスバーに残り時間を表示できるか確認してみましょう。
例えば、
24:35
のように画面の端へ表示できれば、コードを書きながら残り時間を確認できます。
タイマー専用のウィンドウを表示する必要がないため、エディタの作業領域を広く使えます。
拡張機能を選ぶときの注意点
VS Codeの拡張機能を導入するときは、機能だけで選ばないことも大切です。
例えば、
- 提供元
- 必要な権限
- 更新状況
- 利用者数
- 評価
- ソースコードの公開状況
などを確認しましょう。
特に仕事で使用するPCでは、会社のルールによって自由に拡張機能を追加できない場合があります。
業務PCで利用する場合は、組織のセキュリティルールに従いましょう。
Web版を併用する方法
VS Codeへ拡張機能を追加したくない場合は、Web版ポモドーロタイマーを利用できます。
例えば、
- ブラウザでポモドーロタイマーを開く
- 25分のタイマーを開始する
- VS Codeへ戻る
- 25分間プログラミングする
- タイマーが終了したら休憩する
という流れです。
普段からブラウザとVS Codeを同時に使っているなら、シンプルな方法です。
拡張機能とWeb版はどちらがおすすめ？
VS Codeの拡張機能とWeb版には、それぞれ特徴があります。
VS Code拡張機能がおすすめな人
- VS Code内でタイマーを完結させたい
- ステータスバーで残り時間を見たい
- 画面切り替えを減らしたい
- 毎日VS Codeを利用している
Web版がおすすめな人
- VS Codeへ拡張機能を追加したくない
- 会社のPCで拡張機能を追加できない
- ブラウザでもタイマーを使いたい
- シンプルに時間だけ管理したい
どちらでもポモドーロ・テクニック自体は実践できます。
プログラミングとポモドーロは相性がいい？
プログラミングでは、長時間画面を見ながら作業を続けることがあります。
ポモドーロを利用すれば、
一定時間コードを書く
↓
短い休憩を取る
という区切りを作れます。
特に、
- 実装
- テスト
- コードレビュー
- 調査
- ドキュメント作成
など、まとまった作業時間を確保したい場合に利用できます。
25分でプログラミングを止める必要はない
ポモドーロでは25分がよく使われますが、必ず25分で作業を止める必要はありません。
プログラミングでは、
ちょうど実装に集中してきたところで25分が終了する
こともあります。
その場合は、
- 30分集中・5分休憩
- 45分集中・10分休憩
- 50分集中・10分休憩
- 60分集中・10分休憩
など、自分に合った時間へ調整してもよいでしょう。
重要なのは25分という数字ではなく、集中と休憩のリズムを作ることです。
区切りのよいところをメモして休憩する
タイマーが終了した瞬間にコードを書くのを止めると、
どこまで実装したか分からなくなる
ことがあります。
そこで、休憩へ入る前に、
- 次に実装する処理
- 発生しているエラー
- 次に確認するファイル
- テストする内容
などを短くメモしておく方法があります。
休憩後に「何をしていたんだっけ？」となりにくく、作業へ戻りやすくなります。
デバッグ中は柔軟に使う
デバッグ中にタイマーが終了した場合も、必ずその瞬間に作業を止める必要はありません。
例えば、
あと1回実行すれば原因を確認できそう
という状況なら、区切りまで進めてから休憩する方法もあります。
ポモドーロは集中するための方法なので、タイマーを守ること自体が目的にならないようにしましょう。
休憩では画面から離れる
プログラミングの休憩中に、
コードを書くのを止めてYouTubeを見る
だけでは、目や身体を十分に休められないことがあります。
5分休憩では、
- 席を立つ
- 水を飲む
- 軽く身体を動かす
- 遠くを見る
など、PC画面から離れるのもおすすめです。
Git作業にも区切りを作れる
ポモドーロを作業単位として利用する方法もあります。
例えば、
1ポモドーロ
機能を実装する。
2ポモドーロ
テストを書く。
3ポモドーロ
リファクタリングする。
というように、作業内容を分けます。
タイマーを単なる時間計測ではなく、作業を区切るきっかけとして利用できます。
Chromeと組み合わせる方法
VS CodeとChromeを同時に使って開発しているなら、Chrome側でWeb版ポモドーロタイマーを動かす方法もあります。
例えば、
Chrome：ポモドーロタイマー
VS Code：プログラミング
という使い分けです。
Chromeでの利用については、Chromeで使えるポモドーロタイマーも参考にしてください。
JavaScriptの勉強にも使える
VS CodeでJavaScriptなどを勉強している場合にも、ポモドーロを利用できます。
例えば、
25分：教材を読む
↓
5分：休憩
↓
25分：実際にコードを書く
といった使い方です。
ポモドーロタイマーそのものをJavaScriptで作ってみる方法もあります。
JavaScriptでポモドーロタイマーを作る方法も参考にしてください。
自作ポモドーロタイマーの開発にも
プログラミングを勉強しているなら、ポモドーロタイマーを自作するのも題材になります。
基本的なタイマーでも、
- 時間設定
- カウントダウン
- 開始
- 停止
- リセット
- 集中と休憩の切り替え
など、さまざまな処理を実装できます。
詳しくは、ポモドーロタイマーを自作する方法も参考にしてください。
PomolikaならVS Codeと併用できる
Pomolikaは、ブラウザで使えるポモドーロタイマーです。
VS Codeへ拡張機能を追加する必要はありません。
ブラウザでタイマーを開始してからVS Codeへ戻り、そのままプログラミングできます。
また、ブラウザのタブにも残り時間が表示されるため、必要なときに時間を確認できます。
VS Codeには開発に必要な拡張機能だけ入れたい
という場合は、時間管理をWeb版へ分ける方法もあります。
まとめ
VS Codeでポモドーロタイマーを使う方法には、
- VS Code拡張機能
- Web版ポモドーロタイマー
- デスクトップアプリ
などがあります。
VS Code内だけで時間を管理したいなら拡張機能、追加の拡張機能を入れたくないならWeb版が便利です。
また、プログラミングでは25分で無理に作業を中断する必要はありません。
30分や45分など、自分がコードへ集中しやすい時間へ調整しながら利用してみましょう。