PySide6で作るToDoリストアプリ入門|PythonでGUIを簡単に体験

プログラミング
記事内に広告が含まれています。
スポンサーリンク

はじめに

Pythonでプログラミングに少し慣れてくると、「そろそろGUIアプリを作ってみたいな」と思う方も多いのではないでしょうか?
コンソールだけで完結するスクリプトも便利ですが、ウィンドウを表示してボタンやテキストボックスが操作できる「GUIアプリ」は、より実用的で使いやすいツールへとステップアップする絶好の方法です。

本記事では、PythonのGUIライブラリ「PySide6(パイサイド・シックス)」を使って、シンプルなToDoリストアプリを作成する方法を、初心者向けにわかりやすく丁寧に解説していきます。

このToDoアプリは以下のような機能を備えています:

  • テキストを入力してタスクを追加
  • リストからタスクを選んで削除
  • 見た目はシンプルでも、GUIアプリの基本要素をしっかり体験
brian
brian

PythonでGUIアプリを作ってみたいけど、何から始めればいいかわからない…

そんな方に向けて、PySide6を使った「ToDoリストアプリ」の作り方を、初心者向けに丁寧にまとめました!ボタンや入力欄の使い方も一歩ずつ解説しているので、はじめてのGUI開発にピッタリです。

誰に向いている記事?

  • PySide6を使って何か作ってみたい方
  • PythonでのGUI開発を体験してみたい方
  • ボタンやテキスト入力など、基本的なウィジェットの使い方を学びたい方

もし、まだPySide6の基本がわからないという方は、以下の記事を先に読むとスムーズです。

どんな力が身につくの?

このチュートリアルを終えるころには、

  • PySide6での画面レイアウトの作り方
  • ボタンやテキストボックスなどの基本的なUI部品の使い方
  • Pythonでのイベント処理(ボタンを押したときの動き)
    といった、GUIアプリ開発の「はじめの一歩」を踏み出せているはずです。
スポンサーリンク

使用技術と環境

この章では、今回のToDoリストアプリを作成するために使用するライブラリや、開発環境について簡単に説明します。
これから環境構築をする方も安心して取り組めるように、インストール方法までしっかり解説していきます。

PySide6とは?

PySide6は、C++向けのGUIフレームワーク「Qt(キュート)」のPythonバインディングです。
同じようなものに「PyQt」もありますが、PySide6はLGPLライセンスのため、商用利用もしやすく、Qt公式のサポートがあるのが特徴です。

PythonでGUIアプリを作りたい場合、Tkinterよりも見た目が洗練されており、実用性の高いアプリが作りやすいという利点があります。

開発環境(執筆時のバージョン)

今回の記事では、以下の環境で動作確認を行いました:

  • Python:3.11.5
  • PySide6:6.6.1
  • OS:Windows 11

※ macOSやLinuxでも同じコードで動作するはずですが、ウィンドウの見た目やフォントが若干異なる場合があります。

ライブラリのインストール方法

まずはPythonがインストールされていることを確認してください。
その上で、以下のコマンドを使ってPySide6をインストールします。

Bash
pip install pyside6

インストールが完了したら、念のためバージョンを確認しておくと安心です。

Bash
python -m pip show pyside6

問題なくインストールされていれば、準備は完了です!

スポンサーリンク

アプリの設計概要

この章では、これから作成するToDoリストアプリの全体的な設計方針について説明します。
あらかじめ機能や画面の構成を把握しておくことで、実装がずっとスムーズになりますよ。

実現する機能

今回のToDoアプリには、以下のような基本的な機能を実装します:

  • タスクの追加
     → 入力欄にテキストを入力して、[追加]ボタンでリストにタスクを追加
  • タスクの削除
     → リストからタスクを選択し、[削除]ボタンで消去
  • (オプション)タスクの完了チェック
     → チェックボックスで完了済みかどうかを示す(今回は簡単のため省略予定)

このアプリは、あくまで**「GUIの基本に慣れる」ことが目的**です。
そのため、データの保存や編集といった複雑な機能は扱いませんが、今後の応用の基礎として最適です。

使用する主なウィジェット

PySide6でGUIを作るには、**ウィジェット(部品)**を組み合わせて画面を構成します。
今回のToDoアプリで使用する主要なウィジェットは以下の通りです。

