うらにわ

学んだこと・学びなおしの備忘録

トップ > 学習記録 > 【C言語学習】005_改定版_VSCodeでC言語の開発環境を用意する

【C言語学習】005_改定版_VSCodeでC言語の開発環境を用意する

学習記録 環境構築 VSCode C言語

はじめに

C言語の学習を進めていますが、グラフィックス処理を行うにあたって以前構築したVSCodeの環境構築では不足している部分があり、再構築しました。
ので、Windows11上のVSCodeでOpenGLを用いてC言語を扱う環境の構築手順を備忘録として記載します。

背景

以前、この記事でターミナル上に結果を出力するC言語の開発環境を構築していました。

 

paizaさんのC言語入門が終わったので、昔Cに挫折しかけて勉強用に購入したものの、そのまま挫折してしまったので未読のまま放置されていた以下の書籍をパラパラと読んでいました。

 

結果、この本ではかなり早い段階からグラフィカルコンソールを使用する手順が出ており、またその利用は当時DLできていたこの本の付録の独自モジュールに依っていました。
今はもうDLできなかった＆使われているのがVisual Studio と.cppで実質C++のコードのようなので、VSCodeで同じようになにかできないか…と試行錯誤した結果、こうなったという感じです。

 

前提

・VSCodeがインストールされていること
※インストールし、拡張機能だけ入れた状態。setting.jsonなどもまっさらで、.cファイルを実行するとgccが認識されないエラーが出る

 

手順

１．MSYS2のダウンロード

MSYS2はWindows上でUnix系のソフトウェアを利用できる環境を提供するツールです。pacmanというパッケージマネージャーをつかってソフトウェアのインストールや管理を行える機能があるのですが、今回はこの機能を使って上述のGlibをWindowsへインストールします。
※ものすごいざっくりで、Linuxでaptとかyumを使うようなイメージ


・MSYS2の公式サイトへアクセスし、DLします。

www.msys2.org

 

・DLしたexeを任意場所へ配置し、起動します。

 

・起動するとセットアップメニューが開くので、「Next」

 

・インストール場所を指定して「Next」

 

・MSYS2を紐づけるサービスを選択。今回は不要なので選択しないまま「Next」

 

・インストールボタンをクリック
（この画面に遷移した時点で多少進んだ状態になっています（

 

・100%になったら「Next」をクリック。

 

・インストール完了後、「Finish」をクリック。
「Run MSYS2 now.」をONにしておけば、FinishクリックでMSYS2が起動します。

 

２．MSYS2の設定

MSYS2のターミナルが起動するので、以下のコマンドを実施し、パッケージデータベースを更新します。
※途中、「y/n」(yes/no)入力が求められるので、yを入力

pacman -Syu

 

途中でターミナルが自動で閉じるので、インストール場所に移動し、msys2.exeをクリック。再度ターミナルを起動します。


起動後、もう一度パッケージを更新。

pacman -Syu


完了すると、ターミナルはクローズせずこのような形になります。

 

最後にこのコマンドでGCCのインストールを実行。

pacman -S mingw-w64-ucrt-x86_64-gcc

各パッケージの概要は以下です。

・mingw-w64-x86_64-binutils:
　コンパイラ関連のユーティリティ（アセンブラ、リンカーなど）を提供します。

・mingw-w64-x86_64-crt-git:
　Cランタイムライブラリです。C言語の標準ライブラリ関数を提供します。

・mingw-w64-x86_64-gcc:
　GNU Compiler Collectionの一部で、C/C++コンパイラを含みます。

・mingw-w64-x86_64-gdb:
　GNU Debuggerです。プログラムのデバッグに使用されます。

・mingw-w64-x86_64-gdb-multiarch:
　マルチアーキテクチャ対応のGDBです。異なるアーキテクチャ間でのデバッグに使用されます。

・mingw-w64-x86_64-headers-git:
　ヘッダーファイルのセットです。C/C++プログラミングで必要なヘッダーファイルが含まれます。

・mingw-w64-x86_64-libmangle-git:
　関数名のマングリングとデマングリングを処理するライブラリです。

・mingw-w64-x86_64-libwinpthread-git:
　Windows上でのPOSIXスレッド（pthreads）を提供するライブラリです。

