【メニュー編】UIライブラリのマークアップを学ぶ
UIライブラリを採用する際、どのようなところを意識して選択しているでしょうか?私はそのひとつに、好みのHTML構造かどうかというポイントを見ています。
Reactのフレームワークを利用して開発する機会が増え、HTML構造に対する関心が少しづつ低下しているような気がしています。
Webブラウザがインターフェースとして提供される場合、そのアクセシビリティはHTML構造に大きな影響を受けます。
フロントエンドエンジニアとして正しいHTML構造を知ることは大変重要です。今回は、有名なUIライブラリや私が個人的に利用する機会の多いUIライブラリをいくつかピックアップし、そのUIライブラリがどのようなHTMLを生成しているのか調査してみました。
今回調査したUIライブラリ
今回調査したUIライブラリは、以下の4つです。
これら、4つのUIライブラリは様々なUIコンポーネントが提供されています。その中からMenuコンポーネントについてそれぞれどのようなHTMLがHTMLが生成されるのかを見て行きます。
Material UI
まずは、Material UIです。
Menuを作成する場合、Menuコンポーネントとして提供されているパーツである、MenuListとMenuItemを組み合わせてコーディングを行います。
これによって生成されたHTMLが以下になります。
リスト構造によって生成されています。
liを生成するMenuItemコンポーネントにクリックイベントを設定することができる構造であるため、li自体がイベントを受け取る要素となっています。
role属性やtabindexが設定されており、アクセシビリティ面も十分考慮された構造です。
Semantic UI
次に、Semantic UIのMenuコンポーネントです。
Semantic UIは、Menuクラスが用意されており、Menu.itemをMenuクラスでラップする形でコーディングを行います。
これによって生成されたHTMLが以下になります。
Material UIと同様、Menu.itemに直接イベントを設定できる構造になっていますが、aタグとして生成されています。
Material UIと比べると、アクセシビリティ面が全く考慮されていませんね。自分で対応していく必要がありそうです。
Chakra UI
次に、Chakra UIのMenuコンポーネントです。
Chakra UIもMaterial UIと同様に、MenuコンポーネントとMenuItemコンポーネントの組み合わせによってコーディングを行います。
これによって生成されたHTMLが以下になります。
divタグの中にbuttonタグを内包する構造で生成されました。
リスト構造でもなく、中のメニュー要素はボタン要素になっています。MenuItemが持つonClickプロパティから見ても特に違和感のない構造だと感じます。
また、role属性、tabindexが設定されており、アクセシビリティ周りも考慮されています。
Headless UI
最後に、Headless UIのMenuコンポーネントです。
少し、他の3つと特徴が異なりますが、オリジナルデザインで開発していく際にすごく重宝しているUIライブラリになります。
Headless UIは、Menuクラスが用意されており、Menu > Menu.Items > Menu.Item という構造でコーディングを行います。
これによって生成されたHTMLが以下になります。
Semantic UIと同様、divタグにaタグを内包する形で生成されました。ただ、アクセシビリティ面が考慮されている点が加点ですね。
Headless UIでは、asプロパティが用意されており、任意のセレクタを指定することが可能なため、セレクタの指定は自由にカスタマイズすることができます。
そういう意味では、やっぱり一番使い勝手がいいように感じます。
さいごに
今回は4つのUIライブラリを題材にMenuコンポーネントを作成した際のHTML構造について見てきました。
生のHTMLを書く機会が減ると、マークアップへの意識が下がりSEOやアクセシビリティなど正しいマークアップが求められる部分が疎かになりがちです。
私はオリジナルのコンポーネントを開発する場合や生のHTMLを書く際には、参考ページやUIライブラリを参考にすることが多いです。
見てみると、意外に散々なHTMLだったりすることも少なくありません。ふとしたときに不具合になったり、使いづらいといってケースを生んでしまうこともあるため、UIライブラリ採用のひとつとして、HTML構造を持っておくのもいいかもしれません。
最後に、アンケートへのご協力をお願いいたします。🙏
Editor’s diary
最近は車でよくback numberを聴いています。
大好きなアルバムが、「スーパースター」と「ラブストーリー」の2枚なのですが、永遠にリピートして聴いています。
青春時代はあんなに歌詞を読んでいたのに、最近はメロディーで聴くことが多くなってしまった関係か、鬼リピートするような曲に出会えていないのが少し寂しい。