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

はじめまして。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](https://nextjs.org/)
- [React (v18) - UI Framework](https://reactjs.org/)
- [TypeScript (v4.7) - Type check](https://www.typescriptlang.org/)
- [ESLint - Linter](https://eslint.org/)
- [Prettier - Formatter](https://prettier.io/)
- [Husky - Pre commit](https://typicode.github.io/husky/#/)
- [Material UI (v5) - Components Library](https://mui.com/)
- [Recoil - State management](https://recoiljs.org/)
- [Next i18next (v11) - Translation](https://github.com/isaachinman/next-i18next)
- [Firebase - Hosting & Analytics](https://firebase.google.com/)
- [Solana Web3.js - Solana Blockchain SDK](https://solana-labs.github.io/solana-web3.js/)
- [Solana Wallet Adapter - Solana Wallet SDK](https://github.com/solana-labs/wallet-adapter)

### [Next.js (v12) - SSG Framework](https://nextjs.org/)

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

### [React (v18) - UI Framework](https://reactjs.org/)

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


#### [TypeScript (v4.7) - Type check](https://www.typescriptlang.org/)
[ESLint - Linter](https://eslint.org/)
[Prettier - Formatter](https://prettier.io/)
[Husky - Pre commit](https://typicode.github.io/husky/#/)

快適な開発環境を。Happy coding.

### [Material UI (v5) - Components Library](https://mui.com/)

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

[Next UI](https://nextui.org/) に期待を寄せています。

### [Recoil - State management](https://recoiljs.org/)

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

### [Next i18next (v11) - Translation](https://github.com/isaachinman/next-i18next)

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

### [Firebase - Hosting & Analytics](https://firebase.google.com/)

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

### [Solana Web3.js - Solana Blockchain SDK](https://solana-labs.github.io/solana-web3.js/)

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

### [Solana Wallet Adapter - Solana Wallet SDK](https://github.com/solana-labs/wallet-adapter)

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

## 今後について

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

- [Next UI](https://nextui.org)の準備ができ次第v3を作りたい。

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


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

## 2023.10.16 追記

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

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

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