mottox2 blog

複雑GUI会の『入門GUI』を読んだ

book

時折、(私の)Twitterで話題になる複雑GUI会。その方々が「技術書典 応援祭」で『入門GUI』という本を頒布していたので、読んで写経を行いました。

複雑GUIの会を主催した - No Regrets in Bathing

複雑GUIという名前からわかる通り、本書ではブラウザのSelectboxを自前で実装する章、バウンディングボックス、並び替え、スクロールに連動するヘッダーDnDなど、普段Webフロントエンドをやっているとライブラリに頼りがちな箇所の実装を解説しています。

入門GUI ーWebブラウザで作る本格インタラクションー:複雑GUIの会

感想

ここからは感想です。

React, Vue, Web Componentsといろんな実装方法が使われていて実装の差が面白かったです。とりあえず第1章の自作Selectと第3章のスクロールと連動するヘッダーを比較的得意なReactで写経してみました。

第2章のバウンディングボックスは、今までやったことのない類の実装で結構苦戦しました。自作Selectやヘッダー、DnDはちょっとだけ触ったことがあったのですが…

最後の第5章では、Web上でデザインしてそのまま公開できる『STUDIO』のCPOを迎えてGUIの未来についての座談会の文字起こしを取り上げています。
NoCode系サービスが生み出す、新しいレイヤーの話や、メンテナンスの話。GUIと相性の悪いものの話、GUIの進化系など、ソフトウェアエンジニアとして未来を考えさせられる話をしています。
本では言及されていませんが、個人的にはスマホの次のGUIがめちゃ気になりです。

最近のフロントエンドはデータの取り回しに関心が集まっている雰囲気を感じますが、2010年代前半を感じさせる『入門GUI』にはすごい親近感がわきました。GUIパーツの自作、割と好きな方なので非常に面白かったです。

B!
memo

ソートUIの検討と簡易実装

ソートUIを作るための取り組みをしている。その中でドラッグ中の挙動について迷ったのでメモ。 > ドラッグ中の挙動ドラッグ中の挙動 図中のドラッグ中の挙動に差があり、さわり心地に大きく影響する。

tips

CodeSandboxのキーバインドを自分好みにする方法

CodeSandboxはWeb上でVisual Studio Codeが提供されるWebサービスです。 ReactやVueのフロントエンド環境はもちろん、Next.jsやNuxt.jsなどのサーバー

event

PWA Nightでスマホウェブの触り心地について話してきた

2020/3/18に行われた「PWA Night vol.14」で『手触りのよいウェブを考える』というタイトルでオンライン登壇しました。昨今のコロナウイルスへの対策としてオンラインの開催形態を取った勉