C言語GUI入門｜作業ディレクトリC:\cguiを作成する

C言語GUI入門｜作業ディレクトリC:\cguiを作成する

これから作成するC言語プログラムを分かりやすく整理するため、Cドライブの直下にC:\cguiという作業ディレクトリを作成します。

作業ディレクトリとは、ソースファイル、実行ファイル、設定ファイル、CSSファイルなど、学習に必要なファイルを保存する場所です。本コンテンツではC:\cguiを学習全体の基準となるディレクトリとして使用し、この中に章ごとのディレクトリを作っていきます。

ここでは、次の内容を確認します。

• エクスプローラーでC:\cguiを作成する
• MSYS2 UCRT64 BashからC:\cguiへ移動する
• WindowsとMSYS2におけるパス表記の違い
• Visual Studio CodeでC:\cguiを開く
• 統合ターミナルの作業場所を確認する
• 日本語や空白を含まないパスを使用する理由
• ディレクトリを間違えた場合の確認方法

この段階では、まだC言語のソースファイルは作成しません。エクスプローラー、MSYS2 UCRT64 Bash、Visual Studio Codeが同じC:\cguiを参照していることを確認するのが目的です。

作業ディレクトリとは

作業ディレクトリは、プログラムの作成やコンパイルに必要なファイルを保存する場所です。

本コンテンツでは、次のディレクトリを作業の起点として使用します。

C:\cgui

cguiは、C language GUIをイメージした短いディレクトリ名です。

学習を進めると、C:\cguiの中に章ごとのディレクトリやプログラムのファイルが増えていきます。

C:\cgui
   ├─ 章ごとのディレクトリ
   ├─ C言語のソースファイル
   ├─ コンパイル後の実行ファイル
   ├─ GTK CSSファイル
   └─ 配布に必要なファイル

最初に基準となるディレクトリを決めておくと、ファイルの保存場所やコンパイルする場所を間違えにくくなります。

Cドライブの直下に作成する理由

C:\cguiは、Cドライブの直下に作成します。

「直下」とは、別のディレクトリを間に挟まず、Cドライブのすぐ下に配置することです。

C:\
└─ cgui

次のような場所ではありません。

C:\Users\ユーザー名\Documents\cgui
C:\Users\ユーザー名\Desktop\cgui

Cドライブの直下を使用すると、パスが短くなります。ターミナルでの入力が簡単になり、コンパイルコマンドや設定ファイルにも記述しやすくなります。

エクスプローラーでC:\cguiを作成する

最初に、Windowsのエクスプローラーを使ってC:\cguiを作成します。

次の手順で操作してください。

1. WindowsキーとEキーを押して、エクスプローラーを開きます。
2. 左側の一覧から「PC」または「このPC」を選択します。
3. 「ローカルディスク（C:）」をダブルクリックします。
4. Cドライブの何もない場所を右クリックします。
5. 「新規作成」を選択します。
6. 「フォルダー」を選択します。
7. フォルダー名としてcguiを入力します。
8. Enterキーを押して名前を確定します。

作成後の場所は次のようになります。

C:\cgui

エクスプローラー上部のアドレス欄をクリックすると、現在開いている場所を確認できます。

C:\cgui

ここでC:\cguiと表示されれば、正しい場所に作成できています。

図1：エクスプローラーでC:\cguiを作成する

この図から分かること

C:\cguiは、ユーザーのドキュメントやデスクトップではなく、Cドライブのすぐ下に作成します。

Cドライブを開いてから、新しいフォルダーを作成し、その名前をcguiにします。作成した後は、エクスプローラーのアドレス欄にC:\cguiと表示されていることを確認しましょう。

フォルダー名を確認する

フォルダー名には、半角英字でcguiと入力します。

cgui

次のような名前になっていないか確認してください。

C言語GUI
c gui
cgui.txt
cguiフォルダー

本コンテンツでは、すべて小文字のcguiを使用します。Windowsでは大文字と小文字を区別しないことが多いものの、教材と同じ表記に統一しておくと確認しやすくなります。

MSYS2 UCRT64 Bashを開く

C:\cguiを作成したら、MSYS2 UCRT64 Bashから同じ場所へ移動します。

