shadcn/ui blocks とは
shadcn/ui とは
shadcn/ui は React の UI ライブラリで、プロジェクトのコードベースへコピーアンドペースして利用するというユニークな特徴を持っています。
そんな shadcn/ui に新たに Blocks なるものが追加されたとのことで簡単にドキュメントを確認しました。
blocks とは
shadcn/ui には components というセクションがあり、components ではButton などの汎用的なコンポーネントのリストを確認することが出来ます。
blocks も components に並ぶ形でヘッダーのナビゲーション上に表示されています。
blocks のページを確認すると以下の文言が表示されています。
Building Blocks for the Web
Beautifully designed. Copy and paste into your apps. Open Source.
Browse
ここだけを読むと components との違いが分かりませんでしたが、changelog を読むと以下の文言があります。
Blocks are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn/ui.
blocks は components のように単一の UI パーツを指すのではなく、それらの組み合わせ方、すなわちレイアウトに関するセクションのようです。
現時点では dashuboard と authentication という2つのレイアウトがそれぞれ4つずつ紹介されています。
これらのレイアウトについては今後リクエストに応じる形で追加されていくようです。
v0 による編集
v0 は Vercel によって開発されたサービスで、ユーザーが入力したプロンプトに応じた UI のコードを生成します。
この UI コードでは shadcn/ui が使われています。
blocks のレイアウトを雛形に v0 上で編集を行うことが可能出来るので、少し試してみました。
dashboard-01 というレイアウトを選択すると v0 のページに遷移します。
遷移先のページでは選択したレイアウトが表示された状態になっています。
このレイアウトに "Make the overall theme blue." というプロンプトを与えてみます。
すると、背景色が青い UI が生成されました。
おわりに
shadcn/ui の blocks は、それ自体が革新的なアイデアではありませんが、v0 との組み合わせによって UI 開発の可能性が大きく広がるだろうと感じました。
今後、blocks に基本的なレイアウトが追加されていけば、開発者は v0 上でそれらを手直しするだけで簡単に UI を作成することが出来ます。
今後、v0 やそれに類するツールがより一般的になることで、UI 開発のプロセスが大幅に簡素化され、開発者はよりクリエイティブなタスクに集中できるようになるかもしれません。
これからの UI 開発の進化に注目していきたいと思います。
Discussion