概要

Web３ハッカソンをきっかけに、
最近はバックエンドをブロックチェーン上のスマートコントラクトを使って実装したアプリケーション作りにハマっています。

今回は、ハッカソンでもチャレンジしたSolanaチェーンを用いて、TODOアプリ作りをやってみました。
ハッカソンではNativeRustで構築しようとしてやはり難しかったのですが、
Anchorを使うと、慣れは必要ですが、割と簡単にスマートコントラクトを実装できました。
また、SolanaPlaygroundを使うとスマートコントラクトの

Build
Deploy
Test
フロントエンドへの組み込み

が非常に楽で、いい開発環境が整ってきていることを感じれたので、
その辺りに関しても少し書いてみたいと思います。

フロントエンドのプログラムはこちらに上げています。
バックエンドのプログラムの詳細は長くなってしまいますので次記事に書こうと思います。

使用する技術スタック

フロントエンド (Nextjs)
バックエンド (Solana Anchor, Rust + QuickNode + Solana Playground)
ウォレット（Phantom)
デプロイ (Netlify + Solana Devnet)

となります。

参考にしたマテリアル

数年前からReactを勉強した時からフォローしている、CleverProgrammerの動画を参考にしました。
とてもわかりやすいので、みたことがない人はぜひみていただきたいです。

各実装のポイント

先述の

フロントエンド (Nextjs)
バックエンド (Solana Anchor, Rust + QuickNode + Solana Playground)
ウォレット（Phantom)
デプロイ (Netlify + Solana Devnet)

と書いた技術スタックですが、要点をかいつまんで書いてみようと思います。

フロントエンド

フロントエンドはNextjs を用い、

Phanton ウォレットへの接続
ウォレット接続のProvider の実装
Solana Playground からIDLの取得、Nextjsに組み込み
スマートコントラクトのエンドポイントへの接続、APIコール
APIコールのためのカスタムフックの実装

を実装するところがコアとなっています。
おそらく、Nextjsを触ったことがある人なら問題なくコードレベルで理解できると思います。

バックエンド

バックエンドは、いろいろなツールを駆使しながら、開発を非常にスムーズに行うことができ驚きました。
（Web3ハッカソンの時にこれらを知っていればもっと楽にできたはず、、）

Solana Playground による開発環境

Playground を使用することで、開発環境を準備する手間を省くことができます。
また、開発用のウォレットは付いてくるので、Devnetであれば簡単にairdrop をPlayground から行うことで、デプロイを実行することができます。
さらに、デプロイしたスマートコントラクトに対して、テストをPlayground上で実行できるため、非常に強力なIDE環境だと感じました。
これを使うのと使わないのではかなりストレスが違うと思います。

また、まだ試していないですが非常に最近VSCでもPlaygroundが使えるようになったとのことでした。

Anchor を使ったスマートコントラクト実装

私はハッカソンに出た時は、最初の理解をもっとしたいということ、
スマートコントラクト上で暗号計算を行いたいという理由から、NativeRustでの実装を行いましたが、
普通にdAppを作るという観点からは、Anchorを使うことを強くお勧めします。
理由は、強力なマクロを使ってコンテキスト（クライアントAPIをコールするときの引数）をある程度手軽に実装できるからです。
Rustならではの構文もありますが、どちらかというと全部理解するというより慣れが肝心なので、いくつかAnchorを使ってアプリを実装すると大丈夫だと思います。
一度苦労するという意味ではNativeを選ぶ選択肢もあります（Playgroundでも選択可能）が、
どちらも試した個人的意見としては、学習用途以外ではNativeをあえて選ぶ意味はあまり見出せないかなと思います。

QuickNodeを使ってエンドポイントを設定

QuickNodeを使うと、スケーラブルなスタティックエンドポイントを、さまざまなチェーン上で構築してくれ、
そのエンドポイントをNextjsに設定するだけでスマートコントラクトに接続可能になります。
とても便利ですし、無料でもある程度使えるので、使わないてはないかなと思いました。
他にも似たようなサービスがあるとは思いますが、そちらは使っていないので今の所比較できていませんが、
QuickNodeを使って不便なところは特に感じませんでした。
このようにディベロッパーに対してのサービスを提供するのはすごくありがたいですね。

まとめ

今回は、
Solana(Anchor) + Nextjs でTODOアプリケーション構築
をやってみたのでそれについて記事を書いてみました。

Solidityでも同じことをやったらどういう開発でできるのか、
Vuejsでフロントを実装したらどういうふうになるのかなど気になることはあるので、
それらも試してみれたらと思っています。

今回はこの辺で。

@kenmaro