C言語+MySQL入門|VS Codeを準備する

C言語+MySQL入門|VS Codeを準備する

ここまでに、GCC、MySQL Server、Connector/C、GTK 4を導入し、pkg-configでライブラリの設定を取得できることを確認しました。

今回は、C言語のソースコードを書くために Visual Studio Code(VS Code) を準備します。

VS Codeでファイルを編集・保存し、UCRT64ターミナルでコンパイルや実行を行う環境を整えましょう。

この記事では、次の内容を扱います。

  • VS Codeをインストールする。
  • 日本語表示とC言語の編集支援を準備する。
  • VS Code内でUCRT64ターミナルを使えるようにする。
  • UTF-8でファイルを保存する設定を確認する。
  • 作業フォルダを開き、Cファイルを保存する流れを知る。

作業フォルダの作成は2.11と2.12、最初のhello.cの作成は2.13で行います。この記事では、その作業を進めるためのエディターを準備します。

VS CodeとGCCの役割を整理する

VS Codeは、ソースコードを編集するためのエディターです。

文字の色分け、入力候補の表示、ファイルの管理など、プログラムを書く作業を助けてくれます。

一方、Cプログラムを実行ファイルに変換するのはGCCです。VS CodeやC/C++拡張機能をインストールしても、コンパイラーそのものが含まれるわけではありません。

この連載では、次の役割分担で開発します。

道具担当する作業
VS CodeCファイルの編集と保存
C/C++拡張機能入力補完やコードの解析などの編集支援
UCRT64ターミナルコマンドの入力と結果の確認
GCCCプログラムのコンパイルとリンク
pkg-configライブラリのビルド設定の取得

VS Codeには、画面内にターミナルを表示する 統合ターミナル があります。

今回は、この統合ターミナルからUCRT64環境を起動できるようにします。編集画面とコマンドの実行画面を、一つのウィンドウで確認できるようになります。

図1:VS Codeで編集し、UCRT64でビルドする

この図から分かること

VS Codeでは、ソースコードの編集とターミナルでの操作を同じ画面内で行えます。

ただし、それぞれの仕事は分かれています。編集した内容をファイルへ保存し、そのファイルをGCCが読み取って実行ファイルを作ります。

VS Codeをインストールする

すでにWindows版のVS Codeを使用している場合は、その環境を利用できます。まだインストールしていない場合は、公式サイトから入手しましょう。

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

この連載のWindows x64環境では、Windows向けの User Installerのx64版 を選びます。

User Installerは、現在のWindowsユーザー向けにインストールする方式です。通常、管理者権限を必要としません。

インストールの流れ

  1. ダウンロードしたインストーラーを起動する。
  2. 使用許諾契約の内容を確認して進む。
  3. インストール先を確認する。
  4. 追加タスクの選択画面が表示されたら、必要な項目を確認する。
  5. インストールを実行する。
  6. 完了後、VS Codeを起動する。

追加タスクにPATHへの追加が表示されている場合は、有効にしておくと便利です。後でcodeコマンドからVS Codeを起動できます。

インストールによるPATHの変更を反映するには、開いていたターミナルを起動し直します。

この記事で使うのは、PCにインストールするデスクトップ版の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を簡単に起動できます。

追加タスクを選択する

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

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

項目おすすめ役割
デスクトップにアイコンを作成する任意デスクトップから起動できる
エクスプローラーのファイルメニューへ追加する有効ファイルをVisual Studio Codeで開ける
エクスプローラーのフォルダーメニューへ追加する有効フォルダー全体をVisual Studio Codeで開ける
対応するファイルのエディターとして登録する有効ソースファイルを開きやすくする
PATHへ追加する有効ターミナルから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を起動すると、ようこそ画面が表示されます。

メニューを日本語にする

