C言語GUI入門｜Visual Studio Codeをインストールする

Visual Studio Codeは、C言語のソースファイルを作成、編集するために使用するコードエディターです。

この節では、Visual Studio CodeをWindowsへインストールし、次の設定を行います。

  1. 公式サイトからインストーラーをダウンロードする
  2. Visual Studio CodeをWindowsへインストールする
  3. 画面を日本語表示に切り替える
  4. MicrosoftのC/C++拡張機能をインストールする
  5. ファイルをUTF-8で保存するように設定する
  6. インストールと設定の結果を確認する

Visual Studio Codeは、ソースコードの編集やファイル管理、統合ターミナルの表示を担当します。C言語のコンパイルは、すでにMSYS2 UCRT64環境へインストールしたGCCが担当します。

ソフトウェア主な役割
Visual Studio Codeソースファイルの作成と編集
C/C++拡張機能入力支援、エラー表示、コードの色分け
GCCC言語のコンパイルとリンク
GTK 4GUI機能の提供
MSYS2 UCRT64GCCやGTK 4を利用する開発環境

Visual Studio CodeとVisual Studioは、名前が似ていますが別のソフトウェアです。本コンテンツで使用するのは、Visual Studio Codeです。

Visual Studio Codeをダウンロードする

Visual Studio Codeは、Microsoftが提供する公式サイトからダウンロードします。

次のページをWebブラウザーで開きます。

Visual Studio Code公式ダウンロードページ：https://code.visualstudio.com/Download

似た名前の非公式サイトではなく、URLのドメインがcode.visualstudio.comであることを確認しましょう。

Windowsのシステムの種類を確認する

Visual Studio Codeのダウンロードページには、使用するCPUに応じて複数のインストーラーが用意されています。

一般的なIntel製またはAMD製CPUを搭載した64ビットWindowsパソコンでは、x64版を選択します。ARM版Windowsを搭載したパソコンでは、Arm64版を選択します。

Windows 11では、次の手順で確認できます。

  1. Windowsのスタートボタンをクリックする
  2. 設定を開く
  3. システムを選択する
  4. バージョン情報を選択する
  5. システムの種類を確認する

確認結果と選択するインストーラーの関係は、次のとおりです。

システムの種類選択する種類
x64ベースプロセッサx64
ARMベースプロセッサArm64

一般的なWindowsパソコンで、システムの種類にx64ベースプロセッサと表示されていれば、x64版を選びます。

User InstallerとSystem Installerの違い

Windows向けのVisual Studio Codeには、主に次のインストール方法があります。

種類インストール対象管理者権限主な用途
User Installer現在のWindowsユーザー原則不要個人で使用するパソコン
System Installerパソコンを使うすべてのユーザー必要共用パソコン
ZIP版展開したフォルダー原則不要手動で管理したい場合

本コンテンツでは、x64版のUser Installerを使用します。

Microsoftの公式ドキュメントでも、多くの利用者にはUser Installerが推奨されています。管理者権限を必要とせず、バックグラウンドでの更新も行いやすい方法です。

会社や学校から支給されたパソコンでは、ソフトウェアのインストールが制限されている場合があります。その場合は、管理者へ確認してから進めてください。

User Installerをダウンロードする

公式ダウンロードページで、WindowsのUser Installerにあるx64を選択します。

ダウンロードされるファイルは、次のような名前です。

VSCodeUserSetup-x64-バージョン.exe

実際のファイル名には、Visual Studio Codeのバージョン番号が入ります。

ダウンロードしたファイルは、通常、次のフォルダーへ保存されます。

C:\Users\ユーザー名\Downloads

エクスプローラーでダウンロードフォルダーを開き、VSCodeUserSetupから始まるexeファイルがあることを確認します。

図1：Visual Studio Codeを公式サイトから入手する

この図から分かること

一般的な64ビットWindowsパソコンでは、公式サイトからx64版のUser Installerをダウンロードします。

Visual Studio Codeには複数のインストール方法がありますが、個人で使用するパソコンではUser Installerが扱いやすいでしょう。ダウンロード前に、Windowsのシステムの種類を確認しておくことが大切です。

