Solanaチェーン Sanctum のフロントエンド技術スタックを見てみる
どうも！ Nickel Lab. 代表の森です。
弊社ではWeb3フロントエンドの開発も行っており、最新トレンドを追っかけています。
Web3は一部の界隈だと賑やかなのですが、まだまだ記事も少なく日本語の情報も不足しています。
Web3を扱う弊社としてはもっと賑わってほしいので、今回はWeb3(ブロックチェーン)で注目されている新しいプロジェクトがどのような技術を使っているのかを探っていくという、Webアプリケーションを開発する側の視点から見ていこうと思います。
Sanctum とは
Layer1ブロックチェーンである Solana で展開される Liquid Staking Token(LST) プロジェクトです。
2024.04.30より、Wonderland というPETをゲーム感覚で育成するコンテンツを開始しました。
昨今のブロックチェーン界隈ではエアドロップという、トークンが貰える機会が多くあります。このSanctumでも例に漏れずエアドロップが期待されており、様々なプロジェクトの中でも期待値が高そうということで注目を浴びているわけです。
ただ、本記事ではコンテンツ内容ではなく、フロントエンドについて見ていきましょう。
Chrome拡張機能を使って簡単に見てみる
拡張昨日にはそのサイトがどんな技術で作られているかを表示してくれるものがあります。今回はその中から、 Wappalyzer を使ってみましょう。
ほら簡単！ 最近人気のフレームワークを使っている印象ですね。せっかくなのでひとつひとつを簡単に解説します。
Next.js + Vercel
フロントエンド開発してるのであれば知っていますよね？ Reactのフレームワークです。
Next.jsが人気な理由は、
- コンフィグがほとんど必要ない
- ルーティングが楽ちん（ディレクトリ構成で自動ルーティング）
- サーバーサイドレンダリングが楽ちん
というものがありました。
今回のSanctumでは、 V14 を使用しており、Webサーバーとしても Next.js と表記され、PaaSにVercelを使っていますね。最強構成です。
なにが最強かというと、まずデプロイがめちゃくちゃ楽ちんです。そして、V14ではAppRouterとServerActionにより、単体でバックエンドも記述することができます。
スタートアップやWeb3などの目まぐるしくトレンドが変わる界隈ではスピードが命ですので、そういった環境にはベターなフレームワークになります。
Radix UI + Twailwind CSS
UIフレームワークには、 RadixUIが使われています。
HeadlessUIコンポーネントフレームワークというもので、プレーンな状態で使うとデザインが適用されていないコンポーネント群を提供しています。
MaterialUIやChakraUIなど人気のReactUIフレームワークはたくさんありますが、BtoCアプリケーションなどのデザインが重要なWebアプリケーションでは、オリジナルのデザインを適用するのが普通です。
デザインがデフォルトで適用されているとカスタマイズするための調整が初期段階で必要になります。また、UIフレームワークのバージョンアップによりデザインの上書きなど、予期せぬ見た目になる場合もあります。
これって面倒だよね。でもコンポーネントを最初から作るのって車輪の再発明感もあるし、デザインなしのコンポーネントがあったらよくない？
そんな需要からヘッドレスコンポーネントは生まれました。
弊社でも、マーケティングが重要なWebアプリケーションではオリジナルのデザインを採用するため、RadixUIを活用しています。
Sanctumでは更に開発の効率性を上げるために、 TailwindCSSが使われていますね。
TailwindCSSは、一見ひとつひとつのCSSプロパティにクラスが割り当てられており冗長に思うかもしれませんが、とても高速にデザインを適用できる優れたライブラリです。
メリットして、
- クラス名決めなくてよし！
- CSSファイルとコンポーネントファイルを行き来しなくてよし！
- ビルド時に使っていないプロパティは含まれないので、最小限のファイルサイズになる
- スペース幅などは最初から用意されているものを使うことで数学的に美しいレイアウトを維持できる
- クラス名という、HTML標準の仕様を使うためフレームワーク以降やTailwindCSS自体を使わなくなったとしても移行が簡単
などなど、様々なものがあります。
弊社でもほぼすべてのプロジェクトで TailwindCSS を使っていますね。特に、UIフレームワーク独自のスタイル適用方法に依存しないところが気に入っています。Web開発の移り変わりは早いですから、HTMLの標準仕様からなるべく離れていない技術を使いたいのです。
Sanctum では、
独自デザインを適用したいけどよく使う機能は再利用したいので RadixUI
レイアウトをサクサクと作っていきたいから TailwindCSS
といった技術が採用されていそうです。
Ethers
ブロックチェーンのエンドポイントとやり取りするためのJSライブラリには、
- Web3.js
- Ethers.js
- Wagmi ( React Hooks )
などがあります。 Web3.js が最も古くからあるライブラリですが、今はEthers.jsが伸びてきているようです。
WagmiはReact Hooksで簡単にトランザクションを操作できるライブラリで、内部でEthers.jsを使用しています。
というか Ethers.js ってSolana対応してたの・・・？
（SolanaはEtherreumとは異なるブロックチェーンで仕様も異なる）
まとめ
ということで、まとめとしては
最新のトレンドに沿ったスピード開発チョイス
になるかと思います！
ちなみに、弊社のスクラッチ開発の技術選定とほぼ同じです。
最新プロジェクトの技術スタックを確認することで、弊社技術がまだまだ利用できることと、ニッチすぎる技術を使っていないことを再確認できました。
弊社紹介だけさせて貰ってもいいです……か？（照れながら）
最後にPRですが、弊社では社内WebアプリケーションからWeb3アプリケーションまで対応した受託開発を提供しています！
特にUXを意識したフロントエンドの開発が得意ですが、どのように作っていくか相談しながら最終リリースまですべて一緒に進めていくことができます。
スタートアップのリソースが足りなかったり、何年も長く使えるWebアプリケーションを必要している場合は是非ご相談ください。
また、森のXをフォローして頂けると大変よろこびますので、よろしくおねがいします。
特典としてはたまに飯テロポストが見れます。
ではまた〜
かわいい
Discussion