VS Codeが英語で表示されている場合は、日本語の言語パックを導入できます。

  1. Ctrl+Shift+Pを押して、コマンドパレットを開く。
  2. Configure Display Languageを検索して選択する。
  3. 日本語またはJapaneseを選ぶ。
  4. 言語パックのインストールが必要な場合は、画面の案内に従う。
  5. 再起動を求められたら、VS Codeを再起動する。

表示言語の変更は、VS Codeの公式ドキュメントでもこのコマンドから案内されています。

日本語が見つからない場合は、拡張機能の画面から、Microsoftが提供するJapanese Language Pack for Visual Studio Codeを検索してインストールします。

表示言語を日本語にしても、C言語の命令やGCCのコマンドが日本語に変わるわけではありません。主に、メニューや設定画面の表示が変わります。

日本語化の手順

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

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

Ctrl+Shift+X

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

1.VS Codeを起動します。

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

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

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

5.拡張機能の詳細画面で「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拡張機能

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

C言語の編集を支援するために、MicrosoftのC/C++拡張機能を導入します。

  1. Ctrl+Shift+Xを押して、拡張機能の画面を開く。
  2. 検索欄にms-vscode.cpptools(C/C++)と入力する。
  3. Microsoftが提供するC/C++を選ぶ。
  4. インストールをクリックする。

この拡張機能は、C言語とC++の両方に対応しています。名前にC++が含まれていますが、C言語の学習にも利用できます。

主な編集支援には、次のようなものがあります。

  • 関数名や変数名の入力候補を表示する。
  • 関数の引数や型の情報を表示する。
  • 定義されている場所へ移動する。
  • コードを解析し、問題の候補を表示する。

この連載では、ビルドコマンドをUCRT64ターミナルに入力する方法を基本にします。

C/C++拡張機能のインストール手順

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++」の「インストール」ボタンをクリックします。

UCRT64ターミナルの設定を追加する

VS Codeでターミナルを開くと、初期状態ではPowerShellなどが起動することがあります。

これまでの記事と同じコマンドを使えるように、UCRT64用のターミナル設定を追加しましょう。

ここでは、MSYS2が次の場所にインストールされているものとします。

C:\msys64

ユーザー設定のJSONを開く

  1. Ctrl+Shift+Pを押す。
  2. Preferences: Open User Settings (JSON)を検索する。
  3. ユーザー設定をJSON形式で開く項目を選ぶ。

日本語表示では、ユーザー設定を開くという意味の項目が表示されます。既定の設定を表示する項目ではなく、編集できるユーザー設定を開いてください。

VS Codeの設定はsettings.jsonに保存されます。ユーザー設定は、ほかの作業フォルダにも適用される基本設定です。

操作手順

1.Ctrl+Shift+Pを押す。

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

3.「基本設定: ユーザー設定を開く(JSON)」を選択します。

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

UCRT64とC言語の編集環境を設定する

以下は、今回追加する設定だけを含めた完全な例です。

初めて設定する場合は、この内容を使用できます。すでに設定がある場合は、既存の項目を残して追加してください。同じ設定名がある場合は、重複させずに内容を統合します。

特に、terminal.integrated.profiles.windowsがすでにある場合は、その中へMSYS2 UCRT64の項目を追加します。

ファイル名: 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で保存します。

これはCプログラムではなく、VS Codeの設定ファイルです。GCCでコンパイルする必要はありません。

操作手順

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

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

つまり、

設定1,
設定2,
設定3

のように記述します。

設定の意味を確認する

設定項目意味
files.encodingファイルの基本の文字コードをUTF-8にする
C_Cpp.default.compilerPathC/C++拡張機能が参照するコンパイラーを指定する
C_Cpp.default.cStandardC言語の解析に使う規格をC17にする
terminal.integrated.profiles.windowsWindowsで使うターミナルの起動方法を登録する
path起動するMSYS2のBashを指定する
--loginMSYS2の環境設定を読み込む形で起動する
-i対話的にコマンドを入力できる形で起動する
MSYSTEM起動時にUCRT64環境を選ぶ
CHERE_INVOKING起動元の作業ディレクトリを維持する
terminal.integrated.defaultProfile.windows新しいターミナルの既定の起動方法を指定する

