C言語GUI入門｜章ごとのディレクトリを作成する

本コンテンツでは、C:\cguiの中に章ごとのディレクトリを作成し、ソースファイルや実行ファイルを学習内容ごとに整理します。

作成するディレクトリは、chap03からchap08までの6個です。

C:\cgui
   ├─ chap03
   ├─ chap04
   ├─ chap05
   ├─ chap06
   ├─ chap07
   └─ chap08

第1章と第2章では具体的なC言語プログラムを作成しないため、chap01とchap02は作成しません。最初にプログラムを保存する第3章からディレクトリを用意します。

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

章ごとにディレクトリを分ける理由
作成する6個のディレクトリの役割
エクスプローラーを使った作成方法
MSYS2 UCRT64 Bashを使った作成方法
Visual Studio Codeでディレクトリを確認する方法
正しい場所に作成できたか確認する方法
ディレクトリ名を間違えた場合の対応

この段階では、まだC言語のソースプログラムは作成しません。これから作成するファイルを整理して保存するための入れ物を準備します。

章ごとにディレクトリを分ける理由

C:\cguiの中へすべてのファイルを直接保存すると、学習が進むにつれてファイルの数が増え、どの章で使用するファイルなのか分かりにくくなります。

たとえば、次のようなファイルが同じ場所に置かれていると、目的を判断するのが難しくなります。

通常のC言語プログラム
GTK 4を使用するプログラム
GUI電卓のファイル
CSSファイル
配布用の実行ファイル
GTK 4の実行に必要なDLL
○×ゲームのファイル

章ごとにディレクトリを分けると、それぞれの学習内容に関係するファイルだけをまとめて管理できます。

整理方法	状態
すべてC:\cguiへ保存する	ファイルが増えると目的を判断しにくい
章ごとのディレクトリへ保存する	どの章のファイルかすぐに判断できる
開発用と配布用を分ける	配布に必要なファイルを整理しやすい
完成作品ごとに分ける	電卓と○×ゲームのファイルが混ざらない

プログラムに問題が起きたときも、関係する章のディレクトリだけを確認すればよいため、原因を探しやすくなります。

作成するディレクトリの全体構成

本コンテンツでは、C:\cguiを起点として、次のようにディレクトリを整理します。

C:\cgui
   ├─ chap03
   ├─ chap04
   ├─ chap05
   ├─ chap06
   ├─ chap07
   └─ chap08

chapはchapterを短くした名前です。その後ろに章番号を2桁で付けています。

chap03

chap03は第3章、chap04は第4章を表します。

章番号を03、04のように2桁で統一すると、エクスプローラーやVisual Studio Codeで名前順に並べたとき、章の順番が分かりやすくなります。

図1：C:\cguiのディレクトリ構成

この図から分かること

C:\cguiが学習全体の基準となるディレクトリです。その中にchap03からchap08までのディレクトリを作成します。

それぞれのディレクトリには異なる役割があります。通常のC言語プログラム、GTK 4のサンプル、GUI電卓、配布用ファイル、○×ゲームを分けて保存することで、ファイルが混ざらなくなります。

chap01とchap02を作成しない理由

本コンテンツでは、chap03からディレクトリを作成します。

第1章では、GUIアプリケーションやGTK 4の基本的な考え方を学びます。第2章では、WindowsにMSYS2、GCC、GTK 4、Visual Studio Codeを用意します。

第1章と第2章では具体的なC言語ソースプログラムを作成しないため、プログラムを保存するためのchap01とchap02は必要ありません。

章	主な内容	ディレクトリ
第1章	C言語GUI開発の基礎	作成しない
第2章	開発環境の構築	作成しない
第3章	通常のC言語プログラム	chap03
第4章	最初のGTK 4プログラム	chap04
第5章	ウィジェットとレイアウト	chap05
第6章	GUI電卓	chap06
第7章	Windows向け配布	chap07
第8章	○×ゲーム	chap08

chap01やchap02を作成してもコンピューター上の問題はありませんが、本コンテンツと同じ構成にすると、説明どおりに操作しやすくなります。

chap03の役割

chap03には、第3章で作成する通常のC言語プログラムを保存します。

C:\cgui\chap03

MSYS2では、次のように表します。

/c/cgui/chap03

第3章では、GTK 4を使用する前に、一般的なコンソールプログラムを使って次の流れを学びます。

C言語のソースファイルを作成する
GCCでコンパイルする
exe形式の実行ファイルを作成する
ターミナルからプログラムを実行する
コンパイルエラーや警告を確認する
Visual Studio Codeからビルドする

このディレクトリで、ソースファイルの作成から実行までの基本操作を身につけます。

chap04の役割

chap04には、第4章で作成する最初のGTK 4プログラムを保存します。

