C言語GUI入門｜学習を始める前に

C言語GUI入門｜学習を始める前に

C言語でGUIアプリを作成する学習では、これまでのコンソールプログラムにはなかったウィンドウ、ウィジェット、イベント、シグナル、コールバック関数などが登場します。

新しい言葉や関数が多いため、最初は難しく感じるかもしれません。しかし、C言語のすべてを完璧に理解し、GTK 4の関数をすべて暗記してから始める必要はありません。

本コンテンツでは、完成したサンプルプログラムを最初に動かし、正しく動作することを確認してから、少しずつ内容を書き換えます。この進め方なら、環境の問題とプログラムの問題を切り分けながら学習できます。

この記事では、GUIプログラミングで必要になるC言語の基礎知識、サンプルプログラムの使い方、書き換えるときの手順、GTK 4の関数との付き合い方を解説します。

C言語を完璧にしてから始める必要はない

GUIプログラミングを始める前に、C言語のすべてを理解しておく必要はありません。

まずは、次のような基礎を見たことがあり、簡単なプログラムの流れを追えることが目安になります。

• C言語の基本的なプログラム構造
• 変数とデータ型
• 演算子
• 条件分岐
• 繰り返し
• 関数
• 配列
• 文字列
• ポインタの基本
• 構造体の基本
• コンパイルと実行

分からないところがあっても、必要になったときに戻って確認すれば大丈夫です。

GUIアプリを実際に動かしながら学ぶことで、関数、ポインタ、構造体などが何のために使われているのか、具体的に理解しやすくなることもあります。

必要になるC言語の基礎知識

GUIプログラミングでは、C言語の基礎を組み合わせて画面と処理を作ります。

それぞれの知識がどのような場面で使われるのかを確認しておきましょう。

プログラムの基本構造

C言語のプログラムには、処理を開始する関数があります。GUIアプリでも、アプリケーションを作成し、実行を開始するための入口が必要です。

少なくとも、次の内容を確認できれば学習を始められます。

• ヘッダファイルを読み込む理由
• 関数の始まりと終わり
• 文の終わりにセミコロンを付けること
• 波括弧で処理の範囲を表すこと
• コメントの書き方
• プログラムが上から順番に処理されること

GTK 4を使うプログラムは、通常のコンソールプログラムより長く見えることがあります。しかし、1つずつ見ると、ヘッダファイル、関数、変数、関数呼び出しなど、これまでに学んだ要素で構成されています。

変数とデータ型

GUIアプリでも、数値、文字、状態などを変数に保存します。

たとえば、GUI電卓では次のようなデータを扱います。

• 入力された文字列
• 文字列から変換した数値
• 計算結果
• 選択された演算
• エラーが発生したかどうか

○×ゲームでは、次のようなデータを扱います。

• 各マスの状態
• 現在の手番
• ゲームが終了したかどうか
• 勝者
• 使用済みのマス数

int、double、charなどの基本的なデータ型と、変数への代入を理解しておくと進めやすくなります。

演算子

GUI電卓では、四則演算を行うために算術演算子を使用します。

入力内容の確認やゲームの勝敗判定では、比較演算子や論理演算子を使用します。

必要になる主な演算子は次のとおりです。

すべての演算子を暗記していなくても、必要な場面で使い方を確認できれば問題ありません。

条件分岐

条件分岐は、ユーザーの入力や現在の状態に応じて処理を変えるために使用します。

GUI電卓では、次のような判定が必要になります。

• 入力欄が空か
• 正しい数値が入力されているか
• どの演算ボタンが選ばれたか
• 0で割ろうとしていないか

○×ゲームでは、次のような判定が必要になります。

• クリックされたマスが空いているか
• プレイヤーが勝ったか
• コンピューターが勝ったか
• すべてのマスが埋まったか
• ゲームがすでに終了しているか

if文とelse文の基本的な使い方を確認しておきましょう。

繰り返し

繰り返しは、複数のウィジェットや配列要素を順番に処理するときに役立ちます。

