MENU
contact

VSCodeでGUIアプリを開発する方法について

VSCode

採用はこちら

VSCode（Visual Studio Code）を使えば、Windows・macOS・Linux向けのGUIアプリを開発できます。
ただし、VSCode自体にGUIアプリを作成する機能が備わっているわけではありません。

実際には、ElectronやTauri、Tkinter、WPFなどのGUIフレームワークを利用し、そのソースコードをVSCodeで編集・実行・デバッグする形で開発を進めます。

Web開発の経験がある場合は、HTML・CSS・JavaScriptを活用できるElectronやTauriが比較的取り組みやすいでしょう。
一方、Pythonで簡単なGUIツールを作りたい場合はTkinter、Windows専用の業務アプリを作りたい場合はWPFなどが候補になります。

目次

VSCodeでGUIアプリを開発する基本的な仕組み

VSCodeは、GUIフレームワークそのものではなく、コード編集やデバッグ、ターミナル操作などを行うための開発環境です。

GUIアプリを開発するときは、主に次のような構成になります。

役割使用するもの
コード編集VSCode
GUI表示Electron、Tauri、Tkinter、WPFなど
プログラミング言語JavaScript、TypeScript、Python、C#、Rustなど
パッケージ管理npm、pip、NuGetなど
実行VSCodeの統合ターミナル
デバッグVSCodeのRun and Debug
バージョン管理Git、VSCodeのSource Control

VSCodeでは、JavaScript・TypeScript・Node.js向けのデバッグ機能が標準で利用できます。
PythonやC#などでは、対応する拡張機能を追加することでデバッグ環境を整えられます。

ブレークポイントを設定し、F5キーでデバッグを開始することも可能です。

VSCodeでGUIアプリを作る代表的な方法

GUIアプリ開発にはさまざまな選択肢があります。
代表的な方法として、Electron、Tauri、Tkinter、WPFがあります。

方法主な言語主な対応OS向いている用途
ElectronJavaScript / TypeScriptWindows / macOS / LinuxWeb技術を使ったデスクトップアプリ
TauriJavaScript / TypeScript + RustWindows / macOS / Linuxなど軽量なWeb技術系アプリ
TkinterPythonWindows / macOS / Linux学習用、小規模ツール、社内ツール
WPFC#WindowsWindows専用業務アプリ

目的や使用したい言語によって、適したフレームワークは異なります。

ElectronでGUIアプリを開発する

Electronとは

Electronは、HTML・CSS・JavaScriptなどのWeb技術を使ってデスクトップアプリを開発するためのフレームワークです。

Electron内部にはChromiumとNode.jsが組み込まれており、1つのコードベースからWindows・macOS・Linux向けのアプリを開発できます。

WebサイトやWebアプリの制作経験がある場合、比較的理解しやすいGUIアプリ開発手法です。

Node.jsをインストールする

Electronを利用するには、Node.jsが必要です。

VSCodeのターミナルで次のコマンドを実行し、Node.jsとnpmが利用できるか確認します。

node -v
npm -v

バージョン番号が表示されれば準備完了です。

Electronプロジェクトを作成する

まず、プロジェクト用のディレクトリを作成します。

mkdir my-electron-app
cd my-electron-app
npm init -y

続いてElectronをインストールします。

npm install --save-dev electron

Electronの基本的なファイル構成

例えば、次のような構成にします。

my-electron-app/
├─ main.js
├─ preload.js
├─ index.html
├─ renderer.js
└─ package.json

Electronでは、主に次のような役割分担があります。

Main Process
↓
ウィンドウ管理やOSとの連携

Preload Script
↓
RendererとMain Processの橋渡し

Renderer Process
↓
HTML・CSS・JavaScriptによる画面表示

main.jsを作成する

main.jsでは、アプリのウィンドウを作成します。

const { app, BrowserWindow } = require("electron");
const path = require("node:path");

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "preload.js")
        }
    });

    win.loadFile("index.html");
}

app.whenReady().then(() => {
    createWindow();
});

BrowserWindowを使ってアプリのウィンドウを作成し、index.htmlを表示します。

index.htmlを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My GUI App</title>
</head>
<body>

<h1>VSCodeで作ったGUIアプリ</h1>

<button id="button">クリック</button>

<p id="message"></p>

<script src="renderer.js"></script>

</body>
</html>

Electronの画面部分は通常のWebページと同じようにHTMLで作成できます。

renderer.jsでGUIを操作する

const button = document.getElementById("button");
const message = document.getElementById("message");

button.addEventListener("click", () => {
    message.textContent = "ボタンがクリックされました。";
});

ボタンのクリックなど、画面上のイベントはWebアプリと同じようにJavaScriptで処理できます。

package.jsonを設定する

package.jsonに起動用のスクリプトを追加します。