Visual Studio Codeをインストールする

ダウンロードしたインストーラーを実行します。

  1. エクスプローラーでダウンロードフォルダーを開く
  2. VSCodeUserSetupから始まるexeファイルを確認する
  3. インストーラーをダブルクリックする
  4. セキュリティの確認画面が表示された場合は内容を確認する
  5. セットアップ画面を開く

ダウンロードしたファイルがMicrosoftの公式サイトから取得したものであることを確認してから進めましょう。

インストーラーの実行

ダウンロードした VSCodeUserSetup-x64-（バージョン情報）.exe をダブルクリックして、セットアップを開始します。公式の Windows セットアップ手順でも、ダウンロード後に VSCodeUserSetup-{version}.exe を実行する流れになっています。

使用許諾契約を確認する

最初に、使用許諾契約の画面が表示されます。

内容を確認し、同意する項目を選択して次へ進みます。同意しない場合は、インストールを続けられません。

インストーラーのバージョンやWindowsの表示言語によって、画面内の文章やボタン名が多少異なる場合があります。

インストール先を確認する

User Installerでは、通常、現在のWindowsユーザー用のフォルダーへインストールされます。

標準的な場所は次のとおりです。

C:\Users\ユーザー名\AppData\Local\Programs\Microsoft VS Code

Microsoftの公式ドキュメントでも、User Installerの標準的なインストール先として、この場所が案内されています。

特別な理由がなければ、インストール先を変更する必要はありません。そのまま次へ進みます。

この場所はVisual Studio Code本体の保存先です。これから作成するC言語のソースファイルは、別に用意するC:\cguiへ保存します。

スタートメニューへの登録を確認する

次に、スタートメニューへ作成するショートカットの名前を確認します。

通常は、Visual Studio Codeと表示されます。特別な理由がなければ変更せずに進みます。

スタートメニューへ登録しておくと、Windowsの検索画面からVisual Studio Codeを簡単に起動できます。

追加タスクを選択する

インストーラーには、追加タスクを選択する画面があります。

表示される項目はバージョンによって異なる場合がありますが、主に次のような設定があります。

項目おすすめ役割
デスクトップにアイコンを作成する任意デスクトップから起動できる
エクスプローラーのファイルメニューへ追加する有効ファイルをVisual Studio Codeで開ける
エクスプローラーのフォルダーメニューへ追加する有効フォルダー全体をVisual Studio Codeで開ける
対応するファイルのエディターとして登録する有効ソースファイルを開きやすくする
PATHへ追加する有効ターミナルからcodeコマンドを利用できる

PATHへ追加する項目は有効にしておきましょう。

Visual Studio Codeをインストールしたあと、開いていたターミナルを再起動すると、codeコマンドを利用できるようになります。公式ドキュメントでも、セットアップ後にコンソールを再起動し、code .でフォルダーを開けることが説明されています。

インストールを開始する

設定内容を確認し、インストールを開始します。

インストール中は、Visual Studio Code本体がパソコンへコピーされ、スタートメニューやPATHなどが設定されます。

処理が完了するまで、インストーラーを閉じたり、パソコンの電源を切ったりしないでください。

インストールを完了する

完了画面が表示されたら、Visual Studio Codeを起動する項目が選択されていることを確認し、完了をクリックします。

Visual Studio Codeが自動的に起動しなかった場合は、Windowsのスタートメニューを開き、Visual Studio Codeを検索して起動します。

Visual Studio Codeの初期画面を確認する

Visual Studio Codeを起動すると、ようこそ画面が表示されます。

画面は、おおまかに次の領域で構成されています。

画面の部分主な役割
アクティビティバーエクスプローラーや拡張機能などを切り替える
サイドバーファイルや拡張機能の一覧を表示する
エディターソースファイルを編集する
パネルターミナルやエラー情報を表示する
ステータスバー文字コードや改行コードなどを表示する

この段階では、すべてのボタンを覚える必要はありません。

これから特によく使用するのは、次の部分です。

  • エクスプローラー
  • エディター
  • 拡張機能
  • 統合ターミナル
  • ステータスバー