○×ゲームでは、次のような場面で使用します。

• 9個のマスを確認する
• 空いているマスを探す
• ゲーム盤を初期化する
• 9個のボタンを空欄へ戻す
• 使用可能なマスを数える

for文の基本的な動作が分かれば、学習を進められます。while文も使えると、条件が成立している間だけ処理を繰り返す考え方を理解しやすくなります。

関数

GTK 4によるGUIプログラミングでは、多くの関数を利用します。

自分でも、次のような役割を持つ関数を作成します。

• アプリケーションの起動時に画面を作る関数
• ボタンがクリックされたときに呼び出される関数
• 入力内容を確認する関数
• 計算を行う関数
• 勝敗を判定する関数
• ゲームを初期状態へ戻す関数

関数については、次の内容を確認しておきましょう。

• 関数名
• 引数
• 戻り値
• 関数の宣言
• 関数の呼び出し
• voidの意味
• 関数ごとに処理を分ける理由

GUIアプリでは、すべての処理を1つの関数へ書き込まず、役割ごとに関数を分けることが大切です。

配列と文字列

入力欄から取得するデータや、画面に表示するメッセージは文字列として扱います。

C言語の文字列は、char型の配列とナル文字によって表現されます。

次の内容を理解しておくと進めやすくなります。

• 文字と文字列の違い
• char配列
• 文字列の最後にあるナル文字
• 文字列の長さ
• 文字列を比較する方法
• 文字列を数値へ変換する必要性

○×ゲームでは、3×3のゲーム盤を管理するために二次元配列を利用します。

配列の添字が0から始まることや、二次元配列の行と列の考え方も確認しておきましょう。

ポインタ

GTK 4では、ウィンドウ、ボタン、入力欄などのウィジェットをポインタとして扱う場面が多くあります。

最初から高度なポインタ操作を自由に行える必要はありません。まずは、次の内容を確認できれば十分です。

• ポインタはアドレスを保存する変数である
• &は変数のアドレスを取得する
• *はポインタが指しているデータを扱う
• NULLは有効なデータを指していない状態を表す
• 関数へポインタを渡せる
• ポインタを通して同じデータを利用できる

GTK 4のプログラムでは、ウィジェットを表すポインタが数多く登場します。最初は、画面上に作成した部品をプログラムから操作するための情報と考えるとよいでしょう。

構造体

構造体は、関連する複数のデータを1つにまとめるために使用します。

GUI電卓では、次のウィジェットを1つの構造体へまとめられます。

• 1つ目の入力欄
• 2つ目の入力欄
• 計算結果のラベル
• エラーメッセージのラベル

○×ゲームでは、次のデータをまとめられます。

• 9個のボタン
• 3×3のゲーム盤
• 結果表示ラベル
• ゲームが続いているかどうか
• 現在の手番

構造体を詳しく使った経験がなくても、本コンテンツ内で実際の用途を確認しながら学べます。

コンパイルと実行

C言語のソースファイルは、そのままでは実行できません。GCCでコンパイルし、実行ファイルを作成してから起動します。

GTK 4を使うプログラムでも基本は同じですが、コンパイルするときにGTK 4のヘッダファイルやライブラリを利用します。

コンパイルと実行については、第3章と第4章で段階的に解説します。

図1：GUI学習で利用するC言語の基礎知識

この図から分かること

GUIアプリは、C言語とは別の知識だけで作るものではありません。変数、条件分岐、繰り返し、関数、配列、ポインタなど、これまでに学んだC言語の基礎を組み合わせて作ります。

すべての内容を完璧に説明できなくても、簡単なプログラムの流れを追えれば学習を始められます。分からない内容は、実際に必要になった段階で確認しましょう。

学習開始前の確認表

次の表を使って、現在の理解度を確認してみましょう。

すべての項目に自信がなくても問題ありません。分からない項目を把握しておけば、記事中で登場したときに戻って確認しやすくなります。

サンプルプログラムを最初に動かす

第3章以降では、具体的なサンプルプログラムを使用します。

