Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Post on:2022年11月9日
sponsors
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。
コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。
The Component Galleryの特徴
The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。
コンポーネントや要素に名前を付けるのに悩んだことはありませんか？
そんな時は他のデベロッパーがどのように名前を付けているのか見ることが、出発点として最適です。ほかにも、実装がうまくいかないときにも、コードをコピペして利用できるので、そのままでもそこから始めてみるのにも最適です。
The Component Galleryの利用方法
各UIコンポーネントの利用は、簡単です。
まずは、「Component」にアクセスします。
Component -The Component Gallery
さまざまなUIコンポーネントがカテゴリごとにまとめられています。
パンくずを見てましょう。
Breadcrumb -The Component Gallery
パンくずは、現在ページの階層内における場所を示すリンクのリストです。
パンくずのコンポーネントには45種類が収録されており、気になったものをクリックします。それぞれには、使用言語（CSS, Vue, Reactなど）やライセンスが明記されています。
まずは、オープンソースでSassも提供されているBulmaのパンくず。
定番デザインのパンくずだけでなく、バリエーションも豊富です。
続いて、Reactを使用しているAnt Designのパンくず。
区切りに「/」「>」「:」が使用されており、アイコンを使用することも可能です。
各UIコンポーネントのまとめ
The Component GalleryにまとめらているいくつかのUIコンポーネントを見てましょう。
ボタンは、フォームの送信やインターフェイスコンポーネントの表示。非表示などのアクションをトリガーします。
カードは、単一のエンティティを表すコンテンツのためのコンテナ。たとえば、記事・タスク・連絡先など。
ドロワーは、スクリーンの端からスライドして出てくるパネル。
フッタは、ページやセクションの下部に表示されるコンポーネント。一般的には、著作権や法的情報、関連コンテンツへのリンクなどを表示するために使用されます。
フォームは、ユーザーがサーバーに情報を送信するために使用する入力コントロールのグループ。
ヘッダは、Webサイトやアプリの上部に表示されるコンポーネント。一般的には、サイト名やメインのナビゲーションが含まれます。
ヒーローは、いわゆる大きなバナーで、ページが表示されると最初のアイテムとして表示されます。全幅の画像が含まれることが多いです。
リンクは、リソースへの参照です。外部（別のWebページなど）または内部（現在のドキュメント内の特定の要素など）の場合があります。
ナビゲーションは、ナビゲーションリンクのコンテナ。他のページ（メインサイトナビゲーションなど）または現在のページ内の要素（目次など）へリンクさせることができます。
サーチインプットは、ユーザーが検索語を入力することでコンテンツを見つけることができます。
タブ型インターフェースは、複数のパネル間を行き来することで、煩雑さを解消し、より小さなスペースに多くのコンテンツを収めることができる方法です。
sponsors