Visual Studio Codeのバージョンを確認する

インストールされたVisual Studio Codeの情報は、ヘルプメニューから確認できます。

  1. Visual Studio Codeを起動する
  2. ヘルプを選択する
  3. バージョン情報を選択する
  4. バージョン番号が表示されることを確認する

英語表示の場合は、HelpからAboutを選択します。

バージョン番号は、インストールした時期によって異なります。番号が表示されれば、Visual Studio Code本体を起動できています。

Visual Studio Codeを日本語表示にする

Visual Studio Codeは、初期状態では英語で表示される場合があります。

日本語表示にするには、Language Packと呼ばれる拡張機能をインストールします。Visual Studio Codeは英語を標準の表示言語として備え、日本語などの表示にはLanguage Packを使用します。

Windowsの表示言語が日本語の場合は、起動時に日本語Language Packのインストールをすすめる通知が表示されることがあります。

通知が表示された場合は、インストールを選択してVisual Studio Codeを再起動します。

通知が表示されない場合は、次の手順で手動インストールできます。

日本語Language Packを検索する

  1. 左側のアクティビティバーから拡張機能のアイコンをクリックする
  2. 検索欄へJapanese Language Packと入力する
  3. Japanese Language Pack for Visual Studio Codeを選択する
  4. 提供元がMicrosoftであることを確認する
  5. Installをクリックする

拡張機能画面は、次のショートカットでも開けます。

Ctrl+Shift+X

似た名前の拡張機能が表示された場合は、拡張機能名と提供元の両方を確認してください。

１．VS Codeを起動します。

２．左側のサイドバーにある「Extensions（拡張機能）」アイコン（四角が4つ並んだマーク）をクリックします。

３．拡張機能パネル上部の検索ボックス①に「japanese」と入力します。

４．検索結果に表示される「Japanese Language Pack for Visual Studio Code」②をクリックします。

５．拡張機能の詳細画面で「Install（インストール）」ボタンをクリックします。

表示言語を日本語へ変更する

Language Packのインストール後、再起動を促すボタンが表示された場合は、そのボタンをクリックします。

手動で表示言語を変更する場合は、コマンドパレットを使用します。

  1. Ctrl+Shift+Pを押す
  2. Configure Display Languageと入力する
  3. Configure Display Languageを選択する
  4. 日本語またはjaを選択する
  5. Visual Studio Codeを再起動する

日本語表示へ切り替わると、メニューが次のように変わります。

英語表示日本語表示
Fileファイル
Edit編集
Selection選択
View表示
Terminalターミナル
Helpヘルプ
Extensions拡張機能

Visual Studio Codeの公式ドキュメントでも、Ctrl+Shift+Pでコマンドパレットを開き、Configure Display Languageから表示言語を選択する方法が案内されています。

C言語用の拡張機能をインストールする

Visual Studio Code本体だけでもテキストファイルを編集できますが、C言語を扱いやすくするには、MicrosoftのC/C++拡張機能を追加します。

C/C++拡張機能には、主に次の機能があります。

  • C言語のソースコードを色分けする
  • 関数名や変数名の入力候補を表示する
  • 関数やデータ型の情報を表示する
  • 宣言や定義された場所へ移動する
  • 文法や型に関係する問題を表示する
  • デバッグ操作を支援する
  • ヘッダーファイルを探す
  • GCCなどのコンパイラー情報を利用する

これらの入力支援機能は、IntelliSenseと呼ばれます。

図2：日本語化とC/C++拡張機能を導入する

この図から分かること

日本語Language PackとC/C++拡張機能は、目的の異なる拡張機能です。

日本語Language Packは、Visual Studio Codeのメニューや設定画面を日本語表示にします。C/C++拡張機能は、C言語のソースコードを編集するときの入力や確認を支援します。

どちらも提供元がMicrosoftであることを確認してからインストールします。

C/C++拡張機能を検索する

  1. 左側のアクティビティバーから拡張機能を開く
  2. 検索欄へC/C++と入力する
  3. 拡張機能名がC/C++であることを確認する
  4. 提供元がMicrosoftであることを確認する
  5. インストールをクリックする