・mingw-w64-x86_64-make:
　ビルドオートメーションツールです。Makefileを使用してプロジェクトのビルドを自動化します。

・mingw-w64-x86_64-pkgconf:
　パッケージ設定ツールです。インストール済みのライブラリやツールの情報を取得します。

・mingw-w64-x86_64-tools-git:
　開発ツールのセットです。便利なユーティリティが含まれます。

・mingw-w64-x86_64-winpthreads-git:
　Windows上でのpthreadsの実装です。POSIXスレッドと互換性があります。

・mingw-w64-x86_64-winstorecompat-git:
　Windowsストア互換性を提供するライブラリです。

 

 

３．GLFWをダウンロードする

・公式HPからGLWFのファイルをDLします。


・「Download」のリンクをクリック。


・Windows用のバイナリーファイルをクリック。

 

・任意場所へ配置し、解凍します。

 


・解凍したフォルダ内の「GLFW」を移動させます。コピーまたは切り取りします。
※解凍したディレクトリ(glfw-3.4.bin.WIN64)配下の、glfw-3.4.bin.WIN64\include\GLFW

 

・MSYS2をインストールした場所に移動し、includeディレクトリ配下に貼りつけ
※{MSYS2をインストールしたパス}\ucrt64\include の配下

 

・再度解凍したフォルダに戻り、「lib-mingw-w64」配下のdllを移動させます。コピーまたは切り取りします。
※解凍したディレクトリ(glfw-3.4.bin.WIN64)配下の、glfw-3.4.bin.WIN64\lib-mingw-w64配下のファイル

 

・MSYS2をインストールした場所に移動し、libディレクトリ配下に貼りつけ
※{MSYS2をインストールしたパス}\ucrt64\lib の配下

 

 

４．gladをダウンロードする

公式のGitHubへアクセス。


・Codeメニューの下部に、ジェネレーターへのリンクがあるのでこちらをクリック。

 

・言語（今回はC/C++)、APIのバージョンを選択し、「GENERATE」ボタンをクリック

 

・glad利用に必要なモジュールがzipになるので、クリックしてDL

 

・DL後、任意場所へ配置し、解凍

 

・解凍したフォルダ内の「includ」を移動させます。コピーまたは切り取りします。
※解凍したディレクトリ(glad)配下の、includeフォルダ配下一式

 

・MSYS2をインストールした場所に移動し、includeディレクトリ配下に貼りつけ
※{MSYS2をインストールしたパス}\ucrt64\include の配下。
※「khrplatform.h」の上書確認が発生する場合は上書き


・再度解凍したフォルダに戻り、「src」配下のcファイルを移動させます。コピーまたは切り取りします。
※解凍したディレクトリ(glad)配下の、srcフォルダ配下一式

 

・MSYS2をインストールした場所に移動し、includeディレクトリ配下に貼りつけ
※{MSYS2をインストールしたパス}\ucrt64\include の配下。



５．環境変数の設定

この状態ではコマンドプロンプトなどで「gcc -v」などとやってもエラーになるはずです。
今回の手順では　{MSYS2をインストールしたパス}\ucrt64\bin　の配下にgcc.exeが配置されているはずなので、ここにパスを通します。

 

・システム環境変数のウィンドウを開き、「環境変数」ボタンをクリック

 

・システム環境変数の「Path」を選択し、「編集」ボタンをクリック

 

・「新規」ボタンをクリックし、gcc.exeの配置場所を記載してOK。
以降のウィンドウもすべて「OK」で閉じていく

 

ここまで終わったら、コマンドプロンプトなどを再起動して gcc -v でgccのバージョンが出力されるか確認。
出力されればgcc周りのインストールおよびパスの設定はOKです。



6．VSCodeの設定

VSCodeを再起動します。
この時点でCのファイルを置いているフォルダにある .vscodeは空(task.jsonなどなし)、setting.jsonにもCに関する情報は未記載の状態です。


・任意のCプログラムファイルを配置
任意の .c ファイルを作成し、そのcファイルを開いた状態にします。
今回は、「C_Planner_001.c」というファイルを作りました。