MSYS2では、環境を選んでログインシェルを起動することで、対応するPATHなどが設定されます。ここでは、MSYSTEMの指定とBashの起動を組み合わせています。

VS Codeの公式ドキュメントにも、MSYS2のBashとCHERE_INVOKINGを使うターミナル設定が紹介されています。

JSONの中でWindowsのパスをバックスラッシュで書く場合は、例のように二つ続けて記述します。MSYS2を別の場所へインストールした場合は、BashとGCCの両方のパスを合わせて変更してください。

編集支援の設定とGCCのオプションは別

C_Cpp.default.cStandardをc17にすると、拡張機能のコード解析でC17を指定できます。

ただし、この設定がターミナルから実行するGCCへ自動で渡されるわけではありません。C17でコンパイルするときには、GCCのコマンドにも-std=c17を指定します。

同じように、C_Cpp.default.compilerPathは編集支援が参照するコンパイラーの設定です。ターミナルから起動するgccは、ターミナル側のPATHによって選ばれます。

図2:VS Code内でUCRT64環境を起動する

この図から分かること

VS Codeの中でも、これまで使ってきたUCRT64環境を起動できます。

エディターの見た目だけで判断せず、起動したターミナルの環境と、使用されるコマンドの場所を確認することが大切です。

新しいターミナルで設定を確認する

設定を保存したら、メニューからターミナル、新しいターミナルを選びます。

すでにPowerShellなどのターミナルを開いていた場合、そのターミナルが自動的にUCRT64へ切り替わるわけではありません。新しいターミナルを作成してください。

必要に応じて、ターミナルの追加ボタン付近にあるメニューからMSYS2 UCRT64を選びます。

起動した環境を確認する

echo $MSYSTEM

実行結果の例

UCRT64

GCCの場所を確認する

command -v gcc

実行結果の例

/ucrt64/bin/gcc

pkg-configの場所を確認する

command -v pkg-config

実行結果の例

/ucrt64/bin/pkg-config

この三つを確認できれば、VS Code内のターミナルからUCRT64環境の道具を利用できています。

ターミナルの名前がMSYS2 UCRT64になっているだけではなく、実際の確認結果も見ておきましょう。

CファイルはUTF-8で保存する

この連載では、CファイルをUTF-8で保存します。

先ほどのfiles.encodingの設定に加えて、ファイルを開いたときは画面下部のステータスバーで文字コードを確認できます。

文字コードの表示をクリックすると、別の文字コードで開き直したり、保存したりできます。

新しく作成するCファイルでは、UTF-8になっていることを確認しましょう。

既存のファイルを開く場合、設定を追加しただけで、そのファイルの文字コードがすべて変換されるわけではありません。

また、メニューの日本語表示と、ファイルの文字コードは別の設定です。日本語のメニューになっていても、保存する文字コードは確認するようにしてください。

作業フォルダを開く流れを知る

この連載では、次の記事でC:\c-mysqlを作成し、その中に章ごとのディレクトリを用意します。

フォルダを作成した後は、VS Codeで次のように開きます。

  1. ファイルメニューからフォルダーを開くを選ぶ。
  2. C:\c-mysqlを選択する。
  3. フォルダーの選択を確定する。
  4. 左側のエクスプローラーにフォルダの内容が表示されることを確認する。

自分で作成した学習用フォルダについて信頼の確認が表示された場合は、そのフォルダであることを確認して信頼します。

Cファイルを一つだけ開く方法もありますが、この連載ではC:\c-mysqlをフォルダごと開くことで、章ごとのファイルを見渡せるようにします。

エクスプローラーとターミナルの作業場所を区別する

VS Codeで表示しているフォルダと、ターミナルの現在位置は、常に同じとは限りません。