C:\cgui\chap04

MSYS2での表記は次のとおりです。

/c/cgui/chap04

第4章では、GTK 4を使ってウィンドウを表示し、ボタンを配置します。

主に次の内容を扱います。

GtkApplicationを使ったアプリケーションの管理
GTK 4のウィンドウ作成
ウィンドウタイトルと初期サイズの設定
ボタンの配置
クリックされたときの処理
pkg-configを利用したコンパイル

chap03の通常のC言語プログラムと、chap04のGTK 4プログラムを分けることで、コンパイル方法の違いも確認しやすくなります。

chap05の役割

chap05には、第5章で作成するウィジェットのサンプルを保存します。

C:\cgui\chap05

MSYS2では次のように表します。

/c/cgui/chap05

第5章では、GUI画面を構成するさまざまなウィジェットとレイアウトを学びます。

GtkLabelによる文字の表示
GtkButtonによるボタンの作成
GtkEntryによる文字の入力
GtkBoxによる縦方向と横方向の配置
GtkGridによる格子状の配置
イベントとコールバック関数
複数ウィジェットの管理

機能ごとに複数のサンプルを作成する可能性があるため、専用のchap05へまとめて保存します。

chap06の役割

chap06には、第6章で作成するGUI電卓のファイルを保存します。

C:\cgui\chap06

MSYS2での表記は次のとおりです。

/c/cgui/chap06

GUI電卓では、これまでに学んだウィジェットやレイアウトを組み合わせ、ひとつのGUIアプリケーションを完成させます。

数値を入力する入力欄
足し算、引き算、掛け算、割り算のボタン
計算結果を表示するラベル
入力エラーの確認
0による割り算への対応
入力内容を消去するクリア機能
画面を整えるGTK CSS

ソースファイルだけでなく、CSSファイルなども使用するため、GUI電卓に関係するファイルをchap06にまとめます。

chap07の役割

chap07には、第7章で作成するWindows向けの配布用ファイルを保存します。

C:\cgui\chap07

MSYS2では次のように表します。

/c/cgui/chap07

第6章のchap06はGUI電卓を開発する場所です。それに対してchap07は、完成したGUI電卓をほかのWindows環境で実行できる形に整理する場所です。

chap07では、主に次のファイルを扱います。

配布用にビルドした実行ファイル
実行に必要なDLL
GTK 4のテーマ関連ファイル
アイコン関連ファイル
CSSや画像
使用方法を記載したREADME
ZIP形式にまとめる配布ファイル

開発中のファイルと配布用ファイルを分けることで、どのファイルを利用者へ渡すのか確認しやすくなります。

chap08の役割

chap08には、第8章で作成する○×ゲームのファイルを保存します。

C:\cgui\chap08

MSYS2での表記は次のとおりです。

/c/cgui/chap08

第8章では、3×3のゲーム盤を持つ○×ゲームを作成します。

GtkGridを使った3×3のゲーム盤
9個のボタン
プレイヤーによる○の配置
コンピューターによる×の配置
二次元配列によるゲーム状態の管理
縦、横、斜めの勝敗判定
引き分けの判定
ゲームのリセット
ゲーム画面を整えるGTK CSS
Windows向け配布ファイルの作成

GUI電卓とは別の完成作品なので、chap08へ独立して保存します。

ディレクトリの役割を一覧で確認する

ディレクトリ	対応する章	保存するもの
chap03	第3章	通常のC言語プログラム
chap04	第4章	最初のGTK 4プログラム
chap05	第5章	ウィジェットのサンプル
chap06	第6章	GUI電卓
chap07	第7章	Windows向け配布用ファイル
chap08	第8章	○×ゲーム

作業するときは、最初に対応するディレクトリへ移動してからファイルを作成します。

たとえば、第6章のGUI電卓を作成するときはchap06を使用します。chap04やchap05に保存すると、どの章のファイルなのか分かりにくくなるため注意しましょう。

エクスプローラーでディレクトリを作成する

最初に、Windowsのエクスプローラーを使う方法を確認します。

WindowsキーとEキーを押してエクスプローラーを開きます。
Cドライブを開きます。
cguiフォルダーを開きます。
何もない場所を右クリックします。
「新規作成」を選択します。
「フォルダー」を選択します。
フォルダー名としてchap03を入力します。
Enterキーを押して名前を確定します。

同じ操作を繰り返して、次のディレクトリを作成します。

chap03
chap04
chap05
chap06
chap07
chap08

すべて作成すると、エクスプローラーには6個のディレクトリが表示されます。

C:\cgui
   ├─ chap03
   ├─ chap04
   ├─ chap05
   ├─ chap06
   ├─ chap07
   └─ chap08

ディレクトリ名は、すべて半角英数字で入力します。

