グラフィカルユーザインタフェース(英: graphical user interface、略称:GUI(ジーユーアイ、グイ、グーイ))は、コンピュータグラフィックスとポインティングデバイスなどを用いる、グラフィカル(ビジュアル)であることを特徴とするユーザインタフェース。キャラクタユーザインタフェース (CUI) やテキストユーザインタフェース (TUI) と対比して語られることが多い。

## 歴史

世界初の実用となったGUIは1963年に完成したSAGEというアメリカ空軍の開発した防空管制システムである。これはCRTとライトガンを備えており、核爆弾を搭載した敵航空機を迎撃するために多数のレーダーからの情報を統合し、複数のオペレーターがライトガンで迎撃目標を指示するだけで全軍の適切な箇所に自動で指令が届き、その結果レーダー情報の膨大さを気にすることなく的確に敵機を迎撃できるというものであった。

また、オシロスコープはテレビやディスプレイと同じ原理を使った装置だが、コンピュータの内部の信号を直接観察できる装置としても都合が良いため、初期のコンピュータではしばしばそのような目的でブラウン管が情報出力のために備えられていた。これはGUIとして扱うには機能的には足りないものだが、最初期のコンピュータの1基であるEDSACにも付いており、OXOというゲームに使われている。実用の目的で情報表示にブラウン管が使われた例としてはMARS-1(1960年、日本国有鉄道)がある。

1960年代の米国において、サザランドのSketchpadや、1960年代後半、マウスの発明者でもあるダグラス・エンゲルバートが率いるスタンフォード研究所の研究者は、当時の新しいデバイスであるマウスで操作されるテキストベースのハイパーリンクを使用するオンラインシステムNLSを開発した(軍用などの専用目的ではなく、汎用を意図した)。
1968年12月のNLSのデモンストレーションは、「すべてのデモの母」として知られるようになった。NLSはエンゲルバートの提唱する「人間知性の拡大」という概念を実現するために作られており、ハイパーテキスト、ハイパーリンク、マルチウインドウなどの今日的なGUIには必須の概念を実装して見せたきわめて革新的なものである。またジャーナルと呼ばれるハイパーテキストベースの文書共有システムは正にWikiと同じ概念である文書によるコラボレーション・グループウェアを実装したものである。NLSの本質は単なるGUIの実装ではなく、GUIは会話・画像・文書をリアルタイムで共有する電子会議を通じた知的共有グループウェアを実現するための手段であった。さらに、後にWYSIWYGと呼ばれることになる機能もこのとき既に実装されていた。

1970年代には、アラン・ケイにより、誰でも簡単に使えることを目指して暫定Dynabook環境が作られた。当初はData General社のNovaでスクリプト言語的な位置づけで開発されたSmalltalk-72だったが、約5〜10倍の能力とビットマップディスプレイ、マウスを装備したAltoへと移植され、マシンパワーを得るとすぐにオーバーラップ可能なウインドウシステムの構築が試みられた(Smalltalk-74)。このマルチウインドウシステムを効率よく機能させるために後に考え出されたダブルバッファリングおよびBitBltは、現在も、ちらつきのない画面描画のために使われるアルゴリズムおよびデータ操作/ハードウェア機能として知られる。

1974年までには、後にMicrosoft Wordの前身と言われるようになるBravoを開発していた別グループとの情報交換を経てパロアルト研究所初のWYSIWYGエディタも実装される。70年代半ば過ぎにはマウスによる操作、メニューによる命令実行、オーバーラップマルチウインドウシステム、絵と文章の共存できるWYSIWYGのマルチフォントエディタ、アイコンによる機能やオブジェクトの簡易表現など、現在ごくふつうに見られるグラフィカルユーザインタフェースの主要な要素は固まっていた。Smalltalk-72、同-74の後継であるSmalltalk-76ではさらに洗練・整備され、それを1979年に見たスティーブ・ジョブズが策定中のLisaの仕様決定に役立てた。

## 概要

GUIでは、コンピュータの画面上に、ウィンドウ、アイコン、ボタンといったグラフィックが表示され、ユーザはそれらの中から目的の動作を表すグラフィックスをマウスなどのポインティングデバイスで選択する。

基本的には「デスクトップ」「ウィンドウ」「メニュー」「アイコン」「ボタン」など要素を組み合わせて構成され、それらをポインティングデバイスによって操作されるカーソルを通じて指示を与える。

端的に言うと、画面上のボタンや画像などを選択する事でリアクションを発生させる仕組みを総称してGUIと言う。