{
  "scripts": {
    "start": "electron ."
  }
}

次のコマンドでアプリを起動します。

npm start

GUIウィンドウが表示されれば成功です。

Electron開発ではセキュリティに注意する

nodeIntegrationを安易に有効にしない

Electronでは、Renderer ProcessからNode.jsの機能を直接利用できるようにする設定があります。

しかし、

nodeIntegration: true

を安易に有効にすると、セキュリティリスクが高くなる可能性があります。

現在のElectronでは、Rendererに必要な機能だけを安全に公開する設計が推奨されています。

preloadとcontextBridgeを利用する

基本的には次のような構成を意識します。

Renderer
↓
contextBridge
↓
Preload
↓
IPC
↓
Main Process

RendererからOS機能やNode.js機能へ無制限にアクセスさせるのではなく、必要な機能だけをpreload経由で公開します。

なお、現在のElectronではRendererのsandboxがデフォルトで有効になっているため、preloadでも利用できるNode.js APIが制限される場合があります。

TauriでGUIアプリを開発する

Tauriとは

Tauriは、HTML・CSS・JavaScriptなどでGUIを作成し、Rustを使ってネイティブ側の処理を実装できるフレームワークです。

Electronと似ていますが、Chromiumをアプリごとに同梱するのではなく、原則としてOS側のWebViewを利用します。

そのため、Electronと比較して配布サイズを小さくしやすい傾向があります。
ただし、実際のメモリ使用量や処理性能は、アプリの構成や使用するライブラリによって変わります。

Tauriの基本構造

HTML / CSS / JavaScript
          ↓
        WebView
          ↓
         Tauri
          ↓
          Rust
          ↓
           OS

Web技術とネイティブ処理を組み合わせて開発します。

Tauriの開発環境を準備する

Tauriを利用するにはRustが必要です。

Windowsでは、Microsoft C++ Build ToolsやWebView2 Runtimeなども関係します。

React、Vue、ViteなどJavaScript系のフロントエンドツールを利用する場合は、Node.jsも必要です。

Node.jsはTauriそのものの必須要件ではなく、npmなどのJavaScriptエコシステムを利用する場合に必要になります。

Tauriプロジェクトを作成する

Node.jsを利用する構成であれば、次のコマンドでプロジェクトを作成できます。

npm create tauri-app@latest

プロジェクト作成時には、JavaScriptやTypeScript、React、Vue、Svelteなどの構成を選択できます。

作成後は、例えば次のように実行します。

cd my-app
npm install
npm run tauri dev

これでTauriアプリを開発モードで起動できます。

ElectronとTauriの違い

ElectronとTauriはどちらもWeb技術を利用できますが、内部構造が異なります。

比較項目ElectronTauri
UIHTML / CSS / JavaScriptHTML / CSS / JavaScript
ネイティブ側Node.js中心Rust中心
WebエンジンChromiumを同梱原則OSのWebView
導入難易度比較的簡単やや高め
Web開発経験の活用しやすいしやすい
配布サイズ大きくなりやすい小さくしやすい傾向
Rustの知識不要本格利用ではあると便利

Web開発経験者が最初にGUIアプリを作る場合はElectronが理解しやすいでしょう。

一方、アプリの配布サイズやネイティブ連携を重視する場合はTauriも有力な選択肢です。

PythonとTkinterでGUIアプリを開発する

Tkinterとは

Tkinterは、PythonからTcl/TkのGUIツールキットを利用するための標準的なインターフェースです。

Pythonで簡単なGUIアプリを作りたい場合に向いています。

VSCodeでPython環境を準備する

VSCodeにPython関連の拡張機能をインストールします。

Python自体が利用できるか、次のコマンドで確認します。

python --version

Windowsでは、環境によって次のコマンドを使う場合もあります。

py --version

Tkinterが使えるか確認する

次のコマンドを実行します。

python -m tkinter

GUIウィンドウが表示されれば、Tkinterを利用できます。

なお、OSやPythonのインストール方法によってはTkinterが別パッケージになっている場合があります。
一部のLinux環境では、追加インストールが必要になることがあります。

Tkinterアプリを作成する

main.pyを作成します。

import tkinter as tk
from tkinter import ttk

def button_click():
    label.config(text="クリックされました")

root = tk.Tk()

root.title("My GUI App")
root.geometry("400x300")

label = ttk.Label(
    root,
    text="VSCodeで作ったGUIアプリ"
)

label.pack(pady=30)

button = ttk.Button(
    root,
    text="クリック",
    command=button_click
)

button.pack()

root.mainloop()

次のコマンドで実行します。

python main.py

GUIウィンドウが表示されます。

ttkを利用する

Tkinterには、テーマに対応したttkウィジェットがあります。

例えば、

ttk.Button()