特に、エディターで別の章のファイルを開いても、既存のターミナルが自動的にその章へ移動するわけではありません。

ターミナルの現在位置は、次のコマンドで確認します。

pwd

chap02へ移動した後の実行結果の例

/c/c-mysql/chap02

このパスは、Windows側のC:\c-mysql\chap02に対応します。

実際のフォルダ作成と移動は、続く記事で順番に行います。

Cファイルを編集・保存する流れ

2.13では、作成したchap02にhello.cを保存します。そのときの基本操作を、先に確認しておきましょう。

  1. VS Codeのエクスプローラーでchap02を選ぶ。
  2. 新しいファイルを作成し、hello.cという名前を付ける。
  3. 記事に掲載されたCプログラムを入力する。
  4. Ctrl+Sを押して保存する。
  5. ステータスバーの言語モードがC、文字コードがUTF-8になっていることを確認する。

ファイル名の末尾は.cです。hello.c.txtにならないようにしましょう。

コンパイル前に保存する

GCCが読み込むのは、ディスクに保存されたCファイルです。

エディター上でコードを書き換えても、保存していなければ、GCCは以前に保存した内容を読み込むことになります。

「変更したのに実行結果が変わらない」という場合は、次の順番を確認しましょう。

  1. 編集したCファイルを保存したか。
  2. 保存後にコンパイルしたか。
  3. 作成し直した実行ファイルを実行したか。

この流れは、コンソール版でもGUI版でも共通です。

図3:編集・保存・コンパイル・実行の流れ

この図から分かること

プログラムを動かすときは、編集、保存、コンパイル、実行の順番で進めます。

VS Codeで保存しただけでは実行ファイルは更新されません。コードを変更したら、保存後にもう一度コンパイルする必要があります。

準備がうまくいかないときは

UCRT64ターミナルが起動しない

settings.jsonに記述したBashの場所を確認します。

C:\msys64\usr\bin\bash.exe

MSYS2のインストール先が異なる場合は、実際の場所に合わせてください。

また、settings.jsonに赤い波線が表示されている場合は、カンマや波括弧、ダブルクォーテーションなどに誤りがないか確認します。

新しいターミナルがPowerShellになる

次の点を確認してください。

  • settings.jsonを保存したか。
  • 既存のターミナルを見ていないか。
  • 新しいターミナルのメニューにMSYS2 UCRT64があるか。
  • 既定のプロファイル名と、登録したプロファイル名が一致しているか。

ほかの作業フォルダにターミナル設定がある場合は、そちらがユーザー設定より優先されることもあります。

GCCやpkg-configが見つからない

まずecho $MSYSTEMを実行し、UCRT64と表示されるか確認します。

正しい環境でも見つからない場合は、これまでの記事で行ったパッケージのインストールが完了しているか確認してください。

拡張機能のインストールと、GCCなどのツールのインストールは別の作業です。

エディターに赤い波線が表示される

C/C++拡張機能の解析結果と、GCCのコンパイル結果は分けて確認します。

たとえば、後の章でmysql.hやgtk/gtk.hを使うときには、拡張機能側にも適切なヘッダーファイルの情報が必要になる場合があります。

ターミナルでpkg-configを実行しただけでは、その結果が拡張機能へ自動的に設定されるわけではありません。

赤い波線がある場合は、その説明を確認したうえで、実際のビルド結果も調べましょう。

次は学習用フォルダを作成する

VS Codeが起動し、C/C++拡張機能を導入でき、統合ターミナルでUCRT64と表示されれば、編集環境の準備が進んでいます。

さらに、gccとpkg-configが/ucrt64/binから見つかることを確認しておきましょう。

次の記事ではC:\c-mysqlを作成し、WindowsのパスとMSYS2から見たパスの対応を確認します。そこから章ごとのディレクトリを用意し、最初のCプログラムを保存する作業へ進みます。

Follow me!