### GUIにおけるタスク管理

GUIにおいて、作業はウィンドウ単位に分割される。MDIとMac OS(macOSを含む)の場合を除いて、「ウィンドウの数 = タスクの数」であることが多い。このため、インタフェース全体で見た場合、どのようにしてタスク管理を行うかが重要になる。Windows 95以降のWindowsファミリーをはじめとしていちばん多い方式は、タスクバーと呼ばれる棒状の領域をデスクトップ上に用意し、ここに、各ウィンドウのアイコンやタイトルを並べるものである。これにより、視認性、操作性を確保しながら、多くのウィンドウを管理することができる。他には、デスクトップ上のメニューに各ウィンドウを管理するメニューを追加する、デスクトップにタスクをアイコンで表示する(Windows 3.xまでのWindowsファミリーの方式)、タスクの数だけ仮想デスクトップを用意する(Palm WebOSなどの方式)などの方法がある。macOSはDockでタスク管理を行うが、Mission Controlというウィンドウ一覧表示モードも併用されている。

### ポインティングデバイスによる操作

GUIの基本は、ポインティングデバイスによってカーソルを操作し、デバイスに付いたボタン(通常2〜3個)を押すことである。これにより、「位置」と「指示」を明確にし、視覚的な操作を行うことが出来る。

指示の内容は、カーソルの位置によって異なる。データ管理アプリケーションでは、第1ボタンは、カーソルの位置にあるデータを選択し、2回連続で押すことによって、データに応じて適宜定義されたアプリケーションを呼び出し、処理を開始する。アプリケーションのメニュー、ボタン上では、そのコマンドを開始する。データ上では、データにおける操作の位置を指示する。

第2ボタンは、通常、どの場合でも、アプリケーションによって定義されたコンテキストメニューを出力する。このメニューを第一ボタンによって指示することで、そのコマンドを実行することができる。第3ボタンは、X Window Systemではよく使われる。

また、最近は第4ボタン、第5ボタンを装備したマウスや、第3ボタンがウィンドウに直接機能するホイール機能を兼ねているものがあり、適宜、アプリケーション又はOSによって定義された機能を提供する。

### GUIとキーボード

GUIにおいても、キャラクタユーザインタフェースに劣らず、キーボードは重要なデバイスである。データの内容だけでなく、キーボードショートカットといった、インタフェース操作を向上させる機能と連動させることで、操作性の向上をはかることもある。

### GUIと各種デバイス

上記にあげたデバイス以外にも、タブレットなどのペンデバイスによる操作もあり、特に画像データ操作や手書き入力において威力を発揮する。

### タッチパネルによるGUI

タッチパネルに表示されたボタンやアイコンに直接指やペンで触れることで、各種の操作を行うデバイスもあり、ATMなどで一般化している。カーナビゲーションシステムやニンテンドーDSでも使われ、直感的な操作に優れる。2007年以降、パッドに接触する指の本数を認識し、その振る舞いを変えるマルチタッチ対応パネルを利用した機器が市場に出回るようになった。

## 実装

GUIは様々な方法・ライブラリを用いて生成される。ユーザーへ提示される視覚的要素はしばしばViewと呼ばれ、ユーザーからの入力を扱う内部要素はしばしばControllerと呼ばれる。

### 宣言的UI

宣言的UIは宣言型プログラミングを用いて構成されたGUI、それを実現する手法である。GUIの生成・更新を変更前状態に基づいた更新命令によってコーディングするのではなく、あるべき状態を宣言してコーディングする。状態を分離することでUIの状態をより予測しやすいものにできる。テンプレートエンジンは静的テンプレートと動的変数の関係を宣言しているとみなせるため、更新された状態とテンプレートからテンプレートエンジンによってUI生成をおこなってUIを更新する形は宣言的UIといえる。そういった意味でも宣言的UI自体は古くから存在するGUI実装手法の1つである。

2010年代中盤におけるWebアプリケーションの分野を皮切りに、様々なデバイスで宣言的UIを標榜するUIフレームワークが登場している。

- Web
  - React
  - Angular
  - Vue.js
- macOS, iOS
  - SwiftUI
- Android
  - React Native (iOS含む)
- マルチプラットフォーム
  - Flutter (マルチプラットフォーム)

### データバインディング

データ(モデル)とUI(View)を結びつけ、片方の変更を暗示的に他方へ伝播する手法をデータバインディングという。宣言的UIと組み合わせることで、モデルの変更が自動的に宣言的UIの更新へと暗示的に反映されるようになる。