プログラミング初心者のためのVS Codeデバッグ入門！

Python

プログラミングを始めるにあたって、多くの開発者に愛用されているVS Code（Visual Studio Code）を使っている方も多いでしょう。

VS Codeは、無料でありながら高機能なコードエディタとして、世界中で人気があります。

コードを書くのは楽しいものですが、「実行」ボタンを押した際に、画面に赤い「エラー発生」の文字が表示されると、少し気持ちが沈んでしまうこともありますよね。

エラーが出ると、「何が原因なんだろう…」「どこを直せばいいの？」と途方に暮れてしまうことも少なくないはずです。

でも大丈夫！エラーはプログラミングにはつきもの。そして、そのエラーの原因を見つけて直すための、強力な味方となる機能が、VS Codeに標準搭載されているんです。

それが「デバッグ機能」です！

この記事では、VS Codeのデバッグ機能の基本的な使い方を、プログラムが初めて、あるいは始めたばかりの皆さんに向けて、実際にコードを動かしながら、分かりやすく解説します。

VS Codeのインストール方法や基本的な使い方は、別の記事で詳しく解説していますので、そちらをご参照ください。

【超初心者向け】WindowsにVSCodeで最初のPythonコードを実行してみよう！ - 日本語化・ステップ実行体験 -
今回は、Windowsパソコンに「VSCode」という人気のプログラムエディタをインストールし、簡単なPythonコードを実行するまでの手順を、特にプログラミング初心者の方に向けて、より丁寧に解説します。この記事を読み終える頃には、皆さんは...
daredemopro.com
2025.04.18

デバッグ機能をマスターして、エラーを怖がらずに、サクサクと開発を進められるようになりましょう！

プログラミングの「バグ」って何？なぜデバッグが必要なの？

まず、プログラミングでよく聞く「バグ」とは何なのか、そして、なぜ「デバッグ」という作業が必要なのかを理解しましょう。

バグ（Bug）とは？

バグ（Bug）とは、プログラムに含まれる間違いや不具合のことです。

人間がコードを書く以上（またはAIでも）、どんなに注意してもミスをしてしまう可能性があります。例えば、タイプミスや、処理の手順を間違えてしまうことなどがバグの原因になります。

その昔、実際にコンピューターの中に虫（Bug）が入り込んで不具合を起こしたことが「バグ」という言葉の語源になったという話もあります。

バグがあるとどうなるの？

プログラムにバグがあると、以下のような問題が発生します。

  • プログラムが途中で停止してしまう（エラーメッセージが表示される）
  • 計算結果や表示される内容が間違っている
  • ボタンをクリックしても反応がない、など意図しない動作をする

このような状態では、プログラムとして正しく動いていないので、作ったものが役に立ちません。

デバッグ（Debug）とは？なぜ必要なの？

デバッグ（Debug）とは、プログラムに含まれるバグを見つけ出し、それを取り除くか、またはそれを許容できるように修正する作業全般のことです。

「Debug」は「Bug（バグ）」を「De-（取り除く）」という意味ですね。

デバッグができることは、プログラマーにとって非常に重要なスキルです。

なぜなら、どんなプログラムにもバグが潜む可能性があるからです。

デバッグスキルがあれば、自分でバグの原因を特定し、問題を解決できるようになります。

これは、プログラミングの学習を効率的に進める上でも、実際に何か動くものを作る上でも、欠かせない力になります。

Printによるデバッグの限界とデバッガーの必要性

初心者の頃、エラーの原因を探るためによく行うのが、プログラムの途中に print() 関数などを入れて、変数の中身を表示させてみる方法です。

Printデバッグは手軽ですが、コードが長くなったり複雑になったりすると、Print文だらけになってコードが読みにくくなったり、本当に知りたいタイミングでの変数の中身が見られなかったりすることがあります。

そこで役立つのが、VS Codeに標準搭載されているような「デバッガー」というツールです。

デバッガーを使えば、Printデバッグよりもずっと効率的で強力な方法で、プログラムの内部を探ることができます。

