C言語DB入門｜Visual Studio Codeを準備する

C言語DB入門｜Visual Studio Codeを準備する

これまでの記事では、MSYS2のUCRT64環境にGCC、SQLite、GTK 4をインストールしました。これで、C言語のプログラムをコンパイルし、データベースやGUIを利用するための道具がそろいました。

次は、ソースコードを編集するためのVisual Studio Codeを準備しましょう。

Visual Studio Codeは、プログラムを書く作業を支援してくれるエディターです。この記事では、次の作業を進めます。

• WindowsにVisual Studio Codeをインストールする
• C言語の編集に役立つ拡張機能を追加する
• ソースファイルをUTF-8で保存できるようにする
• MSYS2 UCRT64のBashを統合ターミナルに設定する
• 統合ターミナルから、これまでにインストールした道具を利用できることを確認する

設定が終わると、ソースコードの編集とコマンドの実行を、Visual Studio Codeの画面内で行えるようになります。

Visual Studio Codeの役割を確認しよう

Visual Studio Codeは、Microsoftが提供しているコードエディターです。一般にVS Codeと呼ばれるため、この記事でも以降はVS Codeと表記します。

本教材では、VS CodeでC言語のソースコードを編集し、GCCでコンパイルします。

ここで、それぞれの道具の役割を整理しておきましょう。

VS CodeとC/C++拡張機能をインストールするだけでは、C言語のコンパイラーは用意されません。本教材では、すでにインストールしたUCRT64用のGCCを利用します。

図1：VS Codeと開発ツールの役割

この図から分かること

VS Codeは、プログラムを書くための作業場所です。コンパイルやデータベースの処理は、それぞれの道具が担当します。

VS Codeの中にターミナルを用意すると、編集したソースコードを保存して、そのままコマンドを入力できるようになります。

VS Codeをインストールする

Windows用のインストーラーを入手する

VS Codeの公式ダウンロードページを開きます。

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

本教材で使用しているWindowsのx64環境では、Windows用のUser Installerのx64版を選びます。

User Installerは、現在サインインしているWindowsユーザー向けにインストールする形式です。通常は管理者権限を必要とせず、個人の学習環境に適しています。

すでにWindows版のVS Codeを使用している場合は、そのVS Codeで以降の設定を進められます。

インストーラーを実行する

ダウンロードした 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を簡単に起動できます。

追加タスクを選択する

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

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

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

追加タスクにPATHへの追加が表示されている場合は、有効にしておくと便利です。新しく開いたターミナルから、codeコマンドでVS Codeを起動できるようになります。

また、エクスプローラーの右クリックメニューにVS Codeで開く項目を追加できる場合は、必要に応じて有効にしておきましょう。後から学習用フォルダーを開くときに役立ちます。

インストールを開始する

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

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

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

インストールを完了する

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

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

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を再起動する

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

C言語用の拡張機能を追加する

VS Codeには、機能を追加するための拡張機能があります。

本教材では、Microsoftが提供するC/C++を使用します。名前にC++が含まれていますが、C言語にも対応しています。

C/C++拡張機能をインストールする

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

拡張機能を追加すると、C言語のコードを編集するときに、次のような支援を受けられます。

入力候補やコードの解析を行う仕組みは、IntelliSenseと呼ばれます。

ただし、編集画面の診断とGCCによるコンパイル結果は別のものです。本教材では、ソースコードを保存した後、統合ターミナルでコンパイルして結果を確認していきます。

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

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

C言語のソースファイルはUTF-8で保存する

文字コードとは、文字をファイルの中でどのようなデータとして保存するかを決めるルールです。

C言語のプログラムでは、コメントや画面に表示する文章に日本語を書くことがあります。ファイルを保存するときと読み込むときで文字コードの扱いが合わないと、文字化けの原因になります。

本教材では、C言語のソースファイルをUTF-8で保存することに統一します。

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

VS Codeでテキストファイルを開くと、通常は画面右下のステータスバーに、UTF-8などの文字コードが表示されます。

すでにUTF-8と表示されていれば、そのファイルはそのまま編集できます。

別の文字コードになっているファイルをUTF-8で保存する場合は、次の操作を行います。

1. ステータスバーの文字コード表示をクリックします。
2. エンコード付きで保存を選択します。
3. UTF-8を選択します。

本教材では、選択肢にUTF-8 with BOMがある場合も、通常のUTF-8を選びます。

なお、すでに文字化けして表示されているファイルは、先にエンコード付きで再度開くを使い、元の文字コードで正しく読み直します。文字が正常に表示されたことを確認してから、UTF-8で保存しましょう。

