はじめに
この記事は「Medley（メドレー） Advent Calendar 2024」15 日目の記事です。
https://qiita.com/advent-calendar/2024/medley
こんにちは！株式会社メドレーで新規プロダクトの開発を行っている德永です。
日頃の開発業務では、開発、PR レビュー、コミュニケーション、タスク管理など、様々な作業を並行して行う必要があります。特に立ち上げ初期は、開発に集中するためのまとまった時間を確保することが難しい場合があります。
そのような状況で、プロジェクトやブランチを切り替えるたびに発生する「ちょっとした手間」や「コンテキストスイッチ」は、集中力を削ぎ、生産性を低下させる要因となります。
この記事では、VSCode での PR レビューにおけるプロジェクト切り替えのテクニックをご紹介します。
エディタで PR レビューを行う理由
私たちのチームでは GitHub でコード管理を行っています。その中で私個人の課題として GitHub の Web UI 上でのレビューにおいてコードの全体像を把握しづらく、レビューで見落としが発生し、後悔することもありました。
そのため、普段から使用しているエディタ（VSCode）で PR レビューを行うようにしています。エディタ内蔵のレビュー機能は、使い慣れている機能を利用したり、実際に開発環境で検証をすぐにできるため、コードを深く理解しながら、より質の高いレビューを行うことができます。
GitHub Codespaces や GitHub のオンラインエディタも選択肢となりますが、「手元で実際にビルドして挙動を検証したい」「デバッグしながらコードを追いたい」というケースが多いため、ローカル環境でいつもレビューを行っています。
ローカルレビューの課題
しかし、エディタでレビューを行うには、作業中のブランチからレビュー対象のブランチに切り替える必要があり、以下のような課題がありました。
- 作業中ブランチを Stash するのが手間となる。
- レビュー後に元の開発環境に戻す際に、
npm installなどのパッケージ再インストールや、環境設定の復旧作業が発生する。
これらの課題は、単に時間がかかるだけでなく、集中力を途切れさせる要因となっていました。
Raycast の活用
これらの課題を解決するために導入したのが Raycast です。Raycast を活用することで、「作業環境」と「レビュー環境」をスムーズに切り替えられるようになり、レビューから開発への復帰が容易になりました。
解決策
解決策は以下のようにシンプルなものです。
- 開発対象のリポジトリを、通常の開発用とレビュー専用のものとして、2 つクローンします。
- Raycast の VSCode 拡張機能を利用して、VSCode の 「Recent Projects」 に素早くアクセスし、環境を切り替えます。
手順
※例として、my-project というリポジトリで開発を行っている状況を想定します。
1. リポジトリを 2 つクローン
まず、開発リポジトリのクローンを 2 つ作成します。一方を通常のプロジェクト名（my-project）、もう一方をレビュー用として -for-review を付加した名前にします（my-project-for-review）。
環境を物理的に分離することで、切り替えたときに考えることが少なくなる
重要なのは、環境を物理的に分離することです。これにより、ブランチの切り替えや Stash などの操作が不要になり、コンフリクトのリスクも低減できます。
2. VSCode で各プロジェクトを開く
Raycast からアクセスするには、VSCode の 「Recent Projects」 に表示されている必要があります。そのため、VSCode でそれぞれのプロジェクトフォルダを開いておきます。
3. Raycast の Visual Studio Code 拡張機能をインストール
Raycast の Store から Visual Studio Code 拡張機能をインストールします。Web または Raycast アプリ内からインストールできます。
4. Raycast で「Recent Projects」にアクセス
Raycast を起動し、Recent Projects と入力すると、VSCode の 「Recent Projects」 一覧が表示されます。
ここから目的のプロジェクトを選択するだけで、VSCode でそのプロジェクトが開きます。Raycast 上で現在チェックアウトしているブランチも確認できるため、開発ブランチとレビュー用ブランチを簡単に区別できます。
5. Raycast のショートカットを設定（推奨）
Raycast にショートカットを設定すると、さらに便利になります。cmd + ctrl + v などを割り当てることで、キーボードショートカットでプロジェクトを切り替えられるようになります。
導入の効果
以前は、VSCode の Project Manager 拡張機能と Raycast の Project Manager 拡張機能を組み合わせて同様の操作を行っていましたが、新規プロジェクトを個別に登録する必要がありました。
Raycast から VSCode の 「Recent Projects」 に直接アクセスできるようになったことで、この手間が解消されました。この方法はレビューだけでなく、複数のプロジェクトを頻繁に切り替える場合にも有効です。
まとめ
このような工夫を積み重ねることで、開発に集中できる時間を増やし、生産性を向上させることができます。ぜひ、ご自身のワークフローに合わせて試してみてください。
Medley Advent Calendar 2024、明日は @yuporon さんによる「非同期処理のエラーが ErrorBoundary で捕捉できなかった話」です。お楽しみに！
Discussion