プログラミング

Dapps開発用のUIコンポーネントまとめ

Dappsは一般的なユーザーにとっては慣れ親しまないものです。ウォレットやトランザクションの生成など多くのハードルがあるためUXも悪くなりがちです。そこでこの記事では皆さんがDappsを開発する上で間違いなく役に立つフロントエンド用のコンポーネントライブラリをいくつか紹介していきます。どれもオープンソースなので積極的に使って自分のDappsのUXを向上させましょう。

Dapps開発用のUIコンポーネントまとめ

arrow_drop_down 目次

Rimble

URL:https://rimble.consensys.design/

イーサリアムエコシステム周辺の巨大開発企業であるConsensysが開発しているReactコンポーネントのライブラリです。

RimbleはコンポーネントだけでなくDappsのUXパターンのガイドも提供しています。

例えばMetaMaskのログイン用のコンポーネントであれば以下の画像のように慣れ親しんだUIを導入することができます。

https://rimble.consensys.design/components/rimble-ui/MetaMaskButton

components.bounties.network

URL:https://components.bounties.network

こちらもDapps用のコンポーネントを含んだReactライブラリです。

しかしこちらは上記のRimbleとは異なり、一般的なReactコンポーネントライブラリにDappsにも使える要素が加えられているといった程度ですが、シンプルなデザインで使いやすいです。

例えばイーサリアムのネットワークに関する要素であれば以下のようになっています。

https://components.bounties.network/?path=/story/network–network

AragonUI

URL:https://ui.aragon.org/

AragonUIはDAO (自律分散組織) を形成するためのスマートコントラクトフレームワークプロジェクトのAragonが提供するDAO用のReactコンポーネントライブラリです。Aragonを利用してDAOを作る際にはぜひ使いましょう。

MetaMask UI

URL:https://github.com/MetaMask/metamask-extension/tree/develop/ui/app/components

こちらはMetaMask公式が提供するReactコンポーネントのライブラリです。ほぼ全てのDappsはMetaMaskをインテグレーションすると思いますので、こちらも参照してみてください。

まとめ

DappsはUXが悪くなりがちですので、皆さんも上記のようなフロントエンド用のコンポーネントライブラリを活用して使いやすいDappsを開発しましょう。

「PR」自身の力でブロックチェーンアプリケーションを作ってみませんか?

自身の手でブロックチェーンアプリケーションを作りたいと考えている方は、プログラミングスクールに通ってみてはいかかでしょうか?

  • ブロックチェーンを学んで、今までにない何か作ってみたい
  • 今のうちにブロックチェーンの概念を理解し、開発もできるようになっておきたい
  • プログラミング初心者だけどブロックチェーンアプリケーションを作ってみたい
  • 独学で本や記事を見ながら勉強したけど、途中で一度挫折してしまったためメンターをつけて学びたい

と感じてる方は、BLOCKCHAIN Code Campがおすすめです。

BLOCKCHAIN Code Campとは

プログラミンング初心者からでもブロックチェーンアプリケーションを作ることができるオンライン完結型のプログラミングスクールです。現役のブロックチェーンエンジニアが1対1でメンターとなって、最短3ヶ月で、ブロックチェーンの概念や、ブロックチェーンアプリケーションを作れるようになれます。

現在無料相談会も実施しております。 少しでもご興味ある方は、こちらのサイトよりお問い合わせください。