ここではVSCodeの機能である「実行とデバッグ」について学んでいきます。この機能を使いこなすのはなかなか難しいので、ここでは使っている例を示しています。「こういうものがあるんだ」ということを知っておくと、必要なときに使い方を調べられるので、ぜひ頭に入れておいてください。

まずデバッグとは「ソースコードの問題を修正する作業のこと」で、実行とデバッグという機能は「編集中のファイルをその場で実行して、プログラムの挙動を確認しながらコードを編集できる機能」のことをいいます。

ここではJavaScriptのコードを見ながら学んでいきます。まずはじめに、リンクをクリックしてlaunch.jsonという設定ファイルを作成します。これは実行とデバッグを行うために必要なファイルになります。環境は、ここでは例としてNode.jsを選択してみます。

これでデバッグが可能になりました。例えばこのコードを実行してみると、このようにコンソールに実行結果が表示されました。

また、好きなところでブレークポイントというものを設定できます。これはプログラムを中断する場所を設定できる機能です。例えばここにブレークポイントを設置してみて、プログラムを実行してみます。すると、実行の途中でプログラムが止まりました。

ここで例えばcolorsと入力してみると、変数の中身を表示してくれます。このように、「変数の中身は何だろう？」みたいな確認ができて、結果としてソースコードの修正にとても役に立ちます。

以上が実行とデバッグの簡単な使い方ですが、詳しくは「VSCode 実行とデバッグ 使い方」などで検索すると、もっと詳しく学べます。ここではVSCodeの実行とデバッグの概要だけは頭に入れておいて、必要なときにこの機能について詳しく学べるようにぜひしておいてください。