ウィジェット役割
QLineEditタスク入力用のテキストボックス
QPushButton「追加」「削除」などのボタン
QListWidgetタスクを一覧表示するリスト
QVBoxLayout / QHBoxLayoutウィジェットの配置を管理するレイアウト

アプリの画面イメージ

簡単に画面構成を図解すると、以下のようになります(テキストによる説明):

LESS
-----------------------------
| [ QLineEdit ]  [追加]ボタン |
|                             |
| [ QListWidget(タスクリスト) ] |
|                             |
|           [削除]ボタン       |
-----------------------------
  • 一番上にタスク入力欄と追加ボタン
  • 中央にタスクリスト(QListWidget
  • 下部に削除ボタン

シンプルながらも、GUIアプリの基本要素がしっかり詰まった構成です。

スポンサーリンク

メインウィンドウの作成

この章では、ToDoリストアプリの「画面の骨組み」を作る部分に取り組んでいきます。
PySide6では、ウィンドウ本体をQMainWindowQWidgetで定義し、そこに各ウィジェット(部品)を配置していきます。

今回は、シンプルにQWidgetをベースにしたウィンドウを作成し、その上にレイアウトとウィジェットを組み合わせて画面を構築します。

必要なモジュールのインポート

まずは、PySide6から必要なクラスをインポートしましょう。

Python
import sys
from PySide6.QtWidgets import (
    QApplication, QWidget, QVBoxLayout,
    QHBoxLayout, QLineEdit, QPushButton, QListWidget
)

ここでインポートしているものの簡単な説明:

  • QApplication:アプリ全体の動作を制御する「エンジン」
  • QWidget:画面の基本単位となるウィンドウ
  • QVBoxLayout / QHBoxLayout:縦方向・横方向のレイアウト
  • QLineEdit:タスク入力用のテキストボックス
  • QPushButton:操作用ボタン(追加・削除)
  • QListWidget:タスクリストの表示

メイン画面のクラスを作成

次に、アプリのウィンドウを表すクラスを作成します。
ここではQWidgetを継承し、UIの初期化を行います。

Python
class ToDoApp(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("ToDoリストアプリ")
        self.setGeometry(100, 100, 400, 300)
        self.setup_ui()

ここではウィンドウのタイトルやサイズを設定し、setup_ui()メソッドでレイアウトやウィジェットの構築を行うようにしています。

レイアウトとウィジェットの配置

次に、setup_ui()メソッドの中身を作っていきます。

Python
    def setup_ui(self):
        # メインの縦レイアウト
        layout = QVBoxLayout()

        # 入力欄と追加ボタンの横並びレイアウト
        input_layout = QHBoxLayout()
        self.task_input = QLineEdit()
        self.task_input.setPlaceholderText("タスクを入力してください")
        self.add_button = QPushButton("追加")
        input_layout.addWidget(self.task_input)
        input_layout.addWidget(self.add_button)

        # タスクリスト
        self.task_list = QListWidget()

        # 削除ボタン
        self.delete_button = QPushButton("削除")

        # レイアウトにウィジェットを追加
        layout.addLayout(input_layout)
        layout.addWidget(self.task_list)
        layout.addWidget(self.delete_button)

        self.setLayout(layout)

解説:

  • 入力エリア:タスクを入力するQLineEditと、追加操作をするQPushButtonQHBoxLayoutで横に並べます。
  • リスト表示:タスク一覧を表示するためにQListWidgetを使います。
  • 削除ボタン:リストの下に配置し、選択されたタスクを削除できるようにします。

アプリケーションの起動処理

最後に、Pythonスクリプトとして実行したときにウィンドウを表示させるコードを記述します。

Python
if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = ToDoApp()
    window.show()
    sys.exit(app.exec())

ここまでで、ToDoアプリの画面構成と初期表示の部分が完成しました。
実行すれば、ウィンドウに入力欄・ボタン・リストが表示されるはずです。

スポンサーリンク

タスクの追加機能の実装

前章で、入力欄・ボタン・タスクリストの画面レイアウトが完成しました。
この章では、**「タスクを入力して[追加]ボタンをクリックすると、リストに表示される」**という機能を実装します。

GUIアプリでこのような動作を実現するには、**イベント処理(=ユーザーの操作に反応するしくみ)**を理解する必要があります。

イベント処理とは?

GUIアプリでは、ボタンがクリックされたり、キーボード入力があったりと、ユーザーからの操作を受けてアプリが何かの処理を実行します。
PySide6では、この仕組みを「シグナルとスロット」と呼びます。

  • シグナル:何かが起きたときに発せられる合図(例:ボタンがクリックされた)
  • スロット:その合図を受け取って実行される処理(例:テキストをリストに追加)

簡単にいうと「ボタンが押されたら、この関数を実行してね!」とつなげておくイメージです。

ボタンに処理を紐づける

それでは、前章で作成したToDoAppクラスに、追加ボタンのクリックイベントを設定してみましょう。
setup_ui()の最後に以下のコードを追加します:

Python
        # ボタンのクリックイベントと処理の紐づけ
        self.add_button.clicked.connect(self.add_task)

ここでは、add_buttonがクリックされたときに、add_task()メソッドが呼び出されるようにしています。

タスク追加の処理を実装

次に、add_task()というメソッドをクラス内に定義します。
このメソッドでは、テキスト入力欄から文字列を取得し、それをリストに追加する処理を行います。

Python
    def add_task(self):
        task = self.task_input.text().strip()
        if task:
            self.task_list.addItem(task)
            self.task_input.clear()
        else:
            # 入力が空だった場合は何もしない
            pass

処理の流れ:

  1. 入力欄からテキストを取得(text()
  2. 空白を除去(strip()
  3. 空でない場合は、QListWidgetにタスクを追加(addItem()
  4. 入力欄をクリアして、次の入力をしやすくする

動作確認

ここまでのコードを保存し、スクリプトを実行してみてください。
以下のような動作が確認できれば成功です:

  • 入力欄に「買い物に行く」と入力し、「追加」ボタンを押すとリストに表示される
  • 複数のタスクを次々に追加できる
  • 空欄のままボタンを押しても何も起こらない(無効化)
スポンサーリンク

タスクの削除機能の実装

前章では、タスクを入力して追加する機能を実装しました。
今回は、選択されたタスクを削除する機能を追加して、より実用的なToDoアプリにしていきましょう。

削除機能の考え方

削除機能は以下のような流れで動作します:

  1. ユーザーがリストの中から削除したいタスクをクリックして選択
  2. 「削除」ボタンをクリック
  3. 選択されたタスクがリストから消える

操作としてはシンプルですが、リストから「選択中の項目」を取得し、それを削除するという処理が必要になります。

削除ボタンに処理を紐づける

まずは、削除ボタンがクリックされたときに処理を呼び出せるようにします。
前章と同じように、setup_ui()メソッドの中に次のコードを追加してください:

Python
        self.delete_button.clicked.connect(self.delete_task)

これで「削除」ボタンが押されたときに、delete_task()メソッドが実行されるようになります。

削除処理の実装

次に、delete_task()メソッドをクラス内に定義します。
選択されている項目を取得して、それをリストから削除する処理です。

Python
    def delete_task(self):
        selected_items = self.task_list.selectedItems()
        if not selected_items:
            return  # 選択されていない場合は何もしない

        for item in selected_items:
            self.task_list.takeItem(self.task_list.row(item))

処理の解説:

  • selectedItems():リスト内で選択されている項目(QListWidgetItem)を取得します。
  • takeItem(row):指定した行番号のアイテムを削除します。
    • row(item)で、対象のアイテムがリストの何行目にあるかを取得できます。

これにより、複数項目が選択されている場合でもすべて削除可能です。

動作確認ポイント

アプリを実行して、以下のような動作が確認できれば成功です:

  • リスト内の項目をクリックして選択後、「削除」ボタンを押すとリストから消える
  • 複数選択して削除も可能(CtrlやShiftキーを使って選択)
  • 何も選択していないときに削除ボタンを押しても、何も起こらない(エラーもなし)
スポンサーリンク

コード全体と実行方法

ここまでの章で、ToDoリストアプリの構成要素を1つずつ実装してきました。
この章では、それらを1つのスクリプトとしてまとめた完成コードを掲載し、あわせて実行方法を確認します。

完成コード

以下が今回作成したToDoリストアプリの全体コードです。
このままコピーして .py ファイルとして保存すれば、そのまま動作します。

Python
import sys
from PySide6.QtWidgets import (
    QApplication, QWidget, QVBoxLayout,
    QHBoxLayout, QLineEdit, QPushButton, QListWidget
)

class ToDoApp(QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("ToDoリストアプリ")
        self.setGeometry(100, 100, 400, 300)
        self.setup_ui()

    def setup_ui(self):
        # メインの縦レイアウト
        layout = QVBoxLayout()

        # 入力欄と追加ボタンの横並びレイアウト
        input_layout = QHBoxLayout()
        self.task_input = QLineEdit()
        self.task_input.setPlaceholderText("タスクを入力してください")
        self.add_button = QPushButton("追加")
        input_layout.addWidget(self.task_input)
        input_layout.addWidget(self.add_button)

        # タスクリスト
        self.task_list = QListWidget()

        # 削除ボタン
        self.delete_button = QPushButton("削除")

        # 各ウィジェットをメインレイアウトに追加
        layout.addLayout(input_layout)
        layout.addWidget(self.task_list)
        layout.addWidget(self.delete_button)

        # レイアウトをウィンドウに設定
        self.setLayout(layout)

        # ボタンに処理を紐づけ
        self.add_button.clicked.connect(self.add_task)
        self.delete_button.clicked.connect(self.delete_task)

    def add_task(self):
        task = self.task_input.text().strip()
        if task:
            self.task_list.addItem(task)
            self.task_input.clear()

    def delete_task(self):
        selected_items = self.task_list.selectedItems()
        if not selected_items:
            return
        for item in selected_items:
            self.task_list.takeItem(self.task_list.row(item))

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = ToDoApp()
    window.show()
    sys.exit(app.exec())

実行方法

このコードを保存して実行するまでの流れは以下の通りです:

ファイルとして保存

例:ファイル名を todo_app.py とします。

ターミナルまたはコマンドプロンプトで実行

Bash
python todo_app.py

ウィンドウが表示される

  • 「タスクを入力してください」と書かれた欄に文字を入力
  • 「追加」ボタンでリストに追加
  • リストから選択し、「削除」ボタンでタスクを消去

特別な設定は必要なく、PySide6がインストールされていればすぐに動作します。

スポンサーリンク

まとめと今後のステップ

今回は、PySide6を使ってシンプルなToDoリストアプリを作成する方法を、ステップバイステップで解説してきました。
「ウィンドウが開いて」「ボタンを押すと反応があって」「リストに表示が変わる」――それだけでも、GUIアプリ開発の楽しさや奥深さを体験できたのではないでしょうか?

学んだポイントの振り返り

  • PySide6の基本的なウィジェット(QLineEdit, QPushButton, QListWidget)の使い方
  • レイアウトの設計(QVBoxLayout, QHBoxLayout)
  • シグナルとスロットを使ったイベント処理の考え方
  • 実用的なアプリを段階的に作り上げる方法

今後のステップアップ案

今回のToDoアプリはデータをメモリ上だけで扱う非常にシンプルな構成でした。
次のステップとして、以下のようなテーマに挑戦してみるのがおすすめです:

タスクの永続保存

  • SQLiteやJSONを使って、アプリ終了後もタスクを保存・読み込みできるようにする

UIをもっと便利に

  • Qt Designerを使って画面レイアウトを視覚的に設計
  • タブやメニューの追加でより多機能に

配布用にビルド

  • 作ったアプリを.exeファイルにして、他の人にも配布できるようにする
  • PyInstallerやcx_Freezeを活用

Udemy講座


実際に動画を見て勉強したい方には今回は特に以下の講座がオススメですよ!
以下のリンクからぜひ内容を確認してみてくださいね。

スポンサーリンク

おわりに

GUIアプリ開発は、最初はとっつきにくい印象があるかもしれませんが、一度手を動かしてみると驚くほど楽しくて達成感があります
ぜひこの記事をきっかけに、PySide6を使ったアプリ開発の世界に一歩踏み出してみてください。

今後も、実践的なアプリ制作の解説記事を順次公開していきますので、お楽しみに!

brian
brian

ここまで読んでいただきありがとうございます!

UdemyのPythonコースにはオンラインで学習ができる動画コンテンツがたくさんあります。

当ブログのような文章メインの説明では足りない箇所を補えると思うので、もっと詳しく勉強したいという方はぜひチェックしてみてください!

コメント

タイトルとURLをコピーしました