こんばんは！しんば@shinbazです！
GitHub Universe 2024 でプレビューが開始されたMulti-file edit機能について、ユースケースや実際の編集画面をご紹介します。
Multi-file editing （複数ファイル編集）機能とは
現時点（2024年12月24日）において、Visual StudioとVisual Studio Codeのみで提供されている、複数ファイルに影響する形でGitHub Copilotにコードを提案させる機能です。
これまでのGitHub Copilotは単一ファイル編集でした
これまでのGitHub Copilotは、単一のファイルでの補完機能（オートコンプリート）や、GitHub Copilot Chatからの提案でした。
または、 /new コマンドを利用することで、ディレクトリ構造含め新規プロジェクトを提案してくれるというものでした。
例としてストップウォッチアプリを作ってもらうと、ViewとLogicを1つの単一ファイルで提案してきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ストップウォッチ</title>
<style>
#display {
font-size: 2em;
margin-bottom: 20px;
}
button {
font-size: 1em;
margin: 5px;
}
</style>
</head>
<body>
<div id="display">00:00:00</div>
<button id="startStopBtn">スタート</button>
<button id="resetBtn">リセット</button>
<script>
let startTime;
let elapsedTime = 0;
let timerInterval;
let running = false;
function updateTime() {
const now = Date.now();
const diff = now - startTime + elapsedTime;
const hours = Math.floor(diff / 3600000);
const minutes = Math.floor((diff % 3600000) / 60000);
const seconds = Math.floor((diff % 60000) / 1000);
document.getElementById('display').textContent =
`${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
document.getElementById('startStopBtn').addEventListener('click', function() {
if (running) {
clearInterval(timerInterval);
elapsedTime += Date.now() - startTime;
this.textContent = 'スタート';
} else {
startTime = Date.now();
timerInterval = setInterval(updateTime, 1000);
this.textContent = 'ストップ';
}
running = !running;
});
document.getElementById('resetBtn').addEventListener('click', function() {
clearInterval(timerInterval);
elapsedTime = 0;
running = false;
document.getElementById('display').textContent = '00:00:00';
document.getElementById('startStopBtn').textContent = 'スタート';
});
</script>
</body>
</html>
Multi-file editingを使うと
HTML, CSS, JSを分けて出力することができるようになりました。
ユースケース
複数ファイルを変更する際のユースケースはいくつもありますが、列挙してみます。
実際のプロジェクトでのユースケースとしてインスピレーションとなれば幸いです！
- 大規模サイトでフロントエンドやバックエンド、パイプラインなどが別れている場合
- それぞれのファイル・ディレクトリで管理されているフロントエンドとバックエンド、さらにCI/CD用のパイプラインなどを編集可能です。
- 新API開発時におけるテストコードの一括拡充など
- 新しいAPIのエンドポイントを追加したり、大きく仕様を変えたりするとき、ユニットテスト・結合テスト用のファイルをまとめて書き換えることがあります。既存のテストフォーマットや規則を参照しながら提案してもらえます。
- サイト全体デザインのリニューアル
- 大規模リニューアルの際には、CSSやテーマカラー、HTMLテンプレート、コンポーネントごとのスタイルなどを一括で修正する必要があります。特に色指定やレイアウトに関する共通クラスを変える場合は、複数のファイルに同じ変更を加えることになるので、Multi-file editingが有用につかえます。
あとがき
プロジェクトが大きくなるほど、複数ファイル編集のニーズは高まります。
現状すべてのGitHub Copilotプランでこの機能は使えますので、有効的に使っていきましょう！
サービス一覧 www.alterbooth.com www.alterbooth.com www.alterbooth.com