や、

ttk.Label()

などを利用できます。

従来のTkinterウィジェットより、OSのテーマになじみやすい外観を作りやすいのが特徴です。

C#とWPFでGUIアプリを開発する

WPFとは

WPFは、.NETで利用できるWindows向けのGUIフレームワークです。

C#とXAMLを組み合わせてGUIアプリを開発します。

データバインディングやレイアウト、スタイル、テンプレートなどが充実しており、Windows向けの業務アプリ開発などで利用されています。

WPFはWindows専用

.NET自体はWindows・macOS・Linuxなどに対応しています。

ただし、WPFはWindows専用です。

.NET
→ クロスプラットフォーム

WPF
→ Windows専用

この違いは理解しておく必要があります。

.NET SDKをインストールする

まず.NET SDKをインストールします。

次のコマンドで確認できます。

dotnet --version

VSCodeにC#環境を追加する

VSCodeでは、C#やC# Dev Kitなどの拡張機能を利用できます。

これにより、C#コードの補完やプロジェクト管理、デバッグなどを行いやすくなります。

WPFプロジェクトを作成する

Windows上で次のコマンドを実行します。

dotnet new wpf -n MyGuiApp

プロジェクトへ移動します。

cd MyGuiApp

VSCodeで開きます。

code .

実行する場合は次のコマンドを使用します。

dotnet run

XAMLでGUIを作成する

WPFでは、XAMLを使って画面を定義します。

<Window
    x:Class="MyGuiApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="My GUI App"
    Width="500"
    Height="300">

    <StackPanel Margin="30">

        <TextBlock
            Text="VSCodeでGUIアプリ"
            FontSize="24"
            Margin="0,0,0,20" />

        <Button
            Content="クリック"
            Width="120"
            Height="40" />

    </StackPanel>

</Window>

WPFではVSCodeとVisual Studioのどちらを使うべきか

VSCodeでもWPFのコード編集やビルド、実行はできます。

ただし、GUIを視覚的に編集できるXAML Designerなどを利用したい場合は、Visual Studioのほうが適しています。

整理すると、

コード中心でWPFを開発
→ VSCodeでも可能

GUIデザイナーを活用
→ Visual Studioが便利

と考えるとよいでしょう。

VSCodeでGUIをドラッグ＆ドロップできるのか

VSCodeには汎用GUIデザイナーが標準搭載されていない

VSCodeには、Visual StudioのWPF Designerのような汎用GUIデザイナーは標準搭載されていません。

そのため、ElectronやTauriではHTML・CSSなどを使ってコードベースでGUIを作るのが基本です。

外部GUIデザイナーを使う方法もある

フレームワークによっては、別のGUIデザイナーを利用できます。

例えば、QtではQt Designerなどを利用できます。

したがって、VSCodeそのものにGUIデザイナーがなくても、外部ツールを組み合わせることで視覚的にGUIを作れる場合があります。

VSCodeでGUIアプリをデバッグする方法

VSCodeでは、左側の「Run and Debug」からデバッグできます。

一般的にはF5キーでデバッグを開始できます。

ブレークポイントを設定すると、

GUIを操作
↓
イベント発生
↓
ブレークポイントで停止
↓
変数を確認
↓
ステップ実行

という流れで処理を確認できます。

VSCodeでは、Variables、Watch、Call Stack、Debug Consoleなどを使ってアプリの状態を確認できます。

GUIアプリのコードは役割ごとに分ける

アプリが大きくなってきたら、GUIと処理を分離することが重要です。

例えばElectronなら、次のような構成が考えられます。

src/
├─ main/
│   └─ main.js
├─ preload/
│   └─ preload.js
├─ renderer/
│   ├─ index.html
│   ├─ app.js
│   └─ style.css
└─ services/
    ├─ database.js
    └─ api.js

処理の流れも、

UI
↓
イベント処理
↓
ビジネスロジック
↓
APIやデータベース

のように分離すると、保守しやすくなります。

GUIアプリからAPIを利用する

GUIアプリからWeb APIを利用することもできます。

例えばJavaScriptでは、fetchを使ってAPIへアクセスできます。

const response = await fetch(
    "https://example.com/api/users"
);

const users = await response.json();

これにより、

デスクトップアプリ
↓
Web API
↓
Webサーバー
↓
データベース

という構成も作れます。

GUIアプリからデータベースを利用する

GUIアプリでは、SQLite、MySQL、PostgreSQLなどのデータベースを利用できます。

ローカルアプリならSQLiteが使いやすい

小規模なデスクトップアプリでは、SQLiteが扱いやすい選択肢です。

GUIアプリ
↓
SQLite

サーバーを用意せず、ローカルにデータを保存できます。

MySQLやPostgreSQLはAPI経由が安全

