QtでHello world!

# はじめに
QtのGUIで「Hello world」を表示してみたいと思います。
PushBottonをクリックすると、「Hello world」をラベルに表示させます。
Qtのインストールは、
[こちら](https://qiita.com/tom_tom_tom/items/e16618aa5040998252a3)
を参照してください

# Qt(Qt Creator)の起動
「アプリケーションを表示する」をクリックします。
一覧から「Qt Creator」を見つけ、クリックして起動します。

# 最初の設定
## Qt用のディレクトリの作成
ホームディレクトリの下に、qtというディレクトリを作成します(各人の好みで構いません)
## Qt Creatorの設定
「ヘルプ」→「プラグインについて」をクリックします。
ClangCodeModelのチェックを外します。
下記はインストール状態での設定
![Screenshot from 2022-12-15 13-23-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/1eb1987c-7956-4467-7730-1cc76094352f.png)
チェックを外して、「閉じる」ボタンをクリックします。
クリック後、ダイアログが表示しますので、「Restart Now」をクリックします。
要は設定を変更したので、Qtの再起動が必要になります。

# プロジェクトの作成
## New
下の赤枠の「+ New」ボタンをクリックします。
![Screenshot from 2022-12-15 13-29-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/d391e662-3a1f-b328-6823-3029a4d4dee4.png)
## 新しいプロジェクト
「Qt Widgets Application」になっていることを確認して、「Choose...」をクリックします。
![Screenshot from 2022-12-15 13-30-52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/797c690c-cb1e-8ba0-00e9-87f9864ac32d.png)
## プロジェクトパス
名前が無題と赤くなっていますので、「HelloWorld」に変更します(各人の好みで構いません)
パスは先ほどホームディレクトリに作成した「qt」を指定し、「次へ」をクリックします。
![Screenshot from 2022-12-15 13-39-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/400f8a33-8f40-bf39-d89e-30ef91ab716b.png)
## ビルドシステムの定義
次へをクリックします。
![Screenshot from 2022-12-15 13-42-51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/9cc0c8f9-a1b4-ea9e-f5dc-9e82a1437a2d.png)
## Class Information
今回はデフォルトのままにしますので、「次へ」をクリックします。
![Screenshot from 2022-12-15 13-45-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/2d378b7a-289d-ec5d-9903-26c77d47f943.png)
## Translation File
言語は日本語を選択します。
「Language:」の▼をクリックして、キーボードの「j」を押下して、Enterすると早いです。
「次へ」をクリックします。
![Screenshot from 2022-12-15 13-48-35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/c5ddb456-fabe-82f2-dd85-1f32c8031642.png)
## キットの選択
次へをクリックします。
![Screenshot from 2022-12-15 13-49-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/2af282de-e5f3-afdb-7383-7161d47700d7.png)
## プロジェクト管理
完了をクリックします。
![Screenshot from 2022-12-15 13-50-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/f458035c-df38-3488-d048-b370cfa15ee6.png)
## main.cppの表示
上記まで完了しますと、main.cppが表示されます。
ここからPushButton等を作成します。
![Screenshot from 2022-12-15 13-51-54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/058733c6-28e5-256f-e0d3-e6fa25320f3f.png)
# ボタンとラベルを配置
## フォームを開く
左にある「Forms」をダブルクリックします。
![Screenshot from 2022-12-15 13-51-54_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/fd109dc1-95a0-d730-9480-c43a36498ef0.png)
「mainwindow.ui」が表示します。
![Screenshot from 2022-12-15 13-58-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/63d12b37-4675-9445-b89e-37fd0724a8c8.png)
「mainwindow.ui」をダブルクリックしますと、下記のように表示します。
![Screenshot from 2022-12-15 14-00-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/5778ae16-263a-3e0a-e52a-f817aceb81d8.png)
## ボタンの配置
左側にある「PushBotton」を中央へドラッグアンドドロップします。
位置は適当で構いません。
![Screenshot from 2022-12-15 14-00-10_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/79bd1f67-9af1-41e3-8393-c100131365dd.png)
## ラベルの配置
左側にある「Label」を中央へドラッグアンドドロップします。
位置は適当で構いません。
![Screenshot from 2022-12-15 14-03-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/314135cc-5915-c511-16c9-aef20594c238.png)
## ボタン、ラベルの配置後
![Screenshot from 2022-12-15 14-05-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/57127ca9-538b-3596-83eb-bc8e749c385c.png)
# イベントを発生させる
## スロットへ移動
「PushButton」をクリックさせてイベントを発生させたいので、「PushButton」を右クリックして、スロットへ移動をクリックします。
## クリック選択
「clicked()」をクリックして、「OK」をクリックします。
![Screenshot from 2022-12-15 14-09-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/4dedac6f-a7ec-96dd-f628-f9d87e8ebafa.png)
## メンバの自動登録
上記のOKをクリックしますと、mainwindow.cppに「void MainWindow::on_pushButton_clicked()」のメンバ関数が登録されます。
mainwindow.hにも登録されます。
``` mainwinodw.cpp
void MainWindow::on_pushButton_clicked()
{
    
}
```

``` mainwindow.h
private slots:
    void on_pushButton_clicked();
```
# 実装
## ラベルへ「Hello World」を表示させる
先程作成された、void MainWindow::on_pushButton_clicked()」に以下を追記します。
``` mainwinodw.cpp
void MainWindow::on_pushButton_clicked()
{
    ui->label->setText("Hello World");
}
```
## build&run
左下の「実行」をクリックします。
![Screenshot from 2022-12-15 14-17-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/637239aa-0f71-564b-534f-b768d980ecfc.png)
保存していなければ、下記のダイアログが表示します。
面倒ですので、「ビルド前にすべてのファイルを保存するにチェックを入れたほうが楽です。
![Screenshot from 2022-12-15 14-19-37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/598f858b-f18b-c0ad-76d1-525e6d2c4454.png)
## 表示エラーが無ければ、下記の画面が表示します。
![Screenshot from 2022-12-15 14-21-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/39dac734-ff80-9a3b-7aa0-d972397af5bf.png)
## PushButtonをクリックしてみる
さぁいよいよ待ちに待ったボタンをクリックします。
画面に表示している「PushButton」をクリックしてみてください。
## クリック後の表示
ラベルの幅が狭くてすべて表示されておりませんが、ラベルの表示が、「Text Label」から「Hello Wor」に変わったと思います。
ラベルの幅を変えてみて全文表示するか試してください。
![Screenshot from 2022-12-15 14-24-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/475f6b69-68f4-e53b-c5d8-dffc33ff903d.png)
## ラベルの幅を修正
ラベルの幅が「55」でしたので「80」にしてみました。
![Screenshot from 2022-12-15 14-28-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/3fcf9347-c1ea-6523-c934-26054460d4d7.png)
## 再実行
PushButtonをクリックすると、今度は「Hello World」のすべてが表示しました。
![Screenshot from 2022-12-15 14-28-56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1473918/a2aceec3-c389-ba6a-1334-c8080a992a55.png)
# まとめ
Visual Studioしか使ったことがない人は、Qtに慣れるまで大変だと思いますが、慣れれば実装の考え方は変わらないと私は思います。
# おまけ
WindowsからSSHでUbuntuに入れるのでしたら、TeraTermでbuild、sambaでソース修正することもできます。