#include <stdio.h>
#include <GLFW/glfw3.h>

int main(int argc, char *argv[]) {
    
    GLFWwindow *window;

    if(!glfwInit()){
        return -1;
    }

    window = glfwCreateWindow( 640, 480, "Window OpenGL - Testing", NULL, NULL);
    if(!window){
        glfwTerminate();
        return -1;
    }

    while(!glfwWindowShouldClose(window)){
        glClear(GL_COLOR_BUFFER_BIT);

        glfwSwapBuffers(window);

        glfwPollEvents();
    }
    glfwTerminate();

    return 0;
}

 

・.cファイルを開いた状態で、メニューバーの「ターミナル」->「既定のビルドタスクの構成」をクリック

 

・「C/C++:gcc.exe アクティブなファイルのビルド」を選択

 

・選択するとtask.jsonが自動生成されます。
※後ほどこのファイルに追記を行います

 

・拡張機能で「C/C++ Extension Pack」の設定を開き、「include Path」の設定箇所を開く

ここに、MSYS2のincludeパスを設定。

 

・上記で「OK」を押すと、VSCodeのsetting.jsonにinclude.pathが自動追加されます。


・task.jsonを再度開き、引数にGLFWの使用のための引数を追加

追加後のtask.json
(「★これを追加」の箇所が追加。この文言は実ファイルからは削除)


{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "cppbuild",
            "label": "C/C++: gcc.exe アクティブなファイルのビルド",
            "command": "C:\\msys64\\ucrt64\\bin\\gcc.exe",
            "args": [
                "-fdiagnostics-color=always",
                "-g",
                "${file}",
                "-o",
                "${fileDirname}\\${fileBasenameNoExtension}.exe",
                "-lglfw3", ★これを追加
                "-lopengl32", ★これを追加
                "-lgdi32" ★これを追加
            ],
            "options": {
                "cwd": "${fileDirname}"
            },
            "problemMatcher": [
                "$gcc"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "detail": "コンパイラ: C:\\msys64\\ucrt64\\bin\\gcc.exe"
        }
    ]
}

 

・上記を設定し、実行した際エラーが発生する場合はsetting.jsonにも以下を追加。

 "code-runner.executorMap": {
          "c": "cd $dir && gcc -fdiagnostics-color=always $fileName -o $fileNameWithoutExt -fexec-charset=CP932 -lglfw3 -lopengl32 -lgdi32 && $dir$fileNameWithoutExt"
    }

 

７．実行

ここまでできたら実行します。

 

ウィンドウが立ち上がりました！！！！



参考にさせていただいたサイト

以下のサイト様の情報を参考にさせていただきました。

・MSYS2のUCRT64について

blog.kmckk.com

 

・OpenGLの概要など

www.den.t.u-tokyo.ac.jp

 

・GLFWの概要について

marina.sys.wakayama-u.ac.jp


・設定周り全般

以降に述べる迷宮入りしていた時にこの動画を偶然見たので、個人的に今回一番助かりました。


Installing OpenGL in Visual Studio Code(2022/03/24)
https://www.youtube.com/watch?v=AJKf6tdWYME

 

 

感想など

全然うまくいかなくて結局2日ほどかかってしまいました。
最初、たまたま見かけたCのグラフィックス処理を書いていた方が、「#include <glib.h>」というコードを書いて、これで描画した…というのを見かけていたので、GLibで検索して以下を入れて試行錯誤してしまっていました。


ただ、このライブラリはユーティリティライブラリで、Window作成などの機能はない様子。全然うまくいかない…とGlib.hで検索しまくって上述のYoutubeの動画がたまたまHITし、それをみて、このライブラリでもないし、Glibでもなくて、OpenGL使うのが正しいと気づき、直していきました。


どうも、glib.hというのも独自ライブラリのようで、河西朝雄氏の「C言語によるはじめてのアルゴリズム入門　改訂第3版」にその記述があるようでした。
根本的な記載の部分は古い書籍でもそんなに問題ありませんが、ライブラリ周りについてはやはり新しい情報で確認して適用しないといけないな、と当たり前のことですが改めて実感しました。

sehukoki.s1008.xrea.com

oshiete.goo.ne.jp

Â