チュートリアル：Qt Quick アプリケーション

このチュートリアルでは、Qt Extension for VS Code を使用して Qt Quick アプリケーションを作成する方法を解説します。プロジェクトウィザードを使用してプロジェクトを作成し、 Qt Quick Controls。また、プロジェクトに QML ファイルを追加する方法についても学びます。

完成したプロジェクトは「Code: QuickAddressBook」からダウンロードできます。

{QuickAddressBook アプリケーション}

開始する前に

開始する前に、以下の手順を実行してください：

Qt Quick アプリケーションプロジェクトを作成する

Visual Studio CodeでQt Quick プロジェクトを作成するには：

「Welcome 」に移動し、「New project 」を選択します。
Project で、 Qt Quick applicationを選択します。
Qt Quick アプリケーション}" src="images/vscodeext-create-new-project-quick.webp" title="{「新規アイテム」ビュー内の Qt Quick アプリケーション}"/>
Name で、「QuickAddressBook 」と入力します。
「Create in 」で、プロジェクトファイルのパスを入力します。
「Create 」を選択して、プロジェクトファイルを作成します。
プロジェクト用の CMake キットを選択します。

これで、動作する小さな「Qt Quick 」アプリケーションが完成しました。「ターミナルウィンドウで選択したプロジェクトを起動する」を選択して、ビルドして実行します。現時点では、結果は空のウィンドウになります。

メインウィンドウの設計

ウィザードによって、ApplicationWindow 型のルートオブジェクトを宣言するメインの QML ファイルが作成されました。このファイルを編集して、アプリケーションのメインウィンドウを設計します。

コンポーネントをコンテキストにバインドするには、Bound 引数を指定します。

pragma ComponentBehavior: Bound

ルート型で使用する予定のモジュールに対するimport文を追加します：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

title プロパティの値を、アプリケーションのメインウィンドウのタイトルに設定します:

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 480
    height: 640
    title: qsTr("Address Book")

ボタンを追加する

Add ボタンを作成するには、Button モジュールから型のオブジェクトを宣言します。 Qt Quick Controls モジュールからAdd... 型のオブジェクトを宣言します。ボタンのtext プロパティの値をに、font.pointSize プロパティの値を24 に設定します:

Button {
    id: addButton
    text: "Add..."
    font.pointSize: 24

アプリケーションを実行すると、次のように表示されるはずです：

{QuickAddressBookのメインウィンドウ}

ボタンをアクションに接続する

QMLにはシグナルとハンドラの仕組みがあります。ここで、シグナルはイベントを表し、シグナルハンドラを通じてシグナルに応答します。シグナルが発信されると、対応するシグナルハンドラが呼び出されます。スクリプトやその他の処理などのロジックをハンドラ内に記述することで、コンポーネントはイベントに応答できるようになります。

特定のオブジェクトに対して特定のシグナルが発火した際に通知を受け取るには、オブジェクト定義で `on<Signal>` という名前のシグナルハンドラを宣言する必要があります。ここで、`<Signal> ` はシグナルの名前であり、最初の文字は大文字にします。シグナルハンドラには、シグナルハンドラが呼び出された際に実行される JavaScript コードを含める必要があります。

Button 型にはclicked というシグナルがあり、ユーザーがボタンをクリックしたときに発火します。メインウィンドウでAdd ボタンが選択された際に、アドレス帳のエントリを追加するためのポップアップを表示するには、ボタンのonClicked シグナルハンドラを、ポップアップのopen() メソッドに接続する必要があります。

onClicked: newAddressPopup.open()

このポップアップは、後で独立した QML タイプとして追加することになります。

リストモデルを追加する

{クイックアドレス帳のエントリ}

ApplicationWindow 内で、連絡先データを格納するためのid addressList を持つListModel 型のオブジェクトを宣言します。リストモデルは、自由形式のリストデータソースを定義します：

ListModel {
    id: addressList
}

ユーザーがアドレス帳のエントリを追加するポップアップを定義する、カスタムNewAddressPopup 型のオブジェクトを宣言します。onAddressAdded シグナルハンドラを使用して、アドレス帳のエントリをaddressList モデルに追加します：

NewAddressPopup {
    id: newAddressPopup
    onAddressAdded: function(newName, newAddr) {
        addressList.append({name: newName, addr: newAddr})
}

NewAddressPopup 型は後で作成します。

ボタンの配置

`Button ` オブジェクトと `Repeater ` 型のインスタンスを配置するために、`ColumnLayout ` 型のオブジェクトを宣言します:

ColumnLayout {
    id: mainWindowLayout
    Layout.fillWidth: true
    spacing: 0
    Button {
        id: addButton
        Layout.preferredWidth: mainWindow.width
        Layout.fillWidth: true
        text: "Add..."
        font.pointSize: 24
        onClicked: newAddressPopup.open()
    }

Layout.fillWidth をtrue に設定し、アプリケーションがさまざまな画面サイズに対応できるようにします。列内の行間のspacing を0 に設定します。ボタンの推奨幅をメインウィンドウの幅にバインドします。

リピーターを追加する

Repeater ColumnLayout 型は、多くの類似したアイテムを作成します。これにはモデルとデリゲートがあり、モデルの各エントリに対して、モデルからのデータで初期化されたコンテキスト内でデリゲートがインスタンス化されます。などのポジショナー型のインスタンスでリピーターを囲むことで、リピーターが作成するデリゲートアイテムを視覚的に配置することができます。

リピーターで使用するmodel として、addressList を指定します：

Repeater {
    id: addressListViewer
    model: addressList
    Layout.preferredWidth: mainWindow.width
    Layout.fillWidth: true
}

リピーターがアドレス帳エントリのインスタンス化に使用する、カスタムAddressBookItem 型のオブジェクトを宣言します:

AddressBookItem {
    id: addressBookItem

AddressBookItem 型は後で作成します。

「Remove」ボタンをアクションに接続します

ユーザーがRemove ボタンをクリックした際に、onRemoved シグナルハンドラを使用して、アドレス帳のエントリをリストから削除します。

onRemoved: addressList.remove(index)

メインウィンドウの準備が整ったので、次に、ユーザーがアドレス帳のエントリを追加できるポップアップを作成します。AddressBookItem 型は、ユーザーがメインウィンドウに入力したデータをリピーターがインスタンス化することを指定します。

{QuickAddressBookのポップアップ}

Visual Studio CodeのQtファイルウィザードを使用して、ポップアップを定義するカスタム型を作成します。

プロジェクトにカスタム QML タイプを追加するには：

「Command Palette 」に移動し、「Qt: Create a new project or file 」を選択します。
File で、「QML file 」を選択します。
Name で、「NewAddressPopup 」と入力します。
Create in で、プロジェクトフォルダのパスの後にQuickAddressBookTypes と入力し、そのサブフォルダ内に新しいファイルを作成します。
「Create 」を選択して、カスタム QML タイプを作成します。

CMakeLists.txt ファイルの `QML_FILES ` セクションに `NewAddressPopup.qml ` を追加します:

qt_add_qml_module(appQuickAddressBook
    URI QuickAddressBook
    VERSION 1.0
    QML_FILES
        Main.qml
        QuickAddressBookTypes/AddressBookItem.qml
        QuickAddressBookTypes/NewAddressPopup.qml
)

NewAddressPopup.qml 内で、Popup 型のルートオブジェクトを宣言し、ApplicationWindow で開くポップアップを作成します。ポップアップには独自のレイアウトがないため、ColumnLayout とRowLayout を使用して、Name およびE-Mail Address フィールドを配置します。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Popup {
    id: newAddressPopup

modal プロパティをtrue に設定して、ポップアップをモーダルにするように指定します。focus プロパティをtrue に設定して、ポップアップがフォーカスを要求するように指定します：

modal: true
focus: true

width 、x 、およびy プロパティに値を指定して、メインウィンドウ上のポップアップの位置とサイズを設定します：

width: parent.width * 0.9
x: (parent.width - width) / 2
y: 35

ポップアップが開いた際、Name およびE-Mail Address フィールドにはプレースホルダーテキストが表示され、以前に入力された値はすべてクリアされる必要があります。onOpened シグナルハンドラを使用して、フィールドの値をリセットし、Name フィールドにフォーカスを移します:

onOpened: {
    nameField.text = "";
    addrField.text = "";
    nameField.focus = true;
}

位置指定フィールド

ColumnLayout 型のインスタンスを使用して、ポップアップの「Name 」および「E-Mail Address 」フィールドを指定するTextField オブジェクトを配置します:

ColumnLayout {
    anchors.fill: parent
    TextField {
        id: nameField
        placeholderText: qsTr("Name")
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true
    }
    TextField {
        id: addrField
        placeholderText: qsTr("E-Mail Address")
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true
    }

ボタンの配置

RowLayout 型のインスタンスを使用して、Add およびCancel ボタンを指定する2つのButton オブジェクトを配置します:

RowLayout {
    Layout.fillWidth: true
    Button {
        text: "Add"
        enabled: nameField.length > 0 && addrField.length > 0
        font.pointSize: 24
        Layout.preferredWidth: newAddressPopup / 2
        Layout.fillWidth: true

ボタンをアクションに接続する

ユーザーが「Add 」ボタンをクリックすると、Name およびE-Mail Address フィールドに入力された値がメインウィンドウのアドレスリストに追加され、ポップアップが閉じられます。

これを有効にするには、「addressAdded(string newName, string newAddr) 」シグナルを追加します：

signal addressAdded(string newName, string newAddr)

「Add 」ボタンの「onClicked 」シグナルハンドラを、「addressAdded() 」シグナルおよびポップアップの「close() 」メソッドに接続します：

    onClicked: {
        newAddressPopup.addressAdded(nameField.text, addrField.text)
        newAddressPopup.close()
    }
}

「Cancel 」ボタンについては、「onClicked 」シグナルハンドラをポップアップの「close() 」メソッドに接続し、データを保存せずにポップアップを閉じます:

Button {
    text: "Cancel"
    font.pointSize: 24
    Layout.preferredWidth: newAddressPopup / 2
    Layout.fillWidth: true
    onClicked: newAddressPopup.close()
}

アドレス帳のエントリを定義する

カスタム型 `AddressBookItem ` は、メインウィンドウでアドレス帳のエントリをどのように表示するかを指定します。

「ポップアップの作成」の手順に従って、AddressBookItem.qml という名前の新しいQMLファイルを作成し、CMakeLists.txt ファイルに追加します。

エントリを設計する

まず、Rectangle 型のルートオブジェクトを宣言します。これは、QMLでアプリケーションを作成する際に使用できる基本的な構成要素の1つです。後で参照できるように、id を割り当ててください。

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    id: addressBookItem

Rectangle およびText 型で使用するプロパティを設定します。

required property int index
required property string name
required property string addr

行ごとに色を交互に変えるには、color プロパティの値を設定します：

color: (index % 2) == 0 ? "dimgray" : "lightgray"

異なる画面サイズでもアプリケーションがスケーラブルになるように、矩形を親要素の左右の端に固定します。矩形のheight プロパティを、その中に含まれるテキスト項目の高さにバインドします：

anchors.left: parent.left
anchors.right: parent.right
height: itemText.height + 12

「削除」ボタンをアクションに接続します

「removed() 」シグナルを追加し、これを「Remove」ボタンの「onClicked 」シグナルハンドラに接続します。これにより、ユーザーがボタンをクリックした際に、メインウィンドウからアドレス帳のエントリが削除されます:

signal removed()

ボタンとテキストを配置する

RowLayout 型のインスタンス内で、RoundButton 型およびText 型のインスタンスを使用して、アドレス帳のエントリを定義します：

RowLayout {
    spacing: 12
    Layout.fillWidth: true
    RoundButton {
        id: deleteButton
        text: "??"
        font.pointSize: 12
        palette.buttonText: "red"
        onClicked: addressBookItem.removed()
    }

テキストの書式設定

text プロパティの値を設定し、ポップアップのname およびaddr フィールドの値を結合し、値に対して太字および斜体の書式設定を適用します：

Text {
    id: itemText
    font.pointSize: 24
    text: "<b>" + addressBookItem.name + "</b><br><i>" + addressBookItem.addr + "</i>"
}

これでアプリケーションの完成です。

「Qt プロジェクトの作成」、「プロジェクトへのファイルの追加」、「 QML Language Server の有効化」も参照してください 。

チュートリアル使い方

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.

チュートリアル：Qt Quick アプリケーション

開始する前に

Qt Quick アプリケーションプロジェクトを作成する

メインウィンドウの設計

ボタンを追加する

ボタンをアクションに接続する

リストモデルを追加する

ポップアップを宣言する

ボタンの配置

リピーターを追加する

「Remove」ボタンをアクションに接続します

ポップアップの追加

ポップアップの作成

ポップアップを設計する

ポップアップコントロールのリセット

位置指定フィールド

ボタンの配置

ボタンをアクションに接続する

アドレス帳のエントリを定義する

エントリを設計する

「削除」ボタンをアクションに接続します

ボタンとテキストを配置する

テキストの書式設定