この後の設定では、ファイルの標準の文字コードもUTF-8に指定します。ただし、この設定だけで既存のすべてのファイルがUTF-8に変換されるわけではありません。

統合ターミナルでUCRT64を使おう

統合ターミナルは、VS Codeの画面内に表示できるターミナルです。

これまでは、スタートメニューからMSYS2 UCRT64を起動してコマンドを入力していました。これからは、同じUCRT64環境をVS Codeの中で利用できるようにします。

Windows版のVS Codeでは、最初にPowerShellなどが選ばれていることがあります。本教材では、UCRT64環境のBashを使う設定にそろえます。

ここで、ターミナルとBashの違いも整理しておきましょう。

図2：統合ターミナルからUCRT64環境を利用する仕組み

この図から分かること

統合ターミナルでは、Bashを通してコマンドを実行します。

BashをUCRT64環境で起動することで、これまでにインストールしたGCCやSQLite、GTK 4関連の道具をVS Codeから利用できます。

VS Codeのユーザー設定を開く

今回は、MSYS2をC:\msys64にインストールしていることを前提に設定します。

別の場所にインストールした場合は、これから示す設定のC:\msys64に相当する部分を、自分のインストール先に合わせて変更してください。

settings.jsonを開く

次の手順でユーザー設定を開きます。

1. Visual Studio Codeを起動します。
2. Ctrl+Shift+Pを押してコマンドパレットを開きます。
3. 検索欄に「設定 JSON」と入力します。
4. 「基本設定: ユーザー設定を開く（JSON）」を選択します。

表示言語によっては、次のような英語表記になっていることがあります。

Preferences: Open User Settings (JSON)

ここで開くsettings.jsonは、VS Codeのユーザー設定ファイルです。新しいファイルを自分で作成するのではなく、コマンドパレットから開いてください。

ユーザー設定は、基本的にそのユーザーが開く各フォルダーに適用されます。フォルダーごとのワークスペース設定に同じ項目がある場合は、そちらが優先されることがあります。

操作手順

１．Ctrl+Shift+Pを押す。

２．検索欄に「設定 JSON」と入力します。

３．「基本設定: ユーザー設定を開く（JSON）」を選択します。

下図のように表示されます。

UTF-8保存とUCRT64ターミナルを設定する

次の例は、この記事で使用する設定を一通り記述したものです。

settings.jsonが空の設定であれば、そのまま入力できます。

すでに設定がある場合は、既存の設定を残して、必要な項目を追加・変更してください。 ファイル全体を置き換える必要はありません。

ファイル名： settings.json

{
    "files.encoding": "utf8",
    "C_Cpp.default.compilerPath": "C:/msys64/ucrt64/bin/gcc.exe",
    "terminal.integrated.profiles.windows": {
        "MSYS2 UCRT64": {
            "path": "C:\\msys64\\usr\\bin\\bash.exe",
            "args": [
                "--login",
                "-i"
            ],
            "env": {
                "MSYSTEM": "UCRT64",
                "CHERE_INVOKING": "1"
            }
        }
    },
    "terminal.integrated.defaultProfile.windows": "MSYS2 UCRT64",
    "cmake.additionalCompilerSearchDirs": [
        "C:/msys64/mingw32/bin",
        "C:/msys64/mingw64/bin",
        "C:/msys64/clang32/bin",
        "C:/msys64/clang64/bin",
        "C:/msys64/clangarm64/bin",
        "C:/msys64/ucrt64/bin"
    ]
}

入力したら、Ctrl + Sで保存します。

既存の設定に追加するときは、次の点を確認しましょう。

• 一番外側の波かっこは、ファイル全体で1組にします。
• 同じ設定名がすでにある場合は、その項目を編集します。
• 設定項目の間にはカンマを入れます。
• terminal.integrated.profiles.windowsがすでにある場合は、その中にMSYS2 UCRT64を追加します。

設定項目の意味を確認する

ターミナルの設定では、起動するプログラム、引数、環境変数を組み合わせられます。

Bashの場所がusrになっていても大丈夫

設定では、Bashの場所をC:\msys64\usr\bin\bash.exeとしています。

一方、GCCの場所はC:\msys64\ucrt64\bin\gcc.exeです。

この違いは正常です。MSYS2のBashを起動し、その中で利用する環境をMSYSTEMでUCRT64に指定しています。

--loginは起動時の初期化設定を読み込むための引数、-iは対話的にコマンドを入力するための引数です。MSYSTEMとログイン時の初期化を組み合わせることで、UCRT64用の道具を利用する環境が整います。

