リファクタリング【VSCode Javasctipt Python】
更新日:2025/02/04

はじめに
プログラムを開発していると、最初は動けばOKと思って書いたコードが、後々見づらくなったり、修正がしにくくなったりすることがあります。そうしたときに役立つのがリファクタリングです。
本記事では、VSCodeを使用してJavaScriptとPythonのコードをリファクタリングする方法について紹介します。
1. VSCodeでのリファクタリング機能
VSCodeには、リファクタリングをサポートするさまざまな機能が備わっています。
主なリファクタリング機能
- コードの整形 (Format Document):Prettier や Black などのフォーマッターを使用
- 変数名・関数名の一括変更 (Rename Symbol):
F2
キーで実行 - 関数の抽出 (Extract Function/Variable):選択範囲を新しい関数や変数に変換
- コードアクション (Quick Fix, Ctrl + .):不要なインポートの削除や、より最適な記述への変更提案
2. JavaScriptのリファクタリング
1. コードの自動フォーマット
VSCodeでPrettierを利用して、コードを自動整形するには、まず拡張機能をインストールし、設定を行います。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
この設定をsettings.json
に追加すると、保存時に自動でフォーマットされます。
2. 冗長なコードの削減
リファクタリング前:
function greet(name) {
if (name === undefined || name === null) {
return "Hello, Guest!";
} else {
return "Hello, " + name + "!";
}
}
リファクタリング後:
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
デフォルト引数とテンプレートリテラルを使用して、可読性を向上させました。
3. 関数の分割 (Extract Function)
長い関数は、ロジックを分割して読みやすくするのが基本です。
リファクタリング前:
function processUser(user) {
console.log("Fetching user data...");
fetch(`/api/user/${user.id}`)
.then((res) => res.json())
.then((data) => {
console.log("User data: ", data);
});
}
リファクタリング後:
function fetchUserData(userId) {
return fetch(`/api/user/${userId}`).then((res) => res.json());
}
function processUser(user) {
console.log("Fetching user data...");
fetchUserData(user.id).then((data) => console.log("User data: ", data));
}
関数を分割することで、再利用性とテストのしやすさが向上します。
リファクタリング例
// 注文の内訳を出力する関数
function statement(invoice, plays) {
// 合計金額
let totalAmount = 0;
// ボリュームクレジット
let volumeCredits = 0;
// 結果を格納する文字列
let result = `Statement for ${invoice.customer}\n`;
// 通貨形式に変換する関数
const format = new Intl.NumberFormat("en-US", {
// 通貨形式
style: "currency",
// 通貨
currency: "USD",
// 小数点以下の桁数
minimumFractionDigits: 2,
}).format;
for (let perf of invoice.performances) {
const play = plays[perf.playID];
let thisAmount = 0;
switch (play.type) {
case "tragedy":
thisAmount = 40000;
if (perf.audience > 30) {
thisAmount += 1000 * (perf.audience - 30);
}
break;
case "comedy":
thisAmount = 30000;
if (perf.audience > 20) {
thisAmount += 10000 + 500 * (perf.audience - 20);
}
thisAmount += 300 * perf.audience;
break;
default:
throw new Error(`unknown type: ${play.type}`);
}
// ボリュームクレジットを加算
volumeCredits += Math.max(perf.audience - 30, 0);
// comedyの場合は10人以上の観客が来たらクレジット加算
if ("comedy" === play.type) volumeCredits += Math.floor(perf.audience / 5);
// 注文の内訳を出力
result += `${play.name}: ${format(thisAmount / 100)} (${perf.audience} seats)\n`;
totalAmount += thisAmount;
}
result += `Amount owed is ${format(totalAmount / 100)}\n`;
result += `You earned ${volumeCredits} credits\n`;
return result;
}
コードを関数にまとめて、何をしているかわかる名前をつける
何らかの意味のあるコードの塊を関数化し、要約した名前をつけます「関数の抽出」
上記をするうえで注意しなければならい点があります
スコープ外になる変数がないかの確認です
スコープ外とは
グローバルスコープ (Global Scope)
- どこからでも参照できる変数・関数など。
- ブラウザ環境では
window
オブジェクト、Node.js ではglobal
オブジェクトがグローバルオブジェクトになる。
関数スコープ (Function Scope)
- 関数の中で宣言した変数は、その関数の中でのみ有効。
- 関数の外からは同名の変数を参照しても、関数内で宣言されたものにはアクセスできない。
var
はこの関数スコープに従う。
ブロックスコープ (Block Scope)
- ES6 以降で導入された
let
やconst
で宣言した変数は、{ ... }
で囲まれたブロックの中だけ有効。 - if 文や for 文の中の
{}
もブロックとして扱われ、そこで宣言した変数はそのブロックの外からは参照できない。
3. Pythonのリファクタリング
1. コードの自動フォーマット
Pythonではblack
を使用するのが一般的です。
pip install black
VSCodeで自動フォーマットを有効にするには、settings.json
に以下を追加します。
{
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.formatOnSave": true
}
2. 冗長な条件分岐の削減
リファクタリング前:
def greet(name):
if name is None:
return "Hello, Guest!"
else:
return "Hello, " + name + "!"
リファクタリング後:
def greet(name="Guest"):
return f"Hello, {name}!"
デフォルト引数とf-stringを活用して、よりシンプルにしました。
3. 長い関数の分割
リファクタリング前:
def process_user(user):
print("Fetching user data...")
response = requests.get(f"https://api.example.com/user/{user['id']}")
data = response.json()
print("User data:", data)
リファクタリング後:
import requests
def fetch_user_data(user_id):
response = requests.get(f"https://api.example.com/user/{user_id}")
return response.json()
def process_user(user):
print("Fetching user data...")
data = fetch_user_data(user["id"])
print("User data:", data)
関数を分割することで、テストしやすく、読みやすいコードになりました。
4. まとめ
- VSCodeのリファクタリング機能を活用すると、簡単にコードを整理できる
- JavaScriptでは、冗長なコードを減らし、関数を分割するのが重要
- Pythonでは、
black
を使った自動フォーマットや関数の分割が有効 - 可読性とメンテナンス性を向上させることを意識しながらリファクタリングを行う
リファクタリングを習慣化すれば、コードの品質が向上し、バグの発生も減らせます。ぜひ、VSCodeを活用して効率的なリファクタリングを行ってみてください!

-
検索
(例) debug search etc.. -
カテゴリー