TOP
記事一覧
リファクタリング【VSCode Javasctipt Python】

リファクタリング【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)

関数を分割することで、テストしやすく、読みやすいコードになりました。