React と Semantic UI

Semantic-Org/Semantic-UI-React: The official Semantic-UI-React integration (github.com)

Semantic UI を単独で使ってみて、結構よかったので次に Web アプリケーションを作成するときは React と組み合わせて使用してみたい。

Web アプリケーションは、HTML と CSS と JavaScript によって記述できる。HTML は、文書の構造を定義し、CSS と組み合わせることで、それを理解するブラウザが我々に美しく有意義な UI を展開してくれる。DOM によって、JavaScript は HTML 文書を動的に変化させることができる。これは UI に対するマウスクリック等のユーザアクションへの「反応」を記述するために利用される。

React は、アプリケーションの状態と UI を結びつけるための良いツールだといえる。アプリケーションは、ユーザアクションへの反応であるべきだと考えれば、React というネーミングは素直だと言える。React は DOM に依存する JavaScript アプリケーションの開発を刷新する。例えば、HTML 文書を変化させる場合、JavaScript は HTML そのものを出力しなければならないが、React というフレームワークを介することで開発者はそのようなコーディングを避けることができる。アプリケーションの内部状態に応じて UI はどうあるべきか、という処理の実装について悩んだ経験のある開発者であれば、この仕組みのありがたさはすぐに理解できる。

Semantic UI は、その名前の通り意味論による UI を提供してくれる。Semantic UI は、HTML 仕様の class 属性に強く依存している。class 属性について MDN では、次のように述べられている。

Though the specification doesn’t put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element.

class – HTML: HyperText Markup Language | MDN (mozilla.org)

訳)仕様はクラスの名前について要件を定めていないけれども、Web 開発者は要素の表現よりはむしろ、要素の意味論上での目的を述べるような名前をつけるよう奨励される。

Semantic UI では、例えばアコーディオン UI を JSX で記述すると次のようになる。

<Accordion panels={[
  { title: 'What is a dog?', content: '...' },
  { title: 'What kinds are there?', content: '...' },
]} />

これだけだと、意味論上の目的が何によって示されているのかわからないと思う。実際、React を利用すると UI それ自体を再利用可能なコードとして定義できるため、良識ある開発者は、そのようなコードまたは関数には意味のある名前を付ける。Semantic UI の特徴は、このコードが変換されることでわかる。

<div class="ui accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="content">
    <p>...</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    What kinds are there?
  </div>
  <div class="content">
    <p>...</p>
  </div>
</div>

class に指定されている名前を見ると、その HTML 要素が何を意味するのかわかる。逆に、率直過ぎて衝突の不安を覚える人もいるだろうが、Semantic UI は、指定の HTML 要素の意味を示す単純なクラス名の組み合わせによってデザインされているため神経質になる必要はない。UI として表現されるべき要素に対しては「ui」というクラスが与えられ、それがどのような UI なのかについてはさらに「accordion」などの具体的な名称が付与される。CSS は、これらの複数のクラス指定に依存して定義される。注意すべきなのは、それよりも「リセット」かもしれない。ブラウザ間での表示差異をなくすために採用されることの多い手法だが、どのようなリセットが行われるのかは意識しておく必要がある。

私はライブラリを採用するとき、人気や実績よりもそのネーミングを重視する。そして、ネーミングが妥当なライブラリほど、多くの開発者に愛される傾向があると考えている。その意味で、React と Semantic UI は Web アプリケーションの開発にとって価値の高い組み合わせではないだろうか。