拡張機能画面は、次のショートカットでも開けます。

Ctrl+Shift+X

C/C++拡張機能の識別子は、次のとおりです。

ms-vscode.cpptools

検索結果に似た名前の拡張機能が複数表示されたときは、提供元と識別子を確認すると見分けやすくなります。

Microsoftの公式ドキュメントでも、拡張機能画面でC++を検索し、C/C++拡張機能をインストールする手順が案内されています。

1. 左側のサイドバーにある➀「Extensions（拡張機能）」アイコン（□が4つ並んだマーク）をクリックします。

2. 拡張機能パネル上部の検索ボックス➁に「C/C++」と入力します。

3. 検索結果に表示される「C/C++」の「インストール」ボタンをクリックします。

C/C++ Extension Packとの違い

検索結果には、C/C++とC/C++ Extension Packの両方が表示される場合があります。

拡張機能内容
C/C++C言語とC++の基本的な編集、入力支援、デバッグ機能
C/C++ Extension PackC/C++を含む複数の拡張機能をまとめたもの

本コンテンツでは、まずC/C++をインストールします。

C/C++ Extension Packを入れても構いませんが、初学者の段階では使用しない機能も一緒に導入されます。必要な機能を把握しやすくするため、最初は基本のC/C++だけで十分です。

C/C++拡張機能はGCCではない

C/C++拡張機能をインストールしても、GCCやGTK 4が自動的にインストールされるわけではありません。

C/C++拡張機能は、コードの編集やデバッグを支援するものです。実際のコンパイルはMSYS2 UCRT64環境にインストールしたGCCが行います。

Microsoftの公式ドキュメントにも、C/C++拡張機能にはコンパイラーやデバッガーそのものは含まれず、別に用意したコマンドラインツールを利用することが説明されています。

役割の違いは、次のようになります。

やりたいこと担当するもの
ソースコードを書くVisual Studio Code
入力候補を表示するC/C++拡張機能
コード上の問題を表示するC/C++拡張機能
ソースファイルをコンパイルするGCC
GUI機能を利用するGTK 4
GCCやGTK 4を管理するMSYS2

C/C++拡張機能の導入を確認する

拡張機能の詳細画面で、インストールの代わりに無効にするやアンインストールが表示されていれば、拡張機能はインストール済みです。

必要に応じて、Visual Studio Codeを再起動します。

この段階では、GCCの自動検出やIntelliSenseの詳細設定をすべて行う必要はありません。MSYS2 UCRT64ターミナルの登録とGCCの設定は、このあとの節で行います。

ファイルをUTF-8で保存する理由

C言語のソースファイルには、日本語のコメントやメッセージを書くことがあります。

文字コードが統一されていないと、次のような問題が起こることがあります。

  • 日本語が文字化けする
  • コンパイラーが文字を正しく読み取れない
  • 別のエディターで開いたときに文字が崩れる
  • ソースファイルごとに文字コードが異なる
  • 配布したファイルをほかの環境で読めない

本コンテンツでは、ソースファイルをUTF-8で保存します。

UTF-8は、日本語を含む多くの文字を扱える文字コードです。Windows以外の環境でも広く利用されているため、ソースファイルの移動や共有にも向いています。

Visual Studio Codeの文字コードをUTF-8に設定する

Visual Studio Codeの設定画面を開きます。

  1. 左下にある管理アイコンをクリックする
  2. 設定を選択する
  3. 設定の検索欄にfiles encodingと入力する
  4. Files: Encodingを探す
  5. 値をUTF-8へ設定する

設定画面は、次のショートカットでも開けます。

Ctrl+,

日本語表示では、Files: Encodingの説明に既定の文字エンコードを設定する内容が表示されます。

内部的な設定名は次のとおりです。

files.encoding

設定値は次のとおりです。

utf-8

Visual Studio Codeでは、files.encodingをユーザー設定またはワークスペース設定で指定できます。

ユーザー設定とワークスペース設定の違い

Visual Studio Codeの設定には、適用範囲があります。