前の項でVisual Studio CodeにMSYS2 UCRT64 Bashを登録した場合は、Visual Studio Codeの統合ターミナルを使用できます。

1. Visual Studio Codeを起動します。
2. メニューバーから「ターミナル」を選択します。
3. 「新しいターミナル」を選択します。
4. ターミナル名がMSYS2 UCRT64 Bashになっていることを確認します。

MSYS2 UCRT64の専用ターミナルを使用する場合は、Windowsのスタートメニューから起動することもできます。

1. スタートメニューを開きます。
2. MSYS2を探します。
3. MSYS2 UCRT64を選択します。

どちらの方法でも、最初に次のコマンドを実行して環境を確認します。

echo $MSYSTEM

正しくUCRT64環境が起動していれば、次のように表示されます。

UCRT64

PowerShellや別のMSYS2環境ではなく、UCRT64になっていることを確認してから先へ進みましょう。

MSYS2からC:\cguiへ移動する

MSYS2 UCRT64 Bashでは、cdコマンドを使って作業ディレクトリを移動します。

C:\cguiへ移動するコマンドは次のとおりです。

cd /c/cgui

コマンドを入力してEnterキーを押します。

何も表示されず、次の入力待ち状態になれば、通常は移動に成功しています。cdは移動に成功してもメッセージを表示しません。

現在の場所を確認するには、pwdコマンドを使用します。

pwd

pwd

実行結果は次のようになります。

/c/cgui

これで、MSYS2 UCRT64 Bashの作業場所がC:\cguiへ移動しました。

cdとpwdの役割

cdとpwdは、ディレクトリを操作するときに頻繁に使用する基本コマンドです。

C:\cguiを作成した直後は、まだ中にファイルがありません。

次のコマンドを実行しても、何も表示されない場合があります。

ls

これはエラーではありません。C:\cguiの中が空であることを表しています。

MSYS2ではCドライブを/cと表す

WindowsとMSYS2では、同じ場所でもパスの書き方が異なります。

WindowsでのC:\cguiは、MSYS2では/c/cguiと表します。

Windowsでは、ドライブ名の後ろにコロンを付け、ディレクトリをバックスラッシュで区切ります。

C:\cgui

MSYS2では、Cドライブを/cで表し、ディレクトリをスラッシュで区切ります。

/c/cgui

表記は異なりますが、どちらも同じディレクトリを指しています。

WindowsとMSYS2のパスを対応させる

MSYS2では、Windowsの各ドライブがルートディレクトリの下へ割り当てられています。

WindowsのCドライブ → MSYS2の/c
WindowsのDドライブ → MSYS2の/d
WindowsのEドライブ → MSYS2の/e

たとえば、WindowsのD:\workへ移動する場合、MSYS2では次のように入力します。

cd /d/work

本コンテンツではCドライブを使用するため、作業ディレクトリは/c/cguiになります。

図2：WindowsとMSYS2のパス表記の対応

この図から分かること

WindowsのC:\cguiとMSYS2の/c/cguiは、同じディレクトリです。

WindowsではC:というドライブ名とバックスラッシュを使用しますが、MSYS2では/cという表記とスラッシュを使用します。

MSYS2 UCRT64 Bashでコマンドを入力するときは、基本的に/c/cguiの形式を使用します。

移動先を段階的に確認する

一度に/c/cguiへ移動するのが不安な場合は、Cドライブへ移動してからcguiへ進むこともできます。

最初に、Cドライブへ移動します。

cd /c

現在の場所を確認します。

pwd

実行結果は次のようになります。

/c

Cドライブの中にcguiがあることを確認します。

ls

一覧の中にcguiが表示されていることを確認してください。

続いて、cguiへ移動します。

cd cgui

もう一度、現在の場所を確認します。

pwd

実行結果は次のようになります。

/c/cgui

このように1段階ずつ移動すると、どこでパスを間違えたのか確認しやすくなります。

ディレクトリが見つからない場合

cd /c/cguiを実行したとき、次のようなメッセージが表示される場合があります。

bash: cd: /c/cgui: No such file or directory

これは、指定したディレクトリが見つからないことを表しています。

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