新しいプログラムを学ぶときは、内容を書き換える前に、掲載されている状態のままコンパイルして実行しましょう。

最初から自分の機能を追加すると、問題が起きたときに原因を見つけにくくなります。

最初にそのまま動かす理由

サンプルプログラムを変更せずに実行することで、次の内容を確認できます。

• 開発環境が正しく構築されている
• GCCが動作している
• GTK 4が認識されている
• 正しいターミナルを使用している
• 正しいディレクトリで作業している
• ソースファイルが正しく保存されている
• コンパイル方法が正しい
• 実行ファイルが作成されている
• GUIウィンドウが表示される
• 必要なDLLを読み込めている

サンプルがそのまま動けば、開発環境と基本的な操作が正しいことを確認できます。

その後に問題が起きた場合は、自分が書き換えた部分を中心に調べられます。

サンプルを動かす基本手順

サンプルプログラムを学習するときは、次の順番で進めます。

1. 使用するディレクトリを確認する
2. 指定されたファイル名でソースファイルを作成する
3. サンプルプログラムを省略せずに入力する
4. UTF-8で保存する
5. MSYS2 UCRT64 Bashを使用していることを確認する
6. 正しいディレクトリへ移動する
7. 指定された方法でコンパイルする
8. エラーや警告がないか確認する
9. 作成された実行ファイルを起動する
10. 記事に掲載された実行結果と比較する

最初の目的は、自分なりに変更することではなく、掲載されている完成状態を再現することです。

入力した内容を確認する

サンプルプログラムが動かない場合は、まず入力内容を確認します。

特に間違えやすいところは次のとおりです。

• 大文字と小文字
• セミコロン
• 丸括弧
• 波括弧
• ダブルクォーテーション
• 関数名
• 変数名
• ファイル名
• ファイルの拡張子
• 全角と半角
• インデントではなく、記号そのものの違い

エラーメッセージが表示された場合は、最初のエラーから順番に確認しましょう。1つの入力間違いが、複数のエラーを発生させることがあるからです。

実行できた状態を残しておく

サンプルプログラムが正しく動いたら、その状態を残しておくことをおすすめします。

たとえば、次のような方法があります。

• 動作したソースファイルを別名で保存する
• 書き換える前にファイルをコピーする
• 変更した内容をメモする
• 正常に動いたときの画面を記録する
• コンパイル時の警告がなかったことを確認する

正常に動く状態が残っていれば、変更後に問題が起きても比較できます。

動作を確認してから書き換える

サンプルプログラムが正しく動作したら、少しずつ内容を書き換えてみましょう。

一度に多くの場所を変更するのではなく、1回につき1つの内容だけ変更することがポイントです。

最初に変更しやすいところ

GUIアプリでは、次のような部分から変更すると、変化を確認しやすくなります。

• ウィンドウのタイトル
• ウィンドウの初期サイズ
• ラベルに表示する文字
• ボタンに表示する文字
• ウィジェット間の余白
• ウィジェットを並べる方向
• クリック後に表示するメッセージ
• 入力欄のプレースホルダー
• GTK CSSによる文字サイズや色

画面を見れば変更結果が分かるため、関数と表示の関係を理解しやすくなります。

1つ変更するたびに確認する

書き換えは、次の流れで進めます。

1. 変更する目的を決める
2. 関係する場所を1つ変更する
3. ソースファイルを保存する
4. 再コンパイルする
5. エラーや警告を確認する
6. 実行する
7. 期待した結果になったか確認する
8. 問題がなければ次の変更へ進む

この流れを繰り返すと、どの変更が画面や動作へ影響したのかを把握しやすくなります。

一度に変更すると原因が分からなくなる

たとえば、次の内容を一度に変更したとします。

• ウィンドウタイトルを変更する
• ボタンを追加する
• レイアウトを変更する
• コールバック関数を書き換える
• CSSを追加する

この状態でプログラムが動かなくなると、どの変更が原因なのかを調べるのが大変です。