MSYS2 UCRT64 Bashでディレクトリを作成する

MSYS2 UCRT64 Bashでは、mkdirコマンドを使ってディレクトリを作成できます。

最初に、現在使用している環境を確認します。

echo $MSYSTEM

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

UCRT64

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

cd /c/cgui

現在の作業ディレクトリを確認します。

pwd

実行結果が次のようになっていることを確認します。

/c/cgui

正しい場所へ移動できたら、6個のディレクトリをまとめて作成します。

mkdir chap03 chap04 chap05 chap06 chap07 chap08

mkdirは、make directoryを短くしたコマンドです。mkdirの後ろへ複数のディレクトリ名を空白で区切って指定すると、一度に複数のディレクトリを作成できます。

記述	意味
mkdir	ディレクトリを作成するコマンド
chap03	第3章用のディレクトリ名
chap04	第4章用のディレクトリ名
chap05	第5章用のディレクトリ名
chap06	第6章用のディレクトリ名
chap07	第7章用のディレクトリ名
chap08	第8章用のディレクトリ名

コマンドが正常に完了した場合、通常はメッセージが表示されません。

図2：MSYS2で6個のディレクトリを作成する

この図から分かること

MSYS2 UCRT64 Bashでは、mkdirを使って複数のディレクトリをまとめて作成できます。

ただし、mkdirを実行する前にpwdで現在の場所を確認することが大切です。pwdの結果が/c/cguiになっていれば、作成したディレクトリはC:\cguiの中へ保存されます。

ターミナルで作成したディレクトリは、WindowsのエクスプローラーやVisual Studio Codeにも同じように表示されます。

作成したディレクトリを確認する

MSYS2 UCRT64 Bashでディレクトリを作成したら、lsを実行します。

ls

実行結果の例は次のとおりです。

chap03  chap04  chap05  chap06  chap07  chap08

表示方法や画面の幅によっては、複数行に分かれて表示されることがあります。6個すべてが表示されていれば問題ありません。

詳しい情報を表示したい場合は、lsに-lオプションを付けます。

ls -l

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

total 0
drwxr-xr-x 1 user None 0 Sep 1 20:00 chap03
drwxr-xr-x 1 user None 0 Sep 1 20:00 chap04
drwxr-xr-x 1 user None 0 Sep 1 20:00 chap05
drwxr-xr-x 1 user None 0 Sep 1 20:00 chap06
drwxr-xr-x 1 user None 0 Sep 1 20:00 chap07
drwxr-xr-x 1 user None 0 Sep 1 20:00 chap08

ユーザー名、グループ名、日時などは使用している環境によって異なります。

各行の先頭がdになっていれば、その項目がディレクトリであることを表しています。

drwxr-xr-x

この先頭のdがdirectoryを表します。

Visual Studio Codeでディレクトリを確認する

C:\cguiをVisual Studio Codeで開いている場合、作成したディレクトリは左側のエクスプローラーに表示されます。

CGUI
 ├─ chap03
 ├─ chap04
 ├─ chap05
 ├─ chap06
 ├─ chap07
 └─ chap08

表示されない場合は、エクスプローラー上部にある更新ボタンを押します。Visual Studio Codeを開き直す必要はありません。

C:\cgui以外のフォルダーを開いている場合は、次の手順で開き直します。

メニューバーの「ファイル」を選択します。
「フォルダーを開く」を選択します。
C:\cguiを選択します。
「フォルダーの選択」を押します。

統合ターミナルでも現在の場所を確認します。

pwd

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

/c/cgui

続いて、ディレクトリの一覧を確認します。

ls
chap03  chap04  chap05  chap06  chap07  chap08

Visual Studio Codeのエクスプローラーと統合ターミナルの両方で6個のディレクトリを確認できれば、正しい場所に作成されています。

ディレクトリの中へ移動する

章ごとの学習を始めるときは、対応するディレクトリへ移動します。

たとえば、第3章のディレクトリへ移動する場合は、次のように入力します。

cd /c/cgui/chap03

すでに/c/cguiにいる場合は、ディレクトリ名だけを指定できます。

cd chap03

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

pwd

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

/c/cgui/chap03

ひとつ上のC:\cguiへ戻る場合は、次のコマンドを使用します。

cd ..

もう一度pwdで確認します。

pwd
/c/cgui

2つのピリオドは、現在のディレクトリのひとつ上を表します。

絶対パスと相対パス

ディレクトリへ移動するときは、絶対パスまたは相対パスを指定できます。

種類	コマンド例	意味
絶対パス	cd /c/cgui/chap03	Cドライブからすべての場所を指定する
相対パス	cd chap03	現在の場所を基準に指定する
親ディレクトリ	cd ..	ひとつ上のディレクトリへ移動する