また、デバッガーを使うことで、プログラムが書かれたコードの通りに、どのような順序で、どのような状態（変数の値など）で実行されていくのかを、実際に目で追うことができます。

これにより、「なぜこの結果になるのだろう？」「なぜここでエラーになるのだろう？」といった疑問に対して、プログラムの内部の「動き」を観察することで、より深く理解することができるようになります。

これは、単にコードを読むだけでは得られない、貴重な学びとなります。

VS Codeのデバッグ機能を使うメリット

VS Codeのデバッグ機能（デバッガー）を使うことで、Printデバッグでは難しかった以下のようなことが簡単にできるようになります。

  • コードの実行を「好きな場所」で一時停止できる（ブレークポイント）: Print文をたくさん書かなくても、調べたい行でプログラムの実行を一時的に止めることができます。
  • プログラムが止まった時の「変数の中身」をまとめて確認できる: その瞬間のプログラムの状態、特に変数にどんな値が入っているのかを一覧で簡単にチェックできます。
  • プログラムの実行を「一行ずつ」進められる（ステップ実行）: コードがどのように実行されていくのかを追うことができます。
  • プログラムが止まっている間に「簡単な式を評価したり」「変数の中身を確認したり」できる（デバッグコンソール）: コードを書き換えずに、その場でちょっとした確認やテストができます。

デバッガーは、プログラムの「実行中の様子」を「見える化」してくれるツールです。

これらを活用することで、バグの原因を効率的に特定し、修正できるようになります。

準備をしよう！デバッグ対象のコードを用意してVS Codeで開く

それでは、実際にVS Codeのデバッグ機能を体験するための準備をしましょう。デバッグ対象として、リストの合計を計算する簡単なPythonコードを使います。このコードには、意図的にバグ（間違い）を一つ仕込んであります。

以下の手順で進めてください。

  1. 作業用フォルダを作成: デスクトップなど、分かりやすい場所に新しいフォルダを作成します。ここでは例として「vscode_debug_tutorial」という名前にしましょう。
  2. VS Codeでフォルダを開く: VS Codeを開き、メニューの「ファイル」→「フォルダーを開く」を選択し、先ほど作成した「vscode_debug_tutorial」フォルダを選んで開きます。
  3. calculate_sum.pyを新規作成: VS Codeの左側のエクスプローラービューで、開いたフォルダ名（vscode_debug_tutorial）の上で右クリックし、「新しいファイル」を選択します。ファイル名に「calculate_sum.py」と入力し、Enterキーを押します。
  4. コードを貼り付ける: 新しく作成された calculate_sum.py ファイルに、以下のコードをコピー＆ペーストします。
# calculate_sum.py

# 数字のリストを用意します
numbers = [10, 20, 30, 40, 50]

# リストの合計値を計算するプログラムです
total = 0 # 合計を保持する変数。最初は0で初期化

# リストの各要素を順番に取り出して合計に加えていきます
# ★このfor文の書き方に、実は間違い（バグ）が一つ隠れています！
for i in range(len(numbers) - 1): # ここが怪しいかも...？
    current_number = numbers[i]
    total = total + current_number
    # デバッグ中は、ここで total や current_number がどうなっているか見てみましょう！

# 計算した合計を表示します
print(f"リストの合計は: {total} です")

# --- プログラムはここまで ---

# ★本来、このリストの合計は 10 + 20 + 30 + 40 + 50 なので、「150」になるはずです。
# ★しかし、このプログラムを実行すると、なぜか「100」と表示されてしまいます。
# ★デバッグ機能を使って、なぜ150にならないのか原因を探してみましょう！
  • ファイルを保存する: コードを貼り付けたら、ファイルを保存します（メニューの「ファイル」→「保存」または Ctrl+Sキーを押す）。
  • まず普通に実行してみる: デバッグを開始する前に、まずはこのプログラムを通常通り実行してみましょう。VS Codeの右上の「▶」（実行ボタン）をクリックするか、ターミナル（Ctrl+@キーを押す）を開いて python calculate_sum.py と入力して実行します。
  • 「100」と表示されるているはずです。10、20、30、40、50を合計すると「150」になるはずですが、これが今回デバッグで見つけるバグです。

