見出しとはなにか

[フロントエンドカンファレンス東京✕Vue Fes Japan✕JSConf JPコラボイベント](https://vuejs-meetup.connpass.com/event/403017/) での資料です。

---

# 見出しとはなにかスピーカーノート

## 1. 見出しとはなにか

はい、よろしくお願いします。
今回はVueFesとJSConfとの合同イベントということでなるべくネタが被らないようにしようと考えてHTMLだったりコンポーネント設計みたいな話をしようかなと思っています。

## 2. 自己紹介

というわけで簡単に自己紹介ですが、ken7253というディスプレイネームで活動しているブラウザとユーザーインターフェースが好きなフロントエンドエンジニアです。
今回は見出しのお話なんですが

## 3. MDN の見出し要素

私はこういうとき結構質問しがちなんですけど、とりあえず聞いちゃいますね。「見出しだったりHeading要素知ってる」って人ってどのぐらいいますかね？はい、まあ皆さんご存知って感じなんですが今回はこの見出しというものを題材にデザインシステムだったりにおけるコンポーネント設計みたいなことを考えていこうかと思います。

まず、見出しというと我々はこのようなものをイメージしますよね。（MDNのHTMLの見出し要素のテキストを囲う）はい。
見出しと言われたらh1-h6までのタグで囲われている部分というのは確かに技術的には合っています。
一方でこのような文章を読むときにおける「見出し」の担う役割については必ずしも十分な説明とは言えないような気がします。

例えば私たちはこのMDNの文章を読むときにこの文は「見出し：HTMLの見出し要素」について述べているのだと認識しながら読み進めて行くわけですね。見出しについて話し始めているのにこの中でいきなりボタンとかフォームについての解説が始まったら混乱すると思います。

## 4. 見出しが表す構造

つまりどういうことかというと「見出し」というものは登場した瞬間に次に同じレベルの見出しが来るまでのコンテキストをグルーピングするようなイメージの機能を持つとも言えそうです。この図のようにH1が文章全体を包含して、次に2,3,4というように階層構造を形成していきます。

マークアップで言えば左側ですし、これをJSONみたいに表そうと思うと右側のようなKey-Value構造になりえそうです。

ここで考えるのが、このような概念や捉え方を持つ要素を技術要素だけを切り取ってコンポーネントを作ってしまって良いのだろうかということです。

## 5. モデルからコンポーネントへ

先ほどのJSONを左側に持ってきました。ではこの見出しがもつメンタルモデルをコンポーネントのインターフェースに反映してみましょう。

私が見てきた汎用コンポーネントは上側のようにHTMLのHeading要素をそのままラップしたようなI/Fで実装されていることが多かったです。
これ以外にもテキストやタイポグラフィ要素のオプションとして見出しがあるというパターンもありそうですね。
これはこれで素直な実装なので不便を感じることはないかもしれないです。

一方で「見出し」というものがもつ性質を反映すると、下のように見出しとして実装するのではなくセクションの一つの要素として見出しを用いるほうが良いかもしれません。
また、下の例ではネストされた回数に応じて自動的に見出しレベルを算出することも可能になるため（デザインシステムの）ユーザーが意識すべきポイントも少なくなります。

汎用コンポーネントの設計の難しさの一つに、どう使われるか分からないコンポーネントを事前に作らないといけない。
という点があると思っています。

ここまでコンポーネントのインターフェースにこだわるというのは正直趣味みたいなレベルになってきますが、汎用コンポーネントの設計はUIそのものが持つ意味やメンタルモデルを理解するときれいに作れるよという話でした。

## 6. Outline algorithm

HTMLに詳しい方であればこの話を聞いた時点でピンときているかもしれないのですがまさしくアウトラインアルゴリズム的な考え方だと思います。
アウトラインアルゴリズムについては今回の本筋ではないので触れませんか気になる方はsakuさんの（「The Outline Algorithm Utopia」という）記事に詳しく書かれているので見ていただけると面白いと思います。