0
0

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 + github copilotでコードレビューする

Posted at

自分のコードをセルフレビューするのがめんどくさいのでcopilotにやってもらいたい。
そんなときの手順を残しておきます。

要約

  1. VSCodeでレビューしてほしいコードを選択
  2. Ctrl + i / Command + i
  3. このプログラムをコードレビューしてください。と入力
  4. レビューが生成されます

詳細

今回のレビュー対象

私の過去の公開記事にしてみました。

コードを選択

スクリーンショット 2024-11-27 9.32.21.png

Ctrl + i / Command + i でcopilotのチャットウィンドウを表示

スクリーンショット 2024-11-27 9.33.45.png

/ をタイプし、explainを選択

スクリーンショット 2024-11-27 9.34.03.png
スクリーンショット 2024-11-27 9.34.23.png

レビューの依頼を入力

スクリーンショット 2024-11-27 9.34.23.png

レビューが開始されます

スクリーンショット 2024-11-27 9.34.30.png

完了するとチャットウィンドウへの表示が選べます。

スクリーンショット 2024-11-27 9.36.17.png

チャット表示例

スクリーンショット 2024-11-27 9.36.41.png

結果

いい点と改善点を示してくれました。
ここでは省略していますが、改善後のコード案も提示してくれるのでとても参考になります。
そして、過去の私のコードが事例とは言えお目汚しであったことが認識できました。
今後とも自分のコードの品質を高めていきたいと心に誓いました。

このJavaScriptコードは、地図上でドラッグ操作を行うためのスクリプトです。以下にコードレビューを行います。

良い点
初期化関数の使用: mapInit関数を使用して地図の初期化を行っており、コードの可読性が高いです。
イベントハンドラの設定: mousedown, mousemove, mouseupイベントを適切にバインドしており、ドラッグ操作を実現しています。
改善点
グローバル変数の使用: ymap, dragStartPos, dragEndPos, movingPos, isDraggingなどの変数がグローバルスコープに定義されています。これらは関数スコープに閉じ込めるか、モジュールパターンを使用してグローバル汚染を避けるべきです。
jQueryの依存: jQueryを使用していますが、現代のブラウザではネイティブのDOM操作が強化されているため、jQueryの使用を再検討しても良いでしょう。
ハードコーディングされた座標: 地図の初期位置がハードコーディングされています。これを設定ファイルやユーザー入力から取得するようにすると柔軟性が増します。
イベントハンドラのリファクタリング: イベントハンドラ内のコードが冗長です。例えば、dragStartPosやdragEndPosの初期化は一行で行うことができます。
改善例
以下に、いくつかの改善点を反映したコード例を示します
0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?