絶対パスは、現在どこにいても同じディレクトリを指定できます。

相対パスは短く入力できますが、現在いる場所によって移動先が変わります。相対パスを使う前にはpwdで現在の場所を確認すると安心です。

ディレクトリ名を統一する

本コンテンツでは、次の命名規則を使用します。

半角英字のchapを使用する
章番号は2桁にする
すべて小文字にする
空白を入れない
日本語を入れない
ハイフンや記号を追加しない

正しい名前は次のとおりです。

chap03
chap04
chap05
chap06
chap07
chap08

次のような名前にすると、本コンテンツの説明と一致しなくなります。

chap3
Chap03
chapter03
chap 03
第3章
chap03-folder

Windowsでは大文字と小文字を区別しない場合がありますが、教材と同じ小文字表記に統一しておくと、設定ファイルやコマンドを確認しやすくなります。

ディレクトリ名を間違えた場合

ディレクトリ名を間違えた場合は、エクスプローラーで修正できます。

名前を間違えたディレクトリを右クリックします。
「名前の変更」を選択します。
正しい名前を入力します。
Enterキーで確定します。

MSYS2 UCRT64 Bashでは、mvを使って名前を変更できます。

たとえば、chap3をchap03へ変更する場合は次のようにします。

mv chap3 chap03

変更後にlsで確認します。

ls
chap03  chap04  chap05  chap06  chap07  chap08

名前を変更するときは、対象のディレクトリに必要なファイルが保存されていないか確認してから操作しましょう。

間違った場所に作成してしまった場合

mkdirを実行する前にC:\cguiへ移動していないと、別の場所にディレクトリが作成されることがあります。

たとえば、ホームディレクトリでmkdirを実行すると、次の場所に作成されます。

/home/ユーザー名/chap03

これはC:\cgui\chap03とは別のディレクトリです。

現在の場所はpwdで確認できます。

pwd

正しい場所は次のとおりです。

/c/cgui

ディレクトリを作成する前には、次の順番で確認する習慣を付けましょう。

cd /c/cgui
pwd
mkdir chap03 chap04 chap05 chap06 chap07 chap08
ls

この順番で操作すると、正しい場所へ作成できたことを確認しやすくなります。

すでにディレクトリが存在する場合

同じ名前のディレクトリがすでに存在する状態でmkdirを実行すると、次のようなメッセージが表示されます。

mkdir: cannot create directory 'chap03': File exists

File existsは、同じ名前のファイルまたはディレクトリがすでに存在することを表しています。

このメッセージが表示された場合は、新しく作り直す前にlsで確認します。

ls

必要なディレクトリがすでに存在していれば、そのまま使用できます。

ディレクトリが存在するだけで、内部のファイルが削除されたり上書きされたりすることはありません。

各ディレクトリを順番に使う流れ

学習を進めると、使用するディレクトリが次のように移っていきます。

chap03
  ↓
chap04
  ↓
chap05
  ↓
chap06
  ↓
chap07
  ↓
chap08

それぞれの段階で完成するものも変化します。

学習段階	使用するディレクトリ	完成するもの
C言語の実行確認	chap03	コンソールプログラム
GTK 4の基本	chap04	ウィンドウとボタン
ウィジェットの学習	chap05	入力フォームなどのサンプル
GUIアプリ制作	chap06	GUI電卓
Windows向け配布	chap07	GUI電卓の配布用ファイル
GUIゲーム制作	chap08	○×ゲーム

図3：章ごとのディレクトリを使う学習の流れ

この図から分かること

chap03からchap08までのディレクトリは、学習の順番に対応しています。

最初は通常のC言語プログラムでコンパイルと実行を確認し、次にGTK 4の基本を学びます。その後、ウィジェットのサンプル、GUI電卓、配布用ファイル、○×ゲームへ進みます。

章ごとにディレクトリを分けておくことで、以前の章で作成したファイルを残したまま、次の学習へ進めます。

次の作業へ進む前の確認

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

C:\cguiが作成されている
C:\cguiの中にchap03がある
C:\cguiの中にchap04がある
C:\cguiの中にchap05がある
C:\cguiの中にchap06がある
C:\cguiの中にchap07がある
C:\cguiの中にchap08がある
ディレクトリ名がすべて半角英数字になっている
chapの後ろの章番号が2桁になっている
Visual Studio CodeでC:\cguiを開いている
統合ターミナルでecho $MSYSTEMの結果がUCRT64になる
統合ターミナルでpwdの結果が/c/cguiになる
lsでchap03からchap08までが表示される

すべて確認できたら、章ごとのディレクトリの準備は完了です。これから作成するプログラムや関連ファイルは、対応する章のディレクトリへ保存していきます。