インターネット経由で利用するGUIアプリの場合、データベースへ直接接続する設計は推奨されないケースがあります。

例えば、

GUIアプリ
↓
HTTPS API
↓
バックエンド
↓
MySQL / PostgreSQL

という構成にします。

GUIアプリ内にデータベースのIDやパスワードを直接埋め込むと、ユーザー側から取得される可能性があるためです。

GUIアプリを配布する

開発したGUIアプリは、ユーザーがインストールできる形式へパッケージ化できます。

代表的な形式には次のようなものがあります。

Windows
.exe
.msi

macOS
.app
.dmg

Linux
.AppImage
.deb
.rpm

実際に作成できる形式は、利用するフレームワークやビルドツールによって異なります。

クロスプラットフォーム開発ではビルド環境にも注意する

ElectronやTauriではWindows・macOS・Linux向けアプリを開発できます。

ただし、

クロスプラットフォーム対応
=
どのOSからでもすべての配布物を簡単に作れる

という意味ではありません。

例えばmacOS向けアプリでは、コード署名や公証、Appleの開発環境などが必要になる場合があります。

最終的な配布を考える場合は、各OSの署名やビルド要件も確認する必要があります。

GUIアプリ開発ではElectronやTauri以外の選択肢もある

GUIアプリを開発できるフレームワークは、ElectronやTauriだけではありません。

例えば、次のような選択肢があります。

Python
├─ Tkinter
├─ PySide
└─ PyQt

C#
├─ WPF
├─ WinForms
├─ WinUI
├─ .NET MAUI
└─ Avalonia

Java
└─ JavaFX

C++
└─ Qt

Web技術
├─ Electron
└─ Tauri

作りたいアプリや使用したい言語に合わせて選択することが重要です。

初心者におすすめのGUI開発環境

Python初心者ならTkinter

プログラミングを始めたばかりで、簡単なGUIツールを作りたい場合は、

Python
+
Tkinter
+
VSCode

が比較的取り組みやすいでしょう。

少ないコードでもボタンや入力フォームを作成できます。

Web開発経験者ならElectron

HTML・CSS・JavaScriptに慣れている場合は、

Electron
+
JavaScript / TypeScript

がおすすめです。

Webアプリと近い感覚でデスクトップアプリを作れます。

軽量なWeb技術系アプリならTauri

配布サイズやネイティブ連携を重視する場合は、

Tauri
+
TypeScript
+
React / Vue / Svelte

などが有力です。

ただし、Rustやネイティブ開発環境の知識が必要になるため、Electronよりやや学習コストが高くなる場合があります。

Windows専用アプリならWPF

Windows向けの業務アプリを作るなら、

C#
+
WPF

も有力な選択肢です。

コード中心ならVSCodeでも開発できますが、GUIデザイナーを積極的に利用するならVisual Studioも検討するとよいでしょう。

VSCodeでGUIアプリを開発するおすすめの学習手順

初めてGUIアプリを作る場合は、次の順番で進めると理解しやすくなります。

1. VSCodeをインストール

↓

2. 使用するプログラミング言語を決める

↓

3. GUIフレームワークを決める

↓

4. ウィンドウを表示する

↓

5. ボタンを配置する

↓

6. クリックイベントを実装する

↓

7. 入力フォームを追加する

↓

8. ファイル保存を実装する

↓

9. APIやデータベースと連携する

↓

10. アプリをパッケージ化する

最初から大規模なアプリを作るより、ボタンや入力フォーム、ファイル保存などを備えた小さなアプリから始めると、GUIアプリの仕組みを理解しやすくなります。

まとめ

VSCodeでGUIアプリを開発する場合は、VSCodeとGUIフレームワークを組み合わせて利用するのが基本です。

目的別に整理すると、次のようになります。

Web技術を活用したい
→ Electron

Web技術を使いつつ配布サイズも重視したい
→ Tauri

Pythonで簡単なGUIを作りたい
→ Tkinter

Windows専用の業務アプリを作りたい
→ C# + WPF

VSCodeはGUI専用のIDEではありませんが、コード編集、統合ターミナル、Git、デバッグ、拡張機能などを組み合わせることで、GUIアプリ開発にも十分活用できます。

特にWeb開発経験がある場合はElectronやTauriとの相性がよく、既存のHTML・CSS・JavaScript・TypeScriptの知識を活用しながらデスクトップアプリ開発へ進めます。

一方、簡単なツールならTkinter、Windowsネイティブの業務アプリならWPFなど、用途に応じて適切な技術を選ぶことが重要です。

以上、VSCodeでGUIアプリを開発する方法についてでした。

最後までお読みいただき、ありがとうございました。

VSCode
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

  1. ホーム
  2. VSCode
  3. VSCodeでGUIアプリを開発する方法について
目次