Visual Studio Codeでコードをリファクタリングするための4つのヒント
この記事では、Visual Studio Code（VS Code）とVisual Studio Codeのプラグインを使ってコードをリファクタリングする方法について説明します。
リファクタリングは、現在の動作を変えずに、ベストプラクティスやルールに従ってコードの内部構造を改善することです。開発チームが新しい開発サイクルを始める前に、コードアーキテクチャと内部構造を評価するために、リファクタリング週間を計画することがよくあります。エンジニアリングチームにとって、技術的な問題を継続的に対処し、メンテナンスとコード品質について定期的に議論することは重要です。
コードの品質と保守性を向上させる上で、コードリファクタリングは重要な活動です。綺麗なコードの上に新しい機能を構築するのはずっと簡単ですし、テストの作成時にも利益をもたらします。
この記事では、Visual Studio Code（VS Code）とVisual Studio Codeのプラグインを使ってコードをリファクタリングする方法について説明します。
1. Visual Studio Codeのショートカットを使ったリファクタリング
まず、Visual Studio Codeのネイティブショートカットを使って基本的なコードリファクタリングをしましょう。JavaScriptを使った小さなコード例を作成して、これらの機能を試す手助けにしました。
ビジネスロジックを含むindex.jsファイルがあります。userModuleをインポートし、新しいユーザーオブジェクトを取得し、ユーザーの名前を大文字に変換します。
const userModule = require('./modules/users/retrieve')
const myUser = userModule.getUser("Ben", 17)
console.log(myUser.name)
const name = userModule.toUpperCaseUser(myUser.name)
console.log(name)
さらに、index.jsファイルで使用しているいくつかのエクスポートされた関数を含むuserModuleの実装です。ファイルは2つのフォルダにネストされており、結果としてのパスは/modules/users/retrieve.jsです。
const getUser = (name, age) => ({
name: toLowerCaseUser(name),
age
})
const toUpperCaseUser = (name) => {
return name.toUpperCase()
}
const toLowerCaseUser = (name) => {
return name.toLowerCase();
}
module.exports = {
getUser,
toUpperCaseUser
}
では、index.jsファイルのgetUser関数を右クリックしましょう。コードのリファクタリングに役立ついくつかのオプションが表示されます。以下はその短いリストです。
- 定義へ移動: 関数が定義されている場所を表示するペインを開きます
- 実装へ移動:
modules/users/retrieve.jsファイルの関数定義へ連れて行きます - すべての参照を検索: 関数が使用されているすべての場所を表示し、ファイル内の各関数の使用を表示します
上記のコマンドは、Visual Studio Codeで機能の定義をすばやくナビゲートし、見つけるために最も便利です。たとえば、特定の関数がどのファイルで使用されているかを把握したい場合、これらのコマンドを使用してそのようなタスクをすばやく解決することができます。
2. インポートとファイル名を自動的に修正する
コードのリファクタリング時には、不適切に選ばれたファイル名を批判することを避けられないことがしばしばです。その上、コードをリファクタリングするということは、異なるファイル間でコードを移動したり、特定のモジュールの目的を変更したりすることを意味します。したがって、リファクタリングが終了した後に破損したインポートが発生することは非常に一般的です。
すべてのファイルを手動でスキャンして破損したインポートを見つける煩わしさをお省きするために、Visual Studio Codeがこれをサポートしてくれます。Visual Studio Codeで初めてファイル名を変更するとき、インポートを自動的に更新するかどうか尋ねられます。ここで、「常に自動的にインポートを更新する」オプションを選択してください。前の例で述べたretrieve.jsファイルの名前を変更することで試すことができます。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/stepsize/how-to-refactor-code-in-visual-studio-code-2h9d