• エクスプローラーでC:\cguiを作成したか
• cguiのつづりを間違えていないか
• Cドライブではなく、別のドライブに作成していないか
• cguiの内側に、さらにcguiを作成していないか
• MSYS2で/c/cguiと入力しているか

まずCドライブへ移動します。

cd /c

次に、ディレクトリの一覧を表示します。

ls

一覧にcguiがなければ、Cドライブの直下にC:\cguiが作成されていません。エクスプローラーで保存場所をもう一度確認しましょう。

Visual Studio CodeでC:\cguiを開く

C:\cguiをVisual Studio Codeで開くと、このディレクトリを基準にしてファイルの作成やターミナル操作ができます。

次の手順で開きます。

1. Visual Studio Codeを起動します。
2. メニューバーから「ファイル」を選択します。
3. 「フォルダーを開く」を選択します。
4. Cドライブを開きます。
5. cguiフォルダーを選択します。
6. 「フォルダーの選択」を押します。

正しく開くと、Visual Studio Codeの左側にあるエクスプローラーへcguiが表示されます。

CGUI

Visual Studio Codeでは、フォルダー名が大文字で表示される場合がありますが、実際のフォルダー名が変更されたわけではありません。

C:\cguiを作成した直後は、中にファイルがないため、左側のエクスプローラーは空に近い状態になります。これは正常です。

ワークスペースの信頼を確認する

Visual Studio CodeでC:\cguiを初めて開いたとき、フォルダー内のファイル作成者を信頼するか確認する画面が表示される場合があります。

自分で作成したC:\cguiであれば、内容を確認したうえで信頼する操作を選択できます。

インターネットからダウンロードした不明なフォルダーを開く場合は、安易に信頼しないようにします。今回は自分で作成した空の作業ディレクトリなので、その点を確認して操作しましょう。

Visual Studio Codeの統合ターミナルで場所を確認する

C:\cguiをVisual Studio Codeで開いたら、統合ターミナルも確認します。

1. メニューバーから「ターミナル」を選択します。
2. 「新しいターミナル」を選択します。
3. MSYS2 UCRT64 Bashが起動したことを確認します。
4. pwdを実行します。

pwd

実行結果が次のようになれば、正しい場所でターミナルが開いています。

/c/cgui

前の項でMSYS2 UCRT64 Bashのプロファイルに-hereを指定しているため、Visual Studio Codeで開いているフォルダーを作業ディレクトリとして引き継げます。

念のため、UCRT64環境であることも確認しましょう。

echo $MSYSTEM

実行結果は次のようになります。

UCRT64

次の2つを確認できれば、Visual Studio CodeとMSYS2 UCRT64 Bashが正しく連携しています。

pwdの結果       → /c/cgui
echo $MSYSTEM   → UCRT64

MSYS2からVisual Studio Codeを開く方法

Visual Studio Codeのcodeコマンドが使用できる環境では、MSYS2 UCRT64 BashからC:\cguiを開くこともできます。

最初に、C:\cguiへ移動します。

cd /c/cgui

次のコマンドを実行します。

code .

codeはVisual Studio Codeを起動するコマンドです。末尾のピリオドは現在のディレクトリを表します。

したがって、code .は現在のディレクトリをVisual Studio Codeで開くという意味になります。

codeコマンドが見つからない場合は、無理にこの方法を使用する必要はありません。「ファイル」から「フォルダーを開く」方法でC:\cguiを開けば問題ありません。

Visual Studio Codeで正しいフォルダーを開いたか確認する

Visual Studio Codeで別のフォルダーを開いていると、作成したファイルが予定とは違う場所に保存されてしまいます。

次の3カ所を確認しましょう。

• ウィンドウ上部に表示されるフォルダー名
• 左側のエクスプローラーに表示されるルートフォルダー
• 統合ターミナルでpwdを実行した結果

正しい状態は次のとおりです。

日本語を含まないパスを使用する理由

Windowsや現在の開発ツールの多くは、日本語を含むパスを扱えます。そのため、日本語のフォルダー名を使うと必ずエラーになるわけではありません。

