1 of 65

🤫

2 of 65

皆さん、HTML クイズの時間です

​

合計３問あります

●か✕かでご回答ください

3 of 65

第１問：以下のタグはすべて閉じタグ省略できる

  • <li>
  • <caption>
  • <rt>
  • <p>

4 of 65

第１問：●

  • 以下の HTML タグは閉じタグ省略可能
    • 同種の要素が続く場合と、親要素が終わる直前に省略できるもの… dt, dd, li, option, thead, tfoot, th, tr, td, rt, rp, optgroup, caption
    • <p> は <table> や <ul> など、�<p> が入らない要素の前でも省略可能

5 of 65

第２問：

dl 要素直下に div を

内包できるようになったのは

W3C HTML5.0 からである

6 of 65

第２問：✕

  • W3C HTML5.2 の勧告から使用可能
    • W3C HTML5.1 より以前は NG
  • 現行の標準にもなっている�WHATWG Living Standard にも明記されています

7 of 65

第３問：ARIA in HTML の定義 * において

　　　　以下のように使用してはならない

<ul role=”list”>

<li role=”listitem”>

<a href=”https://www.rakus.co.jp/” role=”link”>

　　株式会社ラクス

</a>

</li>

</ul>

* 2021/9/5 のバージョンにおいて

8 of 65

第３問：✕

  • 重複したroleを使うこと自体は「推奨されていない」
    • ul role=”list” など
  • しかし、現行の定義においては「使用してはならない（MUST NOT）」ではない
    • UAの判定で認識されない事例もあります

9 of 65

いかがでしたか？

10 of 65

はい

11 of 65

ところで

話が変わりますが

12 of 65

HTMLで

アプリケーション作るの

キツくない？

13 of 65

いや、違う

14 of 65

HTML で

アプリケーション相当の

UI を作るの

キツくない？

15 of 65

そう思いませんか？

16 of 65

僕はそう思ってます

17 of 65

はい

18 of 65

HTML は文書ファイル

  • ハイパーメディアのものとして生み出された
  • 文書の中にリンクを組み込めるようになった！
  • フォームも使えるようになった！
  • リッチコンテンツも使えるようになってきた！
  • でもこれアプリケーションのためのものか？

19 of 65

HTML 表現だけで

ユーザーのニーズは

満足させられるか？

20 of 65

アプリケーションがより身近な時代に

  • かつては一家に一台 PC があるかわからない時代
  • スマートフォンの普及でより Web が身近に
  • アプリケーションを使うことの障壁が下がってきた
  • 物質感のある UI の登場（ニューモーフィズム）
  • フラットな見た目の UI が Web デザインの主流に
  • かつての「Web」で提供している UI の価値が薄れてきた

21 of 65

この UI はリンクなのか？ボタンなのか？

22 of 65

ようこそ多様性の時代

  • Web が普遍的になると「こうして使いたい」欲が生まれる
    • 最近は Google 一強だけど…
    • そうならないために他ブラウザベンダは審議している
  • ユースケースの増大を仕様が受け止める
  • Web は後方互換性を重視する
    • ただしユーザに危険性があるものについては廃止もやむなし
      • 最近の alert() 廃止とか
      • HTTPS じゃないとブラウザ側で警告が出るとか

23 of 65

"WEB の自重" by Jxck

24 of 65

今ある振る舞いを

正しく使えて

ユースケースに

当てはめきれるだろうか？

25 of 65

Use button, not div

26 of 65

27 of 65

なぜ div ではなく

button なのか？

28 of 65

Web での

ユースケース考慮を

（できる限り）減らすため

29 of 65

30 of 65

適応していったり

違反してないかを

理解するのには

限界がある

31 of 65

低レイヤで

実装していく

アプローチ

32 of 65

希望になりそうなもの

33 of 65

34 of 65

React Native for Web

React Native for Webは、ネイティブアプリをブラウザ上で再現しようとしたものではありません。�React Nativeが提唱したGUIの抽象化を、Webアプリケーションの世界でも使えるようにした、ブラウザ向けのReactコンポーネント＆便利モジュール集ライブラリです。

React NativeをWebに持ってくることの意味

35 of 65

実用に耐えられるのか？

36 of 65

😊

37 of 65

Twitter for Web

38 of 65

他にも事例あり

39 of 65

作者「続編できたよ！」

40 of 65

React Native for Web から

さらにレイヤを低くして

別の手法で考えてみる

41 of 65

UI の振る舞いに集中したい

42 of 65

Headless UI

43 of 65

Switch (Toggle) コンポーネント例

44 of 65

React Spectrum Libraries

45 of 65

useKeyboard – React Aria

46 of 65

フレームワークに

囚われない

コンポーネント作り

47 of 65

<Web-Components />

48 of 65

49 of 65

さらに低く考える

（実現したいことは何か）

50 of 65

Utility CSS

51 of 65

Web API

(& JavaScript)

52 of 65

WAI-ARIA *

* Web Accessibility Initiative

Accessible Rich Internet Applications

​

53 of 65

UI にまつわる責務を分解していく

  • 詳細度に依存しない見た目
    • Utility CSS
  • Web ブラウザ上の振る舞い
    • Web API (& JavaScript)
  • UI の意味付け
    • WAI-ARIA

54 of 65

「今」求められる

ユースケースを

想定した UI を作ろう

55 of 65

足りないものを

補填できるような

実装をしよう

56 of 65

おわりに

57 of 65

フロントエンドとは？

58 of 65

Learn to become a modern frontend developer

59 of 65

「すべてできる」

それは本質ではない

60 of 65

表層のことに

責任をもつのだ

61 of 65

UI にまつわる責務を分解していく

  • 詳細度に依存しない見た目
    • Utility CSS
  • Web ブラウザ上の振る舞い
    • Web API (& JavaScript)
  • UI の意味付け
    • WAI-ARIA

62 of 65

あらゆることを

１つずつ丁寧に

考えていきましょう

63 of 65

発表者情報

大山 奥人（オオヤマ オクト）

株式会社クラウドワークス

プロダクト本部�プロダクト開発部�プラットフォーム開発１グループ

施策チーム／�フロントエンドサブチーム所属

64 of 65

HTML だけで UI を作る限界、

あるいは無理なくユースケースと

向き合っていくためには

フロントエンドLT会 - vol.4 #frontendlt

2021/09/15

65 of 65

参考リンク一覧

​