設定範囲適用される場所
ユーザーVisual Studio Codeで開くすべての作業
ワークスペース現在開いている作業フォルダーだけ

本コンテンツでは、これから作成するすべてのC言語ファイルをUTF-8で保存するため、ユーザー設定のFiles: EncodingをUTF-8にします。

特定のプロジェクトだけ別の文字コードにしたい場合は、ワークスペース設定を使用できます。ただし、この教材では文字コードをUTF-8に統一します。

UTF-8とUTF-8 with BOMの違い

文字コードの選択肢には、次の2つが表示される場合があります。

  • UTF-8
  • UTF-8 with BOM

本コンテンツでは、UTF-8を選択します。

UTF-8 with BOMには、ファイルの先頭へ文字コードを示す特別なデータが付きます。多くの環境で扱えますが、ツールによっては先頭のデータを想定していない場合があります。

C言語のソースファイルを幅広い環境で扱いやすくするため、BOMの付かないUTF-8へ統一します。

開いているファイルの文字コードを確認する

ファイルを開くと、Visual Studio Codeのステータスバーに現在の文字コードが表示されます。

画面右下に、次の表示があることを確認します。

UTF-8

Visual Studio Codeの公式ドキュメントでも、ステータスバーから現在の文字コードを確認できることが説明されています。

新しく作成したファイルでは、Files: Encodingの設定に従ってUTF-8が使用されます。

既存ファイルをUTF-8へ変換する

すでに別の文字コードで保存されているファイルは、設定を変更しただけでは自動的にUTF-8へ変換されません。

既存ファイルをUTF-8で保存し直す場合は、次の手順を使用します。

  1. 対象のファイルをVisual Studio Codeで開く
  2. ステータスバーの文字コード表示をクリックする
  3. エンコード付きで保存を選択する
  4. UTF-8を選択する
  5. ファイルを保存する

英語表示では、Save with Encodingを選択します。

エンコード付きで再度開くとの違い

文字コード表示をクリックすると、次のような選択肢が表示されます。

操作役割
エンコード付きで再度開く指定した文字コードとしてファイルを読み直す
エンコード付きで保存指定した文字コードへ変換して保存する

文字化けしたファイルを正しく読み直すときは、エンコード付きで再度開くを使用します。

現在のファイルをUTF-8へ変換したいときは、エンコード付きで保存を使用します。2つの操作を混同しないようにしましょう。

図3：ソースファイルをUTF-8で保存する設定

この図から分かること

Files: EncodingをUTF-8に設定すると、これから作成するファイルをUTF-8で保存できます。

現在開いているファイルの文字コードは、画面右下のステータスバーで確認できます。すでに別の文字コードで保存されているファイルをUTF-8へ変換するときは、エンコード付きで保存を使用します。

ファイルの文字コードと画面表示は別の設定

日本語Language PackとUTF-8設定は、目的が異なります。

設定変更されるもの
Japanese Language PackVisual Studio Codeのメニューや設定画面
Files: Encodingソースファイルを保存する文字コード
ターミナルの文字コードプログラムの実行結果やコマンドの表示

日本語Language Packをインストールしても、ソースファイルの文字コードが変更されるわけではありません。

反対に、Files: EncodingをUTF-8にしても、Visual Studio Codeのメニューが日本語になるわけではありません。それぞれ個別に設定します。

インストール後に確認する項目

Visual Studio Codeの準備が完了したら、次の状態を確認します。

  • Visual Studio Codeをスタートメニューから起動できる
  • メニューや設定画面が日本語で表示される
  • Japanese Language Packの提供元がMicrosoftになっている
  • C/C++拡張機能がインストールされている
  • C/C++拡張機能の提供元がMicrosoftになっている
  • Files: EncodingがUTF-8になっている
  • ファイルを開くとステータスバーにUTF-8と表示される
  • Visual Studio CodeとGCCの役割を区別できる

この段階では、Visual Studio CodeからGCCやGTK 4を利用する設定はまだ行っていません。

次の節では、Visual Studio Codeの統合ターミナルにMSYS2 UCRT64 Bashを登録し、コードの編集とコンパイルをひとつの画面で進められるようにします。