また、JSONの文字列では、Windowsのパスに含まれるバックスラッシュを2つ重ねて記述します。そのため、BashのpathにはC:\msys64のような表記を使っています。

操作手順

settings.json に上記内容を追加します。

settings.json では、設定項目を続けて書く場合、それぞれの項目の末尾をカンマで区切る必要があります。

つまり、

設定1,
設定2,
設定3

のように記述します。

拡張機能の設定とターミナルの設定は役割が異なる

C_Cpp.default.compilerPathは、C/C++拡張機能がGCCの情報を調べ、標準ヘッダーの場所などを把握するための設定です。

この項目を設定するだけで、プログラムが自動的にコンパイルされるわけではありません。コンパイルは、統合ターミナルでgccコマンドを実行して行います。

新しいUCRT64ターミナルを開く

設定を保存したら、統合ターミナルを開きます。

1. すでにターミナルを開いている場合は、ターミナル領域のごみ箱ボタンで終了します。
2. メニューのターミナルから、新しいターミナルを選択します。
3. 新しく起動したターミナルで、次の確認を行います。

設定を変更しても、すでに動いているPowerShellなどがBashに切り替わるわけではありません。 必ず新しいターミナルを作成しましょう。

別のターミナルが開く場合は、ターミナル領域のプラスボタン横のメニューからMSYS2 UCRT64を選択します。

UCRT64で起動していることを確認する

統合ターミナルに、次のコマンドを入力します。

echo "$MSYSTEM"

実行結果の例

UCRT64

UCRT64と表示されれば、目的の環境が選ばれています。

続いて、GCCの場所を確認します。

command -v gcc

実行結果の例

/ucrt64/bin/gcc

この結果から、UCRT64用のGCCを利用する状態になっていることが分かります。

SQLiteとpkg-configも確認する

続けて、次のコマンドを1行ずつ実行します。

command -v sqlite3
command -v pkg-config

実行結果の例

/ucrt64/bin/sqlite3
/ucrt64/bin/pkg-config

さらに、GTK 4の情報を取得できるか確認します。

pkg-config --modversion gtk4

GTK 4のバージョン番号が表示されれば、pkg-configからGTK 4のパッケージ情報を参照できています。表示される番号は、インストールした時期によって異なります。

これで、VS Codeの中から、これまで準備した開発環境を利用できることが確認できました。

編集と実行を同じ画面で進められる

設定後のVS Codeでは、編集領域と統合ターミナルを行き来しながら作業できます。

今後の基本的な進め方は、次のとおりです。

1. 編集領域でC言語のソースコードを書く
2. Ctrl + Sでファイルを保存する
3. 統合ターミナルでGCCを使ってコンパイルする
4. 生成された実行ファイルを起動する
5. 結果を確認して、必要な箇所を修正する

特に、コンパイルする前に保存することを習慣にしましょう。GCCが読み込むのは、ディスクに保存されたソースファイルです。

図3：VS Codeで行う編集・保存・コンパイル・実行

この図から分かること

VS Codeでは、コードを書くだけでなく、コンパイルと実行まで同じ画面内で進められます。

プログラムを作るときは、この流れを繰り返します。最初から完成させようとせず、少し書いて保存し、動きを確かめながら進めていきましょう。

うまく設定できないときに確認すること

設定でつまずいたときは、次の表を参考に確認してみてください。

ファイルの保存形式と、実行中のプログラムがターミナルに文字を表示する仕組みは別です。UTF-8で保存しても実行結果だけが文字化けする場合は、出力側の文字コードや表示環境を確認する必要があります。

次は学習用フォルダーを用意しよう

ここまでで、VS CodeでC言語のコードを編集し、UCRT64の統合ターミナルから開発ツールを使う準備ができました。

次の記事では、学習用のフォルダーC:\c-dbを作成します。章ごとのファイルを整理し、そのフォルダーをVS Codeで開いて、プログラムを作成するための作業場所を整えていきましょう。

Follow me!

おすすめ記事

C言語GUI入門｜VSCodeでMSYS2 UCRT64を使用する C言語GUI入門｜よくあるエラーに対応する C言語GUI入門｜開発環境の動作を確認する C言語GUI入門｜#include のincludePathエラー C言語GUI入門｜GTK 4の実行ファイルを配置する C言語GUI入門｜依存するDLLを確認する C言語GUI入門｜VSCodeからビルドする C言語＋MySQL入門｜VS Codeを準備する