デバッグの基本操作：ブレークポイントとステップ実行

いよいよデバッグの核心部分です。プログラムを**「止める」ブレークポイントと、「一行ずつ進める」ステップ実行**の操作を学びましょう。

デバッグの要！ブレークポイントをセットしよう

ブレークポイントは、プログラムの実行を一時停止させる「目印」です。バグがありそうな場所や、プログラムのその時点での状態を確認したい行に設定します。

  1. VS Codeで calculate_sum.py ファイルを開いてください。
  2. プログラムの実行を止めたい行（今回は for i in range(len(numbers) - 1): の行に設定してみましょう）の行番号の左側をクリックします。
  3. クリックした行番号の左側に赤い丸が表示されれば成功です！これがブレークポイントです。

ブレークポイントを解除したい時は、赤い丸をもう一度クリックすればOKです。

デバッグ実行を開始して一時停止させてみよう

ブレークポイントを設定したら、デバッグ実行を開始します。

VS Codeのメニューバーの「実行」→「デバッグの開始」を選択します。（またはF5キーを押す）

デバッガーの選択で「Python Debugger」、デバッグ構成で「Python ファイル」を選択します。

プログラムが実行され、設定したブレークポイントの行（for i in range(...) の行）に到達すると、プログラムの実行が自動的に一時停止します。

ブレークポイントが設定された行が黄色くハイライトされているはずです。

この黄色くハイライトされた行は、次に実行される行であり、まだ実行されていないことに注意してください。

プログラムが一時停止すると、VS Codeの画面上部に小さな「デバッグツールバー」が表示されます。

このツールバーを使って、一時停止中のプログラムの実行をコントロールします。

VS Codeのデバッグ画面に慣れよう！

デバッグ対象のコード (calculate_sum.py) をVS Codeで開いた状態で、プログラムがブレークポイントで一時停止した状態になっていることを確認してください。

画面左側にある、「実行とデバッグ (Run and Debug)」ビューを見てみましょう。

もし開いていない場合は、縦に並んだアイコンの中の「虫」のマークをクリックして開いてください。

プログラムが一時停止すると、「実行とデバッグ」ビューには、開いている calculate_sum.py のコードに関連する情報が表示されます。

いくつかのセクションに分かれています。

ここで主に使うのは以下の4つです。

  • 変数 (Variables): プログラムが一時停止した時に、あなたのコード（calculate_sum.py）の中で使われている変数、例えば numbers や total、i、current_number といった変数の名前と、その瞬間の値が表示されます。ここを見ることで、「あれ？この変数、自分が思っていた値と違うな？」といったことに気づけます。
  • ウォッチ (Watch): あなたが特に値を監視したい変数（例えば total や i）を自分で登録しておくと、プログラムが止まるたびにその値が表示されるセクションです。気になる変数を登録しておくと便利です。
  • コールスタック (Call Stack): プログラムが実行中のとき、現在呼び出されている関数の「履歴」が表示されます。今回の簡単なコードではあまり複雑になりませんが、将来的に複数の関数を使うようになった場合に役立ちます。
  • ブレークポイント (Breakpoints): あなたが calculate_sum.py のコードに設定したブレークポイント（一時停止する目印）が一覧で表示されます。ここから設定したブレークポイントを確認したり、一時的に有効/無効を切り替えたりできます。

まずは「変数」と「ウォッチ」セクションが、デバッグ中にプログラムの内部状態を知るために重要であることを覚えておいてください。

プログラムを一行ずつ追う：ステップ実行

プログラムが一時停止したら、デバッグツールバーを使って一行ずつ実行を進めてみましょう。

これが「ステップ実行」です。

