目次

はじめに

本書について
サンプルコード

第1章　フルスクラッチGUI入門
1.1　フルスクラッチGUIの原罪
1.2　select要素を自作してみよう
1.3　トレースもとを観察しよう
1.4　モックしよう
1.5　オープン・クローズの挙動をつけよう
1.6　Propsを渡せるようにしよう
1.7　要素を選択可能にする
1.8　v-modelに対応する
1.9　キーボード操作に対応しよう
1.10　スクリーンリーダーへの配慮
1.11　まとめ
1.12　【おまけ】リングコマンドを実装しよう

第2章　バウンディングボックスことはじめ──移動・拡縮・回転
2.1　序
2.2　レイヤーについて
2.3　余談: useReducer vs useState
2.4　平行移動とドラッグ
2.5　ドラッグ対応ライブラリーを作る
2.6　拡大と縮小
2.7　回転
2.8　回転済みの図形を拡大縮小する
2.9　まとめ

第3章　スクロールに連動して高さが変わるヘッダビューを作る
3.1　完成イメージ
3.2　ざっくり作る
3.3　細部を作り込む
3.4　仕上げ
3.5　デモ

第4章　ドラッグ＆ドロップ並び替え入門
4.1　一次元のlistを並び替えよう
4.2　GUIを作ろう
4.3　DnDを実装しよう
4.4　まとめよう

第5章　座談会──STUDIO CPOとするGUIの話
5.1　GUIという「超高級言語」
5.2　ビジュアルプログラミングの壁
5.3　「モーターで走る馬」を作らない
5.4　コード vs GUI
5.5　処理そのものはGUIにならない
5.6　「何も無い」ことが究極のGUI
5.7　CUI → GUI → ???
5.8　GUIらしさ、楽しさとは何か
5.9　何かのための何かのための何か
5.10　複雑さの過渡期、臨界

はじめに

　本書は、Webブラウザーにおける本格的なGUIの入門書です。とは言っても、本書で扱うGUIは、一般的なWebアプリケーションではあまり見ないかもしれません。

　なぜならこの本が目指すのは、Webブラウザー上で実現するのが難しい、複雑なUXに関わるコンポーネントを多く含むからです。

　Webブラウザーに期待される役割は、年々増してきています。たとえば、ネイティブアプリ顔負けのデザインツールや、ドラッグアンドドロップでの操作が必要なフォームを作りたくなったとします。そのとき、我々は何に気をつけるべきなのでしょうか？また、これまで、HTML/CSS/JavaScriptで実装するのが大変だったUIを、どう実装するべきなのでしょうか？この点を本書は重点的に扱います。

　本書では、定番のセレクトボックスやヘッダーレイアウトの他、バウンディングボックスやツリーといったドラッグを伴うUIなども実装していきます。

　「そんなに複雑なGUIなんて作る場面ないよ！」という方もいるかもしれません。本論に入る前に、そういう「複雑GUI」がいつ、いかにして必要になるか、簡単に書いておきます。

　ある種のソフトウェアは、ユーザーに高度の知的作業を要求します。デザイン、作曲、画像編集ツール……これらはいずれも「考えながら使う」ソフトです。また、分野は違っても、帳票の入力、ガントチャートでの計画、ちょっとした事務作業に至るまで、ソフトウェアは人間が「考える作業」の複雑さを肩代わりする側面を持ちます。

　「考える作業」は難しいことです。なので、UIの開発者は、ユーザーの負担を少しでも減らすため、体験をeasyにふる必要があります。

　そして、体験のeasyさは、しばしば内部実装のsimpleさを犠牲にして成り立つことがあります。これが「複雑GUI」の出現する理由です。

　複雑GUIとは、ユーザーの作業の複雑さを吸収し、本質的な体験に集中させるためのもの、という側面を持つのです。

　そうは言ってもプログラマーである以上、こうしたGUIの実装をメンテナブルに、スピーディに行いたいことでしょう。幸いにして、昨今のフロントエンド技術の進化は、こうしたGUIを現実的なコストで実装することを可能にしました。

　苦しくも楽しい、Webブラウザーの複雑GUIの世界がここにあります。皆さんもエディターとブラウザーを開きながら、足を踏み入れてみましょう。

本書について

　本書では、「GUI実装時の考え方や設計」をメインに解説を行います。下記については説明を省略しています。あらかじめご了承ください。

　・JavaScript/HTML/CSSについて

　・ReactやVue.jsなどフレームワークの利用方法

サンプルコード

　サンプルコードや動作デモは、サポートページに掲載しています。

　https://scrapbox.io/guiland/入門GUI

図1:

第1章　フルスクラッチGUI入門

　さて、いきなり自分で考えたGUIをスクラッチし始めるのもエキサイティングですが、何を作ればいいか思いつかないという方も多いかと思います。そこで、第一歩として「既存UIの再実装」をしてみましょう。

　今回は、Vue.js v2.6.11を利用して、select要素を自作します。

図1.1: そうだね

1.1　フルスクラッチGUIの原罪

　さて、フルスクラッチGUIを作るにあたって、ひとつ注意点があります。

　本稿では、ブラウザーネイティブのform要素を再実装することになるでしょう。しかし、再実装した瞬間にアクセシビリティは大きく損なわれます。

　・キーボード操作が可能ですか？

　・tabでフォーカスできますか？

　・フォーカス時のアウトラインが表示されますか？

　また、適切な要素を使わないことで、文書がセマンティックでなくなります。たとえば、button要素はスクリーンリーダーでは、「ボタン」と読み上げられます。いくらdivでボタンに見た目を似せても、スクリーンリーダーにとってはただの文字列です。

　これらの問題を適切に解決するためには、適切な要素を選択する以外にありません。

　ここから先は、当然のようにアクセシビリティが損なわれる世界です。スクラッチではどうしても、ネイティブのアクセシビリティに至らないことも多くあります。

図1.2: 結局作らないのが一番という結論になる

1.2　select要素を自作してみよう

　ここから実装を試みていきますが、実力に自信のある方は、すぐにここから先を読まないことをおすすめします。

　あくまでここから先は、筆者hashrockの実装の一案にすぎません。自分のやり方、アイデアで実装してみたくないですか？

　ReactでもVueでもAngularでも構いません。まずは自分で実装を試みて、それからここから先を読んだほうが、10倍楽しめることでしょう。自分のアイデアをブラウザーというキャンバスで試してみませんか？

試し読みはここまでです。
この続きは、製品版でお楽しみください。