1つずつ変更すれば、直前の変更に問題がある可能性が高いと判断できます。

図2：サンプルを動かしてから書き換える学習サイクル

この図から分かること

最初にサンプルプログラムをそのまま動かし、正しい実行結果を確認します。動作を確認できたら、1か所だけ変更して再びコンパイルと実行を行います。

変更と確認を小さく繰り返すことで、ソースコードのどの部分が画面や動作に関係しているのかを理解できます。

問題が起きた場合も、直前に変更した部分へ調査範囲を絞れます。

変更前に予想する

サンプルプログラムを書き換える前に、どのような結果になるか予想してみましょう。

たとえば、次のように考えます。

予想してから実行結果を確認すると、関数や設定の役割を理解しやすくなります。

予想と違う結果になった場合も、それは失敗ではありません。なぜ違ったのかを調べることが、理解につながります。

エラーを学習の手がかりにする

プログラムを書き換えると、エラーや警告が発生することがあります。

エラーは、プログラムを作成できない原因を知らせる情報です。警告は、実行ファイルを作成できても、問題になる可能性がある箇所を知らせます。

問題が起きたときは、慌てて全体を書き直すのではなく、次の順番で確認しましょう。

1. ファイルを保存したか
2. 正しいファイルをコンパイルしたか
3. 最初に表示されたエラーは何か
4. エラーが示している行を確認したか
5. その直前の行に間違いがないか
6. 関数名や変数名が一致しているか
7. 括弧やセミコロンが不足していないか
8. 直前に変更した内容は何か
9. 動作していた状態と比較したか

GUIアプリでは、コンパイルは成功しても、ウィンドウが表示されない、ボタンが反応しないなどの問題が起こることがあります。

その場合も、変更前の状態へ戻し、1つずつ確認すると原因を見つけやすくなります。

コンパイルエラーと動作上の問題を分ける

問題は、大きく次の種類に分けて考えられます。

どの種類の問題なのかを考えると、確認する場所を絞り込めます。

GTK 4の関数をすべて暗記する必要はない

GTK 4には、ウィンドウ、ボタン、入力欄、レイアウト、画像、メニューなどを扱うための多くの関数があります。

これらをすべて暗記しようとすると、学習を始める前に疲れてしまいます。

実際の開発でも、必要な関数を資料やドキュメントで確認しながら使用します。

覚えるのは関数名より役割

最初は関数名を一字一句暗記するよりも、どのような機能があるのかを理解しましょう。

たとえば、次のように分類して覚えると整理しやすくなります。

このような役割が分かれば、必要なときに目的の関数を探せます。

よく使う関数は自然に覚える

ウィンドウ、ボタン、入力欄などの基本機能は、学習の中で何度も使用します。

繰り返し使う関数は、無理に暗記しなくても自然に覚えていきます。

一方、めったに使わない関数は、必要になったときに調べれば十分です。

関数名から役割を予想する

GTK 4の関数名には、対象となるウィジェットと操作内容が含まれていることが多くあります。

関数名を見るときは、次のように分けて考えます。

• どの種類のウィジェットを扱うのか
• 新しく作成するのか
• 値を設定するのか
• 値を取得するのか
• 子ウィジェットを追加するのか
• 画面へ表示するのか

関数名を丸ごと記号のように覚えるのではなく、名前の構造から役割を読み取ることが大切です。

引数と戻り値を確認する

関数を調べるときは、関数名だけでなく、次の内容を確認します。

• 何をする関数か
• どの型のデータを渡すか
• 引数の順番
• 戻り値があるか
• 戻り値は何を表すか
• NULLを指定できるか
• 取得したデータを変更してよいか
• 取得したデータを解放する必要があるか

最初はすべてを理解できなくても構いません。サンプルプログラムの中で、どの値がどの引数へ渡されているのかを確認しましょう。

GTK 4の公式資料を辞書のように使う

GTK 4の公式資料には、データ型、関数、プロパティ、シグナルなどの情報が掲載されています。