ただし、コンパイラー、ビルドツール、シェルスクリプト、ライブラリ、古い開発ツールなどを組み合わせると、日本語の処理方法が一致しない場合があります。

たとえば、次のようなパスです。

C:\C言語学習\GUIアプリ

このようなパスでは、環境によって次の問題が発生する可能性があります。

• ターミナルで日本語が正しく表示されない
• 設定ファイルで文字コードの違いが発生する
• コンパイルコマンドがファイルを見つけられない
• 外部ツールへ渡したパスが正しく解釈されない
• エラーメッセージの原因を判断しにくくなる

C:\cguiのように半角英数字だけの短いパスを使用すると、こうした問題を避けやすくなります。

空白を含まないパスを使用する理由

パスに空白が含まれていると、コマンドが空白の位置で分割される場合があります。

たとえば、次のパスにはC LanguageとGUI Appの間に空白があります。

C:\C Language\GUI App

MSYS2では、次のようなパスになります。

/c/C Language/GUI App

空白を含むパスをコマンドで扱うには、ダブルクォーテーションで囲んだり、空白をエスケープしたりする必要があります。

cd "/c/C Language/GUI App"

入力する記号が増えるため、ダブルクォーテーションの付け忘れによるエラーが起こりやすくなります。

一方、C:\cguiには空白がありません。

cd /c/cgui

短いコマンドで移動できるため、初めてターミナルを使う場合でも操作しやすくなります。

パスの付け方を比較する

日本語や空白を含むパスの使用が禁止されているわけではありません。本コンテンツでは、パスに関係するトラブルを減らし、C言語とGTK 4の学習に集中するため、C:\cguiを使用します。

図3：エクスプローラー、VSCode、MSYS2が参照する同じ作業場所

この図から分かること

エクスプローラーで表示されるC:\cgui、Visual Studio Codeで開くcguiフォルダー、MSYS2 UCRT64 Bashで表示される/c/cguiは、すべて同じ場所です。

それぞれのアプリケーションで表記や見え方は異なりますが、同じ作業ディレクトリを参照することで、ファイルの編集、コンパイル、実行を一貫して行えます。

よくあるディレクトリの間違い

作業を始める前に、次のような間違いがないか確認しておきましょう。

cguiの中にcguiを作成している

次のような構造になっている場合は、cguiが二重になっています。

C:\cgui\cgui

本コンテンツで使用する基準のディレクトリは次の場所です。

C:\cgui

デスクトップに作成している

エクスプローラーで見た目が同じcguiでも、デスクトップ上に作成した場合は別の場所です。

C:\Users\ユーザー名\Desktop\cgui

Cドライブの直下に作成した場合は次のようになります。

C:\cgui

エクスプローラーのアドレス欄で確認してください。

MSYS2のホームディレクトリに作成している

MSYS2 UCRT64 Bashを起動した直後は、ホームディレクトリにいる場合があります。

pwd

次のように表示される場合は、C:\cguiではありません。

/home/ユーザー名

次のコマンドで移動します。

cd /c/cgui

PowerShellで確認コマンドを実行している

PowerShellでは、pwdを実行するとWindows形式のパスが表示される場合があります。

Path
----
C:\cgui

MSYS2 UCRT64 Bashでは次のように表示されます。

/c/cgui

どちらも場所としては同じですが、本コンテンツではMSYS2 UCRT64 Bashを使用します。ターミナル名とecho $MSYSTEMの結果を確認してください。

次の作業へ進む前の確認

次の項目を順番に確認してください。

• エクスプローラーでC:\cguiを作成した
• cguiはCドライブの直下にある
• フォルダー名に日本語を使用していない
• フォルダー名に空白を使用していない
• Visual Studio CodeでC:\cguiを開いた
• 左側のエクスプローラーにcguiが表示されている
• 統合ターミナルでMSYS2 UCRT64 Bashを起動した
• echo $MSYSTEMの結果がUCRT64になっている
• pwdの結果が/c/cguiになっている
• C:\cguiと/c/cguiが同じ場所だと理解できた

ここまで確認できたら、作業ディレクトリの準備は完了です。このC:\cguiを基準にして、次の項では章ごとのディレクトリを作成していきます。