🕌

ぼくのかんがえたさいきょうの Solana dApp ボイラープレート

2022/08/12に公開

はじめまして。KishiTheMechanic(kishi.sol)です。
オープンソースソフトウェア開発にインセンティブ革命を起こすため、Epics DAO を立ち上げ、分散型クラウドソージングプラットフォーム(Decentralized Crowdsourcing Platform)をSolana チェーン上にて開発しています。
もっと多くの人がオープンソースソフトウェア開発で食べていける世界線を作りたいです。

今回は日頃から使っている、ぼくのかんがえたさいきょうの Solana dApp ボイラープレートについて共有させてください。

Solana dApp ボイラープレート

https://github.com/EpicsDAO/dapp-boilerplate-v2

デモ
https://dapp-boilerplate-v2.epics.dev/

Solana は現在最も高速なブロックチェーンの一つです。
高速なため、混雑を緩和し、手数料を低く抑えることができます。
(送金は数秒で完了し、手数料は数円です。)

送金速度の向上はUXの向上に直結しますし、
DEXにおいてトークンの板取引を可能にする等イノベーションの源泉にもなっており、
現在最も注目すべきブロックチェーンであると思っています。

ブロックチェーン技術を利用したアプリケーション(dAppやWeb3アプリ)では、
従来サービス側がデータベースに入れて保持していたユーザーデータを、
ユーザーごとに分散し、それぞれクリプトウォレットを利用してデータを保持してもらいます。

従来のAPIサーバーロジックはブロックチェーン上で動作するスマートコントラクトに置き換わり、
フロントエンドの仕事は主に

  • クリプトウォレットとの接続(従来のAuth)
  • スマートコントラクトの実行(パラメータを作って投げて結果を受け取る)

の2つになりました。

とはいえ、dApp (分散型アプリケーション)もWeb Appと基礎は同じなので、
お馴染みのNext.jsをベースに、Web3.js等ブロックチェーンのライブラリを組み合わせて構成できます。

このボイラープレートは、Solana Walletとの接続部分に加えて、
開発環境の設定(TypeScriptやフォーマッター一式)、
コンポーネントライブラリ設定(MUI)やi18n(多言語)対応、
SSGを利用してのパフォーマンスとSEO力の確保など、
結局dAppやWeb3アプリを作るために必要になるものをパッケージングしました。

細かい設定をご自身のものに置き換えていただければ使える状態になっています。

下記に主なライブラリの構成リストを示します。

Next.js (v12) - SSG Framework

dAppはその性質上、秘密鍵を持つ必要がありません。
そうなるとSSGでホスティングしたくなります。
エコシステムが整っているNext.jsは素晴らしい。

React (v18) - UI Framework

JSXそしてReact Hooks、エコシステムの品質全てにおいて最強だと思う。

TypeScript (v4.7) - Type check

ESLint - Linter
Prettier - Formatter
Husky - Pre commit

快適な開発環境を

Material UI (v5) - Components Library

アプリのような書き味と品質、コンポーネント量の多さから選んでいます。
なぜかデフォルトだとイマイチなままなので、カスタム推奨。
https://github.com/EpicsDAO/dapp-boilerplate-v2/blob/master/src/constants/theme.ts
テーマはここで変更できます。

Next UI に期待を寄せています。

Recoil - State management

革命的な実行性能と書きやすさの両立。
ストア的な役割が必要ならまずこれから考えていいと思う。

Next i18next (v11) - Translation

ちょっと特殊なディレクトリ構成にはなるが、SSGするならこれに。

Firebase - Hosting & Analytics

Vercelも使いたいけどパートナークレジットのあるうちはどうしてもFirebaseを使ってしまいがち。
Google Analyticsもくっついていて楽に使えます。

Solana Web3.js - Solana Blockchain SDK

Solana のWebクライアント。Web3用の基本メソッドが入っています。

Solana Wallet Adapter - Solana Wallet SDK

Solana ウォレット用のアダプター。
Phantom、Glow、Solflare等各種Solanaウォレットに対応しています。

今後について

  • コメントで質問いただければ使い方についてできるだけ答えていきたいです。

  • Next UIの準備ができ次第v3を作りたい。

  • メタデータの扱い(Metaplex)サンプルをここに突っ込むか別建てします。

今後ともよろしくお願いします!

2023.10.16 追記

Solana Mobile Stackへの対応や、開発CLIの追加など、更に強力になったボイラープレートを作りましたので、今後はこちらをお使いいただければ嬉しいです。
結局選ばれたのはTailwindでした。

https://github.com/elsoul/skeet-solana-mobile-stack

https://github.com/elsoul/skeet-cli

Discussion