最初から公式資料を順番にすべて読む必要はありません。分からない関数やウィジェットが登場したときに、辞書のように利用します。

調べるときは、次の内容に注目します。

• ウィジェットの目的
• 作成方法
• 使用できる関数
• 設定できるプロパティ
• 発生するシグナル
• 引数と戻り値
• 使用上の注意
• 対応しているGTKのバージョン

インターネットで検索するときは、GTK 3向けの記事とGTK 4向けの記事を混同しないように注意しましょう。

本コンテンツではGTK 4を使用するため、調べた資料がGTK 4向けであることを確認します。

自分用のメモを作る

学習中によく使ったウィジェットや関数は、自分用のメモに整理すると便利です。

たとえば、次のような項目を記録します。

• ウィジェットの名前
• 主な役割
• 作成するときに使う機能
• 表示内容を変更する機能
• よく使うシグナル
• コールバック関数の目的
• 注意したエラー
• 参考にした記事の場所

関数名だけを並べるのではなく、何のために使ったのかも一緒に記録すると、後から見返したときに理解しやすくなります。

図3：暗記よりも調べながら使うGTK 4の学習方法

この図から分かること

GTK 4の関数をすべて暗記するのではなく、作りたい機能に応じて必要なウィジェットや関数を調べます。

調べた内容をサンプルプログラムで試し、正しく動作したら自分用のメモへ追加します。同じ機能を何度も使ううちに、基本的な関数や考え方は自然に身につきます。

つまずいたときは小さな状態へ戻す

GUIアプリへ機能を追加していると、突然動かなくなることがあります。

その場合は、さらに変更を重ねるのではなく、最後に動いていた小さな状態へ戻りましょう。

次の順番で確認します。

1. 変更前のファイルを開く
2. 変更前の状態が動くか確認する
3. 変更した箇所を1つずつ戻す
4. エラーが消える場所を調べる
5. 問題の原因を確認する
6. 変更方法を見直す
7. もう一度小さく変更する

動作していた状態を保存しておくと、この確認を行いやすくなります。

分からない行をそのままにしすぎない

最初は、サンプルプログラムのすべてを理解できなくても問題ありません。

ただし、分からない行をすべて無視したまま進むと、プログラムを書き換えるのが難しくなります。

次のように段階を分けて確認するとよいでしょう。

• 最初はプログラム全体が何をするか確認する
• 次に関数ごとの役割を確認する
• 変数が何を保存しているか確認する
• ウィジェット同士の親子関係を確認する
• シグナルとコールバック関数の接続を確認する
• コールバック関数が画面をどう変更するか確認する

一度ですべて理解するのではなく、同じサンプルを何度か見直しながら理解を深めます。

学習中に意識すること

C言語とGTK 4の学習では、次のことを意識すると進めやすくなります。

• サンプルプログラムを省略せずに入力する
• 最初は書き換えずに動かす
• エラーや警告を読み飛ばさない
• 正常に動いた状態を残す
• 一度に1つだけ変更する
• 変更前に結果を予想する
• 変更後は必ず再コンパイルする
• 画面だけでなくターミナルも確認する
• 分からない関数は資料で調べる
• GTK 3とGTK 4を混同しない
• 関数名より役割を理解する
• 必要に応じてC言語の基礎へ戻る

学習を開始するときの確認事項

第2章以降へ進む前に、次の内容を確認しておきましょう。

• Windows上で学習する
• 作業ディレクトリとしてC:\cguiを使用する
• Visual Studio Codeでソースファイルを編集する
• ソースファイルはUTF-8で保存する
• MSYS2 UCRT64環境を使用する
• GCCでC言語のプログラムをコンパイルする
• GUIにはGTK 4を使用する
• 最初にサンプルをそのまま動かす
• 動作確認後に少しずつ書き換える
• GTK 4の関数は必要なときに調べる

第2章では、WindowsへMSYS2、GCC、GTK 4、Visual Studio Codeを導入し、GUIアプリを作成するための開発環境を準備します。