デバッグツールバーの左から2番目、3番目、4番目にあるボタンがステップ実行に関係するボタンです。

  • 続行 (F5): プログラムの実行を再開し、次に有効なブレークポイントに到達するまで実行を進めます。もし他にブレークポイントがなければ、プログラムはそのまま最後まで実行されます。
  • ステップオーバー (F10): 現在黄色くハイライトされている行（一時停止している行）の処理を実行し、コードの次の行に進みます。もし現在の行が関数呼び出しでも、関数の中には入らずに関数全体の処理を終えた後の行に進みます。（今回のコード例では関数を使っていないので、基本的にはこのボタンでOKです。）
  • ステップイン (F11): 現在黄色くハイライトされている行を実行します。もし現在の行が関数呼び出しの場合、その関数の中に入って、関数の一行目から処理を追うことができます。
  • ステップアウト (Shift+F11): 現在、関数の中に「ステップイン」で入っている場合に、その関数の一番外側（関数を呼び出した場所の次の行）まで一気に処理を進めて戻ります。
  • 再起動 (Ctrl+Shift+F5): 現在のデバッグセッションを終了し、プログラムの最初からデバッグ実行をやり直します。
  • 停止 (Shift+F5): 現在のデバッグセッションを終了し、プログラムの実行を完全に停止します。

まずは「ステップオーバー (F10)」を使って、calculate_sum.py のコードが一行ずつ実行されていく様子を追ってみましょう。

ブレークポイントで止まったら、デバッグツールバーの「ステップオーバー」を繰り返しクリックしてみてください。黄色いハイライトがコードを一行ずつ移動するのが分かります。

プログラムの中身を可視化！変数とウォッチ

プログラムがブレークポイントやステップ実行で一時停止している間に、「その瞬間のプログラムがどんな状態になっているか」を知ることが、デバッグにおいては非常に重要です。

そのために使うのが「変数」セクションと「ウォッチ」セクションです。

変数 (Variables) セクションの観察

プログラムが for i in range(...) の行で一時停止している状態から、「ステップオーバー」を一度クリックしてみてください。実行が current_number = numbers[i] の行に進みますね。

この状態でデバッグビューの「変数 (Variables)」セクションを見てください。numbers というリスト変数、total という数値変数が見えるはずです。そして、for ループが1回目の繰り返しに入ったので、i という変数も出現し、その値が 0 になっているのが確認できます。

次に、もう一度ステップオーバーしてください。

current_number = numbers[i] の行が実行され、current_number という変数も出現し、numbers[0] の値である 10 が入っているのが分かります。

このように、プログラムが一時停止した瞬間に、その場所で使える変数の名前と値がここに表示されるのです。「あれ？ total がまだ 0 のままだな」「i が思っていた値と違うぞ？」といった確認が、Print文なしで簡単にできます。

ウォッチ (Watch) セクションを使ってみよう:

「ウォッチ」セクションの「＋」ボタンをクリックするか、「式を入力」と書かれた場所をクリックして、監視したい変数の名前（例: total）を入力し、Enterキーを押してください。

この後、ステップ実行を繰り返してループを進めてみてください。ループが進むごとに、ウォッチセクションの total の値が 0 → 10 → 30 → 60 → 100 と変化していくのが確認できるはずです。

気になる変数の値の動きを追うのに非常に便利な機能です。

コールスタックとデバッグコンソール

デバッグの基本的な操作として、コールスタックとデバッグコンソールについても簡単に触れておきましょう。

コールスタック (Call Stack)

デバッグビューの「コールスタック」セクションには、プログラムがどのように関数を呼び出して現在の場所にたどり着いたかの履歴が表示されます。

今回のコード例はシンプルなので、おそらくファイル名（calculate_sum.py）のような表示になっているだけかと思います。

複数の関数が複雑に呼び出されるプログラムでエラーが発生した時に、エラーに至るまでの関数の呼び出し順序を確認するのに役立ちます。

デバッグコンソール (Debug Console)

VS Codeの下部にあるパネル（ターミナルなどが表示されている場所）に、「デバッグコンソール」というタブがあります。プログラムが一時停止している間に、このコンソールを使って様々なことを試すことができます。

