【完全保存版】Solanaで簡単なDappsを作ってみよう！
１ プログラムの作成
まずは、Solana Playgroundの「Counter PDA Tutorial」をもとにプログラムを作りましょう。
下のように選択します。
「START」から始めていきます。
３ページ目のこの部分を貼り付けます。
５ページ目もこのように貼り付けます。
あとは、43行目の「init」を「init_if_needed」に変更します。
（変更しなくても大丈夫ではあります。）
これでできましたので、デプロイしていきましょう。
なお、この記事ではプログラムの中身の説明は省きます。
「Build」を選択
次に、「Deploy」を押します。
しばらくしてこのようになれば、完了です。
２ IDLのエクスポート
次に、IDLのエクスポートを行います。
IDLとはInterface Description Language）の略で、プログラムの構成を説明しています。
下の「Export」 から抽出します。
３ ローカルで作ってみる
１ Git clone
では、準備ができたので、作っていきましょう。
まずはGit cloneを行っていきます。
git clone https://github.com/ytakahashi2020/solana_counter.git
２ 依存関係のインストール
次に、依存関係をインストールしていきます。
nodeのバージョンは下のように、20を使っています。
cd solana_counter
yarn install
３ IDLとプログラムIDの設定
次に、先ほどエクスポートしたIDLを下のように設定します。
（すでに「idl.json」があるので、上書きしてください。）
なお、追加で「address」も設定してください。
なお、アドレスには、先ほど作ったプログラムのこちらのIDを設定します。
また、「anchorClient.ts」でもこのように設定します。
４ 立ち上げてみる
では、「yarn dev」で立ち上げて、実際に見てみましょう。
このようになりました。
「Select Wallet」でウォレット接続を行い、色々と触ってみましょう。
５ カウンターの作成
では、カウンターというアカウントを作成してみましょう。
「プログラムを実行」を選択し、「確認」を選択します。
ちなみに今回は、数字が１ずつ増えていく、カウンターというアカウントを作成しています。
実行結果が出たので、見てみましょう。
10秒程度待つと、このように実行されていることがわかります。
（すぐ行くと、見つからないエラーになると思います。）
６ カウンターの取得
では、現在のカンターがいくつかも見てみましょう。
下のように押すと、カウンターが０であることがわかります。
７ カウンターの更新
次に、「カウンターの更新」を押してみましょう。
「確認」で進めていきます。
すると、下のように、１増えたことを確認することができました。
ちなみに、この時点で、Solana Playgroundのこちらから確認すると、確かに１となっていることが確認できます。
４ コードを見てみよう
では、ここで簡単にコードを見てみましょう。
１ ウォレット接続について
まずは、「AppWalletProvider.tsx」を確認します。
３つのプロバイダーで構成されていることがわかります。
また、大事な点として、「WalletAdapterNetwork」で「Devnet」が設定されています。
２ よく使うフック
次に、「page.tsx」でフックを見てみましょう。
「useWallet」でウォレットの状態を保持し、「useConnection」で接続先のクラスターとやり取りを行えます。
この２つが非常に重要です。
なお、「useAnchorWallet」は内部構造的には「useWallet」から作られています。
プログラムを実行する時などに使うと便利です。
３ プロバイダーの設定
では、トランザクションの実行部分を見てみましょう。
まずは、「createProvider」でプロバイダーをつくっています。
これで、どのクラスター（mainnet-betaなのか、Devnetかなど）にどのウォレットでやり取りするのかを設定することができます。
具体的には、この部分になります。
AnchorProviderを使っています。
こちらは参考です。
４ プログラムの指定
次にやりとりを行うプログラムを設定します。
プログラムの構成（IDL）とプログラムの公開鍵（のオブジェクト）、そしてプロバイダーを渡しています。
プロバイダーでどのクラスター（mainnet-betaなのか、Devnetかなど）かも設定していましたね。
ちなみに、IDLや公開鍵のオブジェクトはこの辺りで設定しています。
５ PDAの取得（参考）
今回の記事とは直接関係ないですが、下の部分でPDAを取得しています。
その後に、アドレスとして渡す必要があるためです。
６ 関数の実行
そして、最後に関数の実行を行っています。
メソッド名を指定し、必要なアカウントを設定して、「.rpc」でブロックチェーンに投げています。
以上が簡単なコードの説明でした。
やってみると、なるほどと思う部分も出てくると思いますので、ぜひやってみてください！
いいなと思ったら応援しよう！