例えば、プログラムが一時停止している状態で、デバッグコンソールの入力欄に total と入力してEnterキーを押すと、その時点での total の値が表示されます。numbers[i] と入力してEnterキーを押せば、現在の i の値に対応するリストの要素が表示されます。

簡単な計算式（例: total * 2）を確認することも可能です。

コードを書き換えずに、プログラムが止まっているその場で色々な値を確認したり簡単なテストをしたりできる、非常に便利な機能です。

【実践！】デバッグ機能でコードのバグを見つけよう

それでは、これまでに学んだブレークポイント、ステップ実行、変数・ウォッチの機能を活用して、calculate_sum.py のコードに仕込まれたバグの原因を特定し、修正しましょう！

バグの内容は、リストの合計が本来 150 になるはずなのに、実行すると 100 になってしまう、というものでした。

  1. デバッグ開始: calculate_sum.py を開き、for i in range(...) の行にブレークポイントを設定します。そしてデバッグ実行を開始します。
  2. ループ開始前の確認: プログラムがブレークポイントで止まったら、「変数」セクションで numbers や total の初期値を確認します。
  3. ループの追跡（ステップオーバー）: デバッグツールバーの「ステップオーバー」ボタンを繰り返しクリックして、ループの中の処理 (current_number = numbers[i] と total = total + current_number) が順番に実行されていく様子を追います。
  4. 変数の値の変化を観察（変数/ウォッチ）: ステップ実行を進めるたびに、「変数」セクションや「ウォッチ」セクション（total と i をウォッチに追加しておくと便利です）を見て、i の値がどう変わるか、total の値がどのように増えていくかを観察します。
    • 1回目のループ: i は 0、total は 10 になる。
    • 2回目のループ: i は 1、total は 10 + 20 = 30 になる。
    • 3回目のループ: i は 2、total は 30 + 30 = 60 になる。
    • 4回目のループ: i は 3、total は 60 + 40 = 100 になる。
  5. ループの終了を観察: i が 3 の時の処理を終えて、もう一度ステップオーバーすると、プログラムがループから抜け出し、print(...) の行にジャンプするのが分かります。
  6. バグの原因に気づく: numbers リストには5つの要素（インデックスは 0, 1, 2, 3, 4）があるのに、ループが i が 3 の時点で終わってしまい、最後の要素（50、インデックス 4）が合計に加算されていないことに気づきます。「変数」セクションで numbers リストを確認し、インデックスが 0 から 4 まであることを改めて見ると良いでしょう。
  7. 原因の特定: ループの条件を決定している for i in range(len(numbers) - 1): の行をよく見ます。len(numbers) は 5 なので、len(numbers) - 1 は 4 です。Pythonの range(n) は、0 から n-1 までの数値を生成します。つまり、range(4) は 0, 1, 2, 3 という数値を生成します。ああ！原因が分かりました！range() に len(numbers) - 1 (4) を渡してしまっているため、ループが i=4 の時の処理（リストの5番目の要素、インデックス 4 の要素）を実行する前に終了してしまっていたのです。これが合計が 100 になった理由でした。
  8. バグの修正: デバッグセッションを停止します（デバッグツールバーの停止ボタン）。コードを修正します。for i in range(len(numbers) - 1): を for i in range(len(numbers)): に変更します。
  9. 修正の確認: コードを保存し、再度通常通りに実行します。今度は リストの合計は: 150 です と表示されるはずです。デバッグ機能を使って、無事バグを見つけて修正できました！

どうでしょう？このようにデバッグ機能を使うと、プログラムが期待通りに動かない時に、「どこで」「なぜ」間違った状態になっているのかを、Print文よりもずっと詳しく、効率的に調べることができます。

デバッグ効率を上げるためのコツ

デバッグは経験を積むことでどんどん上達します。以下に、デバッグをより効率的に行うためのコツをいくつかご紹介します。

  • エラーメッセージに注目: エラーが出たら、まずは表示されたメッセージをじっくり読んでみましょう。エラーの種類、発生場所（ファイル名と行番号）は必ず確認します。最初は難しくても、たくさんのエラーに触れるうちに、メッセージから原因を推測する力がついてきます。もし英語が難しければ、そのまま翻訳ツールに入れてみましょう。
  • 怪しい場所に絞ってブレークポイントを置く: プログラムの全てを一行ずつ追う必要はありません。エラーメッセージで示された場所の周辺や、「この変数の値がここで変わるはずなのに…」といった怪しいと思った場所にピンポイントでブレークポイントを設定しましょう。
  • 期待する状態をイメージする: 「この行を実行する前は、この変数は〇〇という値になっているはず」「このループは何回繰り返されるはず」といった、プログラムが正しく動いた場合の理想の状態をイメージしながらデバッグを進めると、現実とのギャップに気づきやすくなります。
  • 段階的にデバッグする: まずPrint文で大まかな怪しい範囲を絞り込み、次にデバッガーでその範囲を詳細に調べる、というように Printデバッグとデバッガーを組み合わせて使うのも有効です。
  • コードを少しずつ変更する: バグの修正は、一度に大きく変更せず、原因と思われる箇所を少しずつ修正しては動作確認することを繰り返しましょう。そうすることで、修正自体が原因で新しいバグを生むリスクを減らせます。

さらにステップアップしたい方へ（応用機能のご紹介）

今回の記事では、デバッグの基本（ブレークポイント設定、ステップ実行、変数確認など）をマスターすることに焦点を当てました。VS Codeのデバッグ機能には、他にもデバッグを効率化するための便利な応用機能があります。

  • 条件付きブレークポイント: ブレークポイントで止まる際に、「特定の条件（例: 変数iの値が 10 になったときだけ）が満たされた時だけ」一時停止させる機能です。ループ処理などで、特定の条件が満たされた時の状態だけを見たい場合に非常に役立ちます。
  • ヒットカウントブレークポイント: ブレークポイントが「指定した回数（例: 5回目のループに入ったとき）」通過した後に一時停止させる機能です。「このループ処理の100回目だけ調べたい」といった場合に役立ちます。
  • ログポイント: プログラムを一時停止させることなく、ブレークポイントの行に到達した際に指定したメッセージや変数の値をデバッグコンソールに出力する機能です。これはPrintデバッグに似ていますが、コード自体を書き換えずに設定・解除できる点が便利ですし、デバッグが完了したら一覧から無効化・削除しやすいというメリットもあります。

これらの応用機能は、デバッグの基本的な流れに慣れてきてから学ぶのがおすすめです。

より複雑なバグや、大規模なプログラムのデバッグを行う際に、きっとあなたの強力な味方になってくれるでしょう。

興味が出てきたら、ぜひVS Codeの公式ドキュメントなども参考に、色々な機能を試してみてください。

まとめ

この記事では、プログラミング初心者向けに、VS Codeのデバッグ機能の基本的な使い方を、実際にコードを動かしながら解説しました。

バグはプログラミングにはつきもの。そして、デバッグはバグを見つけて直すための必須スキルです。

VS Codeのデバッグ機能を使えば、ブレークポイントで実行を一時停止させ、ステップ実行でコードを一行ずつ追いかけ、変数ビューやウォッチビューでプログラムの中身を詳細に観察できます。

これらの機能を活用することで、Printデバッグよりも効率的に、バグの原因を特定し、修正することができます。

最初は慣れない操作に戸惑ったり、バグの原因になかなかたどり着けなかったりするかもしれません。でも、エラーが出た時こそデバッグ機能を試すチャンスだと思って、練習を重ねてみてください。

デバッグ機能を使いこなせるようになれば、エラーを恐れる気持ちが減り、コードを書くこと、そして自分の力で問題を解決できることが、もっともっと楽しくなるはずです！

皆さんのプログラミング学習・開発が、VS Codeのデバッグ機能を味方につけて、よりスムーズで楽しいものになることを願っています。

コメント